Syncfusion Wpf Wizard Control

Implementing 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

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

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

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

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

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

Quick Start

Minimal XAML Setup

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

Minimal C# Setup

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

<!-- 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"/>

Non-Linear Navigation (Skip a Step)

<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

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

Key Properties

WizardControl Properties

WizardPage Properties