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