syncfusion-wpf-step-progressbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF SfStepProgressBar

实现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.

SfStepProgressBar

是一款用于可视化顺序工作流的多步骤进度指示器。每个步骤都是一个具有active（激活）、inactive（未激活）或indeterminate（不确定）状态的

StepViewItem

。可将其用于订单跟踪、注册向导、结账流程、用户入门引导或任何包含离散编号阶段的流程。

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

用户需要分步进度UI（向导、结账、订单跟踪器）
展示具有激活/未激活/进行中状态的多个阶段
构建带有自定义标记的垂直或水平步骤指示器
从数据集合绑定步骤（MVVM / XML）
根据状态自定义标记形状、连接线颜色或步骤模板

Quick Start

快速开始

xaml

<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>

csharp

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

xaml

<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>

csharp

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
```
— 最后一个激活步骤的从零开始的索引（其之前的所有步骤都会变为激活状态）

SelectedItemStatus

— 选中步骤的状态：

Active

、

Inactive

或

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

📄 阅读： references/getting-started.md

NuGet包和程序集设置
XAML命名空间和架构导入
包含4个项的基础步骤进度条
代码后置创建方式
应用SfSkinManager主题

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

📄 阅读： references/selected-item-and-status.md

SelectedIndex — 控制哪个步骤处于激活状态
SelectedItemStatus（Active / Inactive / Indeterminate）
SelectedItemProgress — 当前步骤的部分填充进度
AnimationDuration — 步骤间切换的过渡速度
用于动态步骤推进的MVVM绑定模式

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

📄 阅读： references/appearance.md

MarkerShapeType（圆形 vs 方形）
Orientation（水平 vs 垂直）
连接线颜色和粗细定制
用于点击导航行为的MarkerClicked事件

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

📄 阅读： references/layouts.md

ItemsStretch：None / Fill / Auto
ItemSpacing — None模式下的间距
MinimumItemSpacing — Fill模式下的最小间距
针对垂直内容驱动尺寸的自动拉伸

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

📄 阅读： references/data-binding-and-templates.md

ItemsSource + ItemContainerStyle用于MVVM绑定
XML数据源绑定
ItemTemplate — 自定义步骤标记内容
ItemTemplateSelector — 基于状态的模板切换
MarkerTemplateSelector — 基于步骤状态的自定义标记
SecondaryContentTemplate — 标记下方/旁边的标签
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)

属性	类型	默认值	用途
`SelectedIndex`	`int`	—	最后一个激活步骤的从零开始的索引
`SelectedItemStatus`	`StepStatus`	`Inactive`	选中步骤的状态
`SelectedItemProgress`	`double`	`100`	当前步骤的部分填充百分比
`AnimationDuration`	`TimeSpan`	`500ms`	步骤过渡动画速度
`Orientation`	`Orientation`	`Horizontal`	水平或垂直布局
`MarkerShapeType`	`MarkerShapeType`	`Circle`	圆形或方形步骤标记
`ActiveConnectorColor`	`Brush`	—	激活步骤间连接线的颜色
`ConnectorColor`	`Brush`	—	未激活步骤间连接线的颜色
`ConnectorThickness`	`double`	—	连接线的粗细
`ItemsStretch`	`ItemsStretch`	`None`	项填充可用空间的方式
`ItemSpacing`	`double`	`80`	步骤间的间距（None拉伸模式下）

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

订单跟踪： 4步骤进度条（已下单 → 已打包 → 已发货 → 已送达），对运输中的步骤设置
```
SelectedItemStatus="Indeterminate"
```
注册向导： 垂直布局，设置
```
ItemsStretch="Fill"
```
以填充面板高度
入门引导流程： 自定义
```
MarkerTemplateSelector
```
，对已完成步骤显示勾选标记，当前步骤显示加载动画

MVVM仪表板：

ItemsSource

绑定到

ObservableCollection<StepItem>

，

SelectedIndex

绑定到命令