syncfusion-wpf-wizard-control

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF WizardControl

实现Syncfusion WPF WizardControl

WizardControl is Syncfusion's WPF wizard UI, modelled after the familiar installation wizard pattern. It hosts one or more WizardPage items and automatically manages Back/Next/Finish/Cancel navigation. Each page's type, banner, and button states are independently configurable. Pages can be added declaratively or bound from a data source.

Assemblies required:

```
Syncfusion.Shared.WPF
```
```
Syncfusion.Tools.WPF
```

Namespace:

Syncfusion.Windows.Tools.Controls

XAML schema:

http://schemas.syncfusion.com/wpf

WizardControl是Syncfusion推出的WPF向导UI，模仿了大家熟悉的安装向导模式。它承载一个或多个WizardPage项，并自动管理Back/Next/Finish/Cancel导航。每个页面的类型、横幅和按钮状态均可独立配置。页面可以通过声明方式添加，也可以从数据源绑定。

所需程序集：

```
Syncfusion.Shared.WPF
```
```
Syncfusion.Tools.WPF
```

命名空间：

Syncfusion.Windows.Tools.Controls

XAML架构：

http://schemas.syncfusion.com/wpf

When to Use This Skill

何时使用此技能

Creating a multi-step wizard UI (setup, onboarding, configuration, checkout)
Adding and configuring
```
WizardPage
```
items inside
```
WizardControl
```
Controlling which navigation buttons appear or are enabled per page
Implementing non-linear page flow (skip steps, branch on user input)
Binding wizard pages dynamically from a collection via
```
ItemsSource
```
Customizing banner images, banner colors, and page headers
Applying themes or customizing the wizard's visual appearance

创建多步骤向导UI（设置、新手引导、配置、结账流程）
在
```
WizardControl
```
中添加并配置
```
WizardPage
```
项
控制每个页面显示或启用哪些导航按钮
实现非线性页面流程（跳过步骤、根据用户输入分支）
通过
```
ItemsSource
```
从集合动态绑定向导页面
自定义横幅图像、横幅颜色和页面标题
应用主题或自定义向导的视觉外观

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly and NuGet setup
Adding WizardControl via designer, XAML, or C#
Adding multiple WizardPages
Theme support overview

📄 阅读： references/getting-started.md

程序集和NuGet设置
通过设计器、XAML或C#添加WizardControl
添加多个WizardPage
主题支持概述

Page Types & Navigation Buttons

页面类型与导航按钮

📄 Read: references/page-types-and-navigation.md

```
PageType
```
enum: Blank, Interior, Exterior
Enabling/disabling Back, Next, Finish, Cancel buttons
Showing/hiding navigation buttons
Custom button label text

FinishButtonClosesWindow

CancelButtonCancelsWindow

📄 阅读： references/page-types-and-navigation.md

```
PageType
```
枚举：Blank、Interior、Exterior
启用/禁用Back、Next、Finish、Cancel按钮
显示/隐藏导航按钮
自定义按钮标签文本

FinishButtonClosesWindow

CancelButtonCancelsWindow

Interactive Features

交互功能

📄 Read: references/interactive-features.md

Populating pages declaratively vs. via
```
ItemsSource
```
data binding
```
ItemContainerStyle
```
and
```
ItemTemplate
```
for bound pages
```
SelectedWizardPage
```
— programmatic page selection
```
Title
```
and
```
Description
```
on WizardPage
```
NextPage
```
/
```
PreviousPage
```
for non-linear navigation
```
Next
```
event handler

📄 阅读： references/interactive-features.md

声明式填充页面 vs 通过
```
ItemsSource
```
数据绑定
绑定页面的
```
ItemContainerStyle
```
和
```
ItemTemplate
```
```
SelectedWizardPage
```
—— 程序化页面选择
WizardPage上的
```
Title
```
和
```
Description
```
用于非线性导航的
```
NextPage
```
/
```
PreviousPage
```
```
Next
```
事件处理程序

Layout & Appearance

布局与外观

📄 Read: references/layout-and-appearance.md

