syncfusion-wpf-wizard-control

实现 Syncfusion WPF WizardControl

WizardControl 是 Syncfusion 的 WPF 向导 UI，采用常见的安装向导模式。它承载一个或多个 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
• 启用／禁用“上一步”、“下一步”、“完成”、“取消”按钮
• 显示／隐藏导航按钮
• 自定义按钮标签文本
• 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>

处理“下一步”按钮单击事件

<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	显示/隐藏此页面上的“取消”按钮