Implementing WPF SfStepProgressBar

The SfStepProgressBar is a multi-step progress indicator for visualizing sequential workflows. Each step is a StepViewItem with active, inactive, or indeterminate status. Use it for order tracking, registration wizards, checkout flows, onboarding, or any process with discrete numbered stages.

When to Use This Skill

• User needs a step-by-step progress UI (wizard, checkout, order tracker)
• Displaying multiple stages with active/inactive/in-progress states
• Building vertical or horizontal step indicators with custom markers
• Binding steps from a data collection (MVVM / XML)
• Customizing marker shapes, connector colors, or step templates by status

Quick Start

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"
    x:Class="MyApp.MainWindow">
    <Grid x:Name="grid">
        <Syncfusion:SfStepProgressBar SelectedIndex="2" SelectedItemStatus="Indeterminate">
            <Syncfusion:StepViewItem Content="Ordered" />
            <Syncfusion:StepViewItem Content="Packed" />
            <Syncfusion:StepViewItem Content="Shipped" />
            <Syncfusion:StepViewItem Content="Delivered" />
        </Syncfusion:SfStepProgressBar>
    </Grid>
</Window>

using Syncfusion.UI.Xaml.ProgressBar;

SfStepProgressBar stepProgressBar = new SfStepProgressBar();
stepProgressBar.Items.Add(new StepViewItem { Content = "Ordered" });
stepProgressBar.Items.Add(new StepViewItem { Content = "Packed" });
stepProgressBar.Items.Add(new StepViewItem { Content = "Shipped" });
stepProgressBar.Items.Add(new StepViewItem { Content = "Delivered" });
stepProgressBar.SelectedIndex = 2;
stepProgressBar.SelectedItemStatus = StepStatus.Indeterminate;
grid.Children.Add(stepProgressBar);

• SelectedIndex — zero-based index of the last active step (all steps before it become Active)
• SelectedItemStatus — status of the selected step: Active, Inactive, or Indeterminate

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package and assembly setup
• XAML namespace and schema import
• Basic step bar with 4 items
• Code-behind creation
• Applying SfSkinManager themes

Selected Item & Status

📄 Read: references/selected-item-and-status.md

• SelectedIndex — controlling which step is active
• SelectedItemStatus (Active / Inactive / Indeterminate)
• SelectedItemProgress — partial fill on the current step
• AnimationDuration — transition speed between steps
• MVVM binding patterns for dynamic step advancement

Appearance

📄 Read: references/appearance.md

• MarkerShapeType (Circle vs Square)
• Orientation (Horizontal vs Vertical)
• Connector color and thickness customization
• MarkerClicked event for click-to-navigate behavior

Layouts

📄 Read: references/layouts.md

• ItemsStretch: None / Fill / Auto
• ItemSpacing — gap in None mode
• MinimumItemSpacing — minimum gap in Fill mode
• Auto stretch for vertical content-driven sizing

Data Binding & Templates

📄 Read: references/data-binding-and-templates.md

• ItemsSource + ItemContainerStyle for MVVM binding
• XML data source binding
• ItemTemplate — custom step marker content
• ItemTemplateSelector — status-based template switching
• MarkerTemplateSelector — custom marker per step status
• SecondaryContentTemplate — labels below/beside markers
• SecondaryContentTemplateSelector

Key Properties

Property	Type	Default	Purpose
SelectedIndex	int	—	Zero-based index of last active step
SelectedItemStatus	StepStatus	Inactive	Status of the selected step
SelectedItemProgress	double	100	Partial fill % on the selected step
AnimationDuration	TimeSpan	500ms	Step transition animation speed
Orientation	Orientation	Horizontal	Horizontal or vertical layout
MarkerShapeType	MarkerShapeType	Circle	Circle or Square step markers
ActiveConnectorColor	Brush	—	Color of connector between active steps
ConnectorColor	Brush	—	Color of connector between inactive steps
ConnectorThickness	double	—	Thickness of connector lines
ItemsStretch	ItemsStretch	None	How items fill available space
ItemSpacing	double	80	Space between steps (None stretch)

Common Use Cases

• Order tracking: 4-step bar (Ordered → Packed → Shipped → Delivered) with SelectedItemStatus="Indeterminate" for the in-transit step
• Registration wizard: Vertical orientation with ItemsStretch="Fill" to fill the panel height
• Onboarding flow: Custom MarkerTemplateSelector to show checkmarks on completed steps and spinner on current
• MVVM dashboard: ItemsSource bound to ObservableCollection<StepItem> with SelectedIndex bound to a command