```
InteriorPageHeaderMinHeight
```
```
BannerBackground
```
color
```
BannerImage
```
on WizardPage
```
ExteriorPageBannerImageMinWidth
```
Applying built-in themes via
```
SfSkinManager
```
Custom themes via Theme Studio

📄 阅读： references/layout-and-appearance.md

```
InteriorPageHeaderMinHeight
```
```
BannerBackground
```
颜色
WizardPage上的
```
BannerImage
```
```
ExteriorPageBannerImageMinWidth
```
通过
```
SfSkinManager
```
应用内置主题
通过Theme Studio自定义主题

Quick Start

快速开始

Minimal XAML Setup

最简XAML设置

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>

xaml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:WizardControl Name="wizard"
                                  FinishButtonClosesWindow="True"
                                  CancelButtonCancelsWindow="True">
            <syncfusion:WizardPage Title="Welcome"
                                   Description="安装流程介绍。"
                                   PageType="Exterior"
                                   BannerImage="Images/banner.png"/>
            <syncfusion:WizardPage Title="Configuration"
                                   Description="配置你的设置。"
                                   PageType="Interior"/>
            <syncfusion:WizardPage Title="Finish"
                                   Description="安装已完成。"
                                   PageType="Exterior"/>
        </syncfusion:WizardControl>
    </Grid>
</Window>

Minimal C# Setup

最简C#设置

csharp

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;

csharp

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;

Common Patterns

常见模式

Control Navigation Button Visibility Per Page

按页面控制导航按钮可见性

xaml

<!-- First page: hide Back, show Next -->
<syncfusion:WizardPage Title="Step 1" BackVisible="False" NextVisible="True" FinishVisible="False"/>

<!-- Middle page: show Back and Next -->
<syncfusion:WizardPage Title="Step 2" BackVisible="True" NextVisible="True" FinishVisible="False"/>

<!-- Last page: show Back and Finish, hide Next -->
<syncfusion:WizardPage Title="Step 3" BackVisible="True" NextVisible="False" FinishVisible="True"/>

xaml

<!-- 第一页：隐藏Back，显示Next -->
<syncfusion:WizardPage Title="Step 1" BackVisible="False" NextVisible="True" FinishVisible="False"/>

<!-- 中间页：显示Back和Next -->
<syncfusion:WizardPage Title="Step 2" BackVisible="True" NextVisible="True" FinishVisible="False"/>

<!-- 最后一页：显示Back和Finish，隐藏Next -->
<syncfusion:WizardPage Title="Step 3" BackVisible="True" NextVisible="False" FinishVisible="True"/>

Non-Linear Navigation (Skip a Step)

非线性导航（跳过步骤）

xaml

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

xaml

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

Handle Next Button Click

处理Next按钮点击

xaml

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

csharp

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
}

xaml

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

csharp

private void Wizard_Next(object sender, RoutedEventArgs e)
{
    var wiz = (WizardControl)sender;
    // 导航前验证当前页面
    if (!ValidateCurrentPage())
        e.Handled = true;  // 取消导航
}

Key Properties

关键属性

WizardControl Properties

WizardControl属性

Property	Type	Description
`SelectedWizardPage`	WizardPage	Currently displayed page
`ItemsSource`	IEnumerable	Bind pages from a collection
`ItemTemplate`	DataTemplate	Template for bound page content
`ItemContainerStyle`	Style	Style applied to each WizardPage container
`BackEnabled`	bool	Enable/disable Back button globally
`NextEnabled`	bool	Enable/disable Next button globally
`FinishEnabled`	bool	Enable/disable Finish button globally
`CancelEnabled`	bool	Enable/disable Cancel button globally
`BackVisible`	bool	Show/hide Back button globally
`NextVisible`	bool	Show/hide Next button globally
`FinishVisible`	bool	Show/hide Finish button globally
`HelpVisible`	bool	Show/hide Help button globally
`CancelVisible`	bool	Show/hide Cancel button globally
`BackText`	string	Custom label for Back button
`NextText`	string	Custom label for Next button
`FinishText`	string	Custom label for Finish button
`HelpText`	string	Custom label for Help button
`CancelText`	string	Custom label for Cancel button
`FinishButtonClosesWindow`	bool	Close window on Finish click
`CancelButtonCancelsWindow`	bool	Close window on Cancel click
`InteriorPageHeaderMinHeight`	double	Min header height for Interior pages
`ExteriorPageBannerImageMinWidth`	double	Min banner image width for Exterior pages

属性	类型	说明
`SelectedWizardPage`	WizardPage	当前显示的页面
`ItemsSource`	IEnumerable	从集合绑定页面
`ItemTemplate`	DataTemplate	绑定页面内容的模板
`ItemContainerStyle`	Style	应用于每个WizardPage容器的样式
`BackEnabled`	bool	全局启用/禁用Back按钮
`NextEnabled`	bool	全局启用/禁用Next按钮
`FinishEnabled`	bool	全局启用/禁用Finish按钮
`CancelEnabled`	bool	全局启用/禁用Cancel按钮
`BackVisible`	bool	全局显示/隐藏Back按钮
`NextVisible`	bool	全局显示/隐藏Next按钮
`FinishVisible`	bool	全局显示/隐藏Finish按钮
`HelpVisible`	bool	全局显示/隐藏Help按钮
`CancelVisible`	bool	全局显示/隐藏Cancel按钮
`BackText`	string	Back按钮的自定义标签
`NextText`	string	Next按钮的自定义标签
`FinishText`	string	Finish按钮的自定义标签
`HelpText`	string	Help按钮的自定义标签
`CancelText`	string	Cancel按钮的自定义标签
`FinishButtonClosesWindow`	bool	点击Finish时关闭窗口
`CancelButtonCancelsWindow`	bool	点击Cancel时关闭窗口
`InteriorPageHeaderMinHeight`	double	Interior页面的最小标题高度
`ExteriorPageBannerImageMinWidth`	double	Exterior页面的最小横幅图像宽度

WizardPage Properties

WizardPage属性

Property	Type	Description
`Title`	string	Page title shown in header
`Description`	string	Page description shown in header
`PageType`	WizardPageType	Blank, Interior, or Exterior
`BannerImage`	ImageSource	Banner image for the page
`BannerBackground`	Brush	Banner area background color
`NextPage`	WizardPage	Override the default next page
`PreviousPage`	WizardPage	Override the default previous page
`BackEnabled`	bool	Enable/disable Back on this page
`NextEnabled`	bool	Enable/disable Next on this page
`FinishEnabled`	bool	Enable/disable Finish on this page
`CancelEnabled`	bool	Enable/disable Cancel on this page
`BackVisible`	bool	Show/hide Back on this page
`NextVisible`	bool	Show/hide Next on this page
`FinishVisible`	bool	Show/hide Finish on this page
`HelpVisible`	bool	Show/hide Help on this page
`CancelVisible`	bool	Show/hide Cancel on this page

属性	类型	说明
`Title`	string	页面标题（显示在表头）
`Description`	string	页面描述（显示在表头）
`PageType`	WizardPageType	Blank、Interior或Exterior
`BannerImage`	ImageSource	页面的横幅图像
`BannerBackground`	Brush	横幅区域的背景颜色
`NextPage`	WizardPage	覆盖默认的下一页
`PreviousPage`	WizardPage	覆盖默认的上一页
`BackEnabled`	bool	在此页面上启用/禁用Back
`NextEnabled`	bool	在此页面上启用/禁用Next
`FinishEnabled`	bool	在此页面上启用/禁用Finish
`CancelEnabled`	bool	在此页面上启用/禁用Cancel
`BackVisible`	bool	在此页面上显示/隐藏Back
`NextVisible`	bool	在此页面上显示/隐藏Next
`FinishVisible`	bool	在此页面上显示/隐藏Finish
`HelpVisible`	bool	在此页面上显示/隐藏Help
`CancelVisible`	bool	在此页面上显示/隐藏Cancel