syncfusion-wpf-step-progressbar

实现 WPF SfStepProgressBar

SfStepProgressBar 是一个多步骤进度指示器，用于可视化顺序工作流。每个步骤都是一个 StepViewItem，具有活动、非活动或不确定状态。可将其用于订单跟踪、注册向导、结账流程、引导流程，或任何包含离散编号阶段的流程。

何时使用此技能

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

快速开始

<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 — 最后一个活动步骤的从零开始的索引（此前的所有步骤都会变为 Active）
• SelectedItemStatus — 所选步骤的状态：Active、Inactive 或 Indeterminate

文档与导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 包和程序集设置
• XAML 命名空间和架构导入
• 包含 4 个项目的基本步骤栏
• 创建代码隐藏
• 应用 SfSkinManager 主题

所选项目与状态

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

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

外观

📄 阅读： references/appearance.md

• MarkerShapeType（圆形或方形）
• Orientation（水平或垂直）
• 自定义连接线颜色和粗细
• MarkerClicked 事件，用于实现点击导航行为

布局

📄 阅读： references/layouts.md

• ItemsStretch：None / Fill / Auto
• ItemSpacing — None 模式下的间距
• MinimumItemSpacing — Fill 模式下的最小间距
• 垂直布局中根据内容自动拉伸

数据绑定与模板

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

• 使用 ItemsSource + ItemContainerStyle 进行 MVVM 绑定
• XML 数据源绑定
• ItemTemplate — 自定义步骤标记内容
• ItemTemplateSelector — 根据状态切换模板
• MarkerTemplateSelector — 为每种步骤状态自定义标记
• SecondaryContentTemplate — 标记下方／旁侧的标签
• SecondaryContentTemplateSelector

关键属性

属性	类型	默认值	用途
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 拉伸模式）

常见用例

• 订单跟踪： 4 步进度条（已下单 → 已打包 → 已发货 → 已送达），并为运输中的步骤设置 SelectedItemStatus="Indeterminate"
• 注册向导： 垂直排列，并设置 ItemsStretch="Fill" 以填满面板高度
• 引导流程： 自定义 MarkerTemplateSelector，在已完成的步骤上显示对勾，在当前步骤上显示加载旋转图标
• MVVM 仪表板： 将 ItemsSource 绑定到 ObservableCollection<StepItem>，并将 SelectedIndex 绑定到命令