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 — 最後にアクティブになったステップの 0 始まりのインデックス（それより前のすべてのステップは 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 モードでの最小間隔
• コンテンツに応じた縦方向のサイズ調整に使う Auto ストレッチ

データバインディングとテンプレート

📄 参照: references/data-binding-and-templates.md

• MVVM バインディングのための ItemsSource + ItemContainerStyle
• XML データソースのバインディング
• ItemTemplate — ステップマーカーのカスタムコンテンツ
• ItemTemplateSelector — 状態に応じたテンプレートの切り替え
• MarkerTemplateSelector — ステップの状態ごとのカスタムマーカー
• SecondaryContentTemplate — マーカーの下または横に表示するラベル
• SecondaryContentTemplateSelector

主要なプロパティ

プロパティ	型	既定値	目的
SelectedIndex	int	—	最後にアクティブになったステップの 0 始まりのインデックス
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 をコマンドにバインドします