syncfusion-wpf-wizard-control

Syncfusion WPF WizardControl の実装

WizardControl は Syncfusion の WPF ウィザード UI で、一般的なインストールウィザードのパターンをもとに設計されています。1 つ以上の WizardPage 項目をホストし、「戻る／次へ／完了／キャンセル」のナビゲーションを自動的に管理します。各ページの種類、バナー、ボタンの状態は個別に設定できます。ページは宣言的に追加することも、データソースからバインドすることもできます。

必要なアセンブリ：

• Syncfusion.Shared.WPF
• Syncfusion.Tools.WPF

名前空間： Syncfusion.Windows.Tools.Controls
XAML スキーマ： http://schemas.syncfusion.com/wpf

---

このスキルを使用する場面

• 複数ステップのウィザード UI（セットアップ、オンボーディング、構成、チェックアウト）を作成する
• WizardControl 内に WizardPage 項目を追加して構成する
• ページごとに表示するナビゲーションボタンや有効化するボタンを制御する
• 非線形のページフロー（ステップのスキップ、ユーザー入力に応じた分岐）を実装する
• ItemsSource を使用してコレクションからウィザードページを動的にバインドする
• バナー画像、バナーの色、ページヘッダーをカスタマイズする
• テーマを適用する、またはウィザードの外観をカスタマイズする

---

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリと NuGet のセットアップ
• デザイナー、XAML、または C# を使った WizardControl の追加
• 複数の WizardPage の追加
• テーマサポートの概要

ページの種類とナビゲーションボタン

📄 参照： references/page-types-and-navigation.md

• PageType 列挙型：Blank、Interior、Exterior
• Back、Next、Finish、Cancel ボタンの有効化／無効化
• ナビゲーションボタンの表示／非表示
• カスタムボタンのラベルテキスト
• FinishButtonClosesWindow / CancelButtonCancelsWindow

インタラクティブ機能

📄 参照： references/interactive-features.md

• 宣言的なページの追加と、ItemsSource データバインディングによる追加
• バインドされたページ向けの ItemContainerStyle と ItemTemplate
• SelectedWizardPage — プログラムからページを選択
• WizardPage の Title と Description
• 非線形ナビゲーション用の NextPage / PreviousPage
• Next イベントハンドラー

レイアウトと外観

📄 参照： references/layout-and-appearance.md

• InteriorPageHeaderMinHeight
• BannerBackground の色
• WizardPage の BannerImage
• ExteriorPageBannerImageMinWidth
• SfSkinManager による組み込みテーマの適用
• Theme Studio によるカスタムテーマ

---

クイックスタート

最小限の XAML セットアップ

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:WizardControl Name="wizard"
                                  FinishButtonClosesWindow="True"
                                  CancelButtonCancelsWindow="True">
            <syncfusion:WizardPage Title="Welcome"
                                   Description="Introduction to the setup process."
                                   PageType="Exterior"
                                   BannerImage="Images/banner.png"/>
            <syncfusion:WizardPage Title="Configuration"
                                   Description="Configure your settings."
                                   PageType="Interior"/>
            <syncfusion:WizardPage Title="Finish"
                                   Description="Setup is complete."
                                   PageType="Exterior"/>
        </syncfusion:WizardControl>
    </Grid>
</Window>

最小限の C# セットアップ

using Syncfusion.Windows.Tools.Controls;

WizardControl wizard = new WizardControl();
wizard.FinishButtonClosesWindow = true;
wizard.CancelButtonCancelsWindow = true;

WizardPage page1 = new WizardPage { Title = "Welcome",       PageType = WizardPageType.Exterior };
WizardPage page2 = new WizardPage { Title = "Configuration", PageType = WizardPageType.Interior };
WizardPage page3 = new WizardPage { Title = "Finish",        PageType = WizardPageType.Exterior };

wizard.Items.Add(page1);
wizard.Items.Add(page2);
wizard.Items.Add(page3);

this.Content = wizard;

---

よく使われるパターン

ページごとにナビゲーションボタンの表示を制御する

<syncfusion:WizardPage Title="Step 1" BackVisible="False" NextVisible="True" FinishVisible="False"/>


<syncfusion:WizardPage Title="Step 2" BackVisible="True" NextVisible="True" FinishVisible="False"/>


<syncfusion:WizardPage Title="Step 3" BackVisible="True" NextVisible="False" FinishVisible="True"/>

非線形ナビゲーション（ステップをスキップする）

<syncfusion:WizardControl Name="wizard">
    <syncfusion:WizardPage x:Name="step1" Title="Step 1"
                           NextPage="{Binding ElementName=step3}"/>
    <syncfusion:WizardPage x:Name="step2" Title="Step 2"/>
    <syncfusion:WizardPage x:Name="step3" Title="Step 3"
                           PreviousPage="{Binding ElementName=step1}"/>
</syncfusion:WizardControl>

Next ボタンのクリックを処理する

<syncfusion:WizardControl Next="Wizard_Next" ...>

private void Wizard_Next(object sender, RoutedEventArgs e)
{
    var wiz = (WizardControl)sender;
    // Validate current page before allowing navigation
    if (!ValidateCurrentPage())
        e.Handled = true;  // Cancel navigation
}

---

主なプロパティ

WizardControl のプロパティ

プロパティ	型	説明
SelectedWizardPage	WizardPage	現在表示されているページ
ItemsSource	IEnumerable	コレクションからページをバインドします
ItemTemplate	DataTemplate	バインドされたページコンテンツのテンプレート
ItemContainerStyle	Style	各 WizardPage コンテナーに適用されるスタイル
BackEnabled	bool	戻るボタンを全体的に有効／無効にします
NextEnabled	bool	次へボタンを全体的に有効／無効にします
FinishEnabled	bool	完了ボタンを全体的に有効／無効にします
CancelEnabled	bool	キャンセルボタンを全体的に有効／無効にします
BackVisible	bool	戻るボタンを全体的に表示／非表示にします
NextVisible	bool	次へボタンを全体的に表示／非表示にします
FinishVisible	bool	完了ボタンを全体的に表示／非表示にします
HelpVisible	bool	ヘルプボタンを全体的に表示／非表示にします
CancelVisible	bool	キャンセルボタンを全体的に表示／非表示にします
BackText	string	戻るボタンのカスタムラベル
NextText	string	次へボタンのカスタムラベル
FinishText	string	完了ボタンのカスタムラベル
HelpText	string	ヘルプボタンのカスタムラベル
CancelText	string	キャンセルボタンのカスタムラベル
FinishButtonClosesWindow	bool	完了クリック時にウィンドウを閉じます
CancelButtonCancelsWindow	bool	キャンセルクリック時にウィンドウを閉じます
InteriorPageHeaderMinHeight	double	Interior ページのヘッダーの最小高さ
ExteriorPageBannerImageMinWidth	double	Exterior ページのバナー画像の最小幅

WizardPage のプロパティ

プロパティ	型	説明
Title	string	ヘッダーに表示されるページタイトル
Description	string	ヘッダーに表示されるページの説明
PageType	WizardPageType	Blank、Interior、または Exterior
BannerImage	ImageSource	ページのバナー画像
BannerBackground	Brush	バナー領域の背景色
NextPage	WizardPage	デフォルトの次のページを上書きします
PreviousPage	WizardPage	デフォルトの前のページを上書きします
BackEnabled	bool	このページで戻るを有効／無効にします
NextEnabled	bool	このページで次へを有効／無効にします
FinishEnabled	bool	このページで完了を有効／無効にします
CancelEnabled	bool	このページでキャンセルを有効／無効にします
BackVisible	bool	このページで戻るを表示／非表示にします
NextVisible	bool	このページで次へを表示／非表示にします
FinishVisible	bool	このページで完了を表示／非表示にします
HelpVisible	bool	このページでヘルプを表示／非表示にします
CancelVisible	bool	このページでキャンセルを表示／非表示にします