Wizard Component Samples

The Wizard control provides multi-step navigation through a series of steps, displaying one step at a time with navigation buttons (Previous, Next, Finish, Cancel). In Web Forms this was <asp:Wizard>.

Basic Wizard

A simple 3-step registration wizard with a sidebar showing all steps.

Personal Info
Registration Wizard

Step 1: Personal Information

Enter your name and email address.

Code:

<Wizard ActiveStepIndex="@step" ActiveStepIndexChanged="(i) => step = i"
        HeaderText="Registration Wizard"
        DisplaySideBar="true">
  <WizardSteps>
    <WizardStep Title="Step 1">...</WizardStep>
    <WizardStep Title="Step 2">...</WizardStep>
    <WizardStep Title="Finish" StepType="WizardStepType.Finish">...</WizardStep>
  </WizardSteps>
</Wizard>

Wizard without Sidebar

Hides the sidebar navigation panel by setting DisplaySideBar="false". Users must use Previous/Next buttons to navigate through steps.

Survey Wizard

Question 1: How satisfied are you?

Code:

<Wizard DisplaySideBar="false">
  <WizardSteps>
    ...
  </WizardSteps>
</Wizard>

Wizard with AllowReturn Restriction

The first step sets AllowReturn="false", preventing users from navigating back to it once they proceed. The Previous button is disabled when trying to return to that step.

Terms
Multi-page Form

Step 1: Read Terms (No Return)

You must read and accept the terms to continue. Once you proceed, you cannot go back to this step.

Code:

<WizardStep Title="Terms" AllowReturn="false">
  <p>Once you proceed past this step, you cannot go back.</p>
</WizardStep>
<WizardStep Title="Details">
  ...
</WizardStep>

Wizard with Cancel Button

Set DisplayCancelButton="true" to show a Cancel button. Handle the OnCancelButtonClick event to perform cleanup or navigation.

Step 1
Wizard with Cancel

Step 1: Enter Data

Code:

<Wizard DisplayCancelButton="true"
        OnCancelButtonClick="HandleCancel">
  ...
</Wizard>

Custom Button Text

Customize the text on navigation buttons using the *ButtonText properties like StartNextButtonText, StepPreviousButtonText, FinishButtonText, etc.

Product
Custom Button Labels

Step 1: Select Product

Code:

<Wizard StartNextButtonText="Begin ➜"
        StepNextButtonText="Continue ➜"
        StepPreviousButtonText="⬅ Back"
        FinishButtonText="Submit Order"
        CancelButtonText="Cancel Order">
  ...
</Wizard>

Wizard with HeaderTemplate

Use the HeaderTemplate to customize the header section with custom content instead of plain text.

Cart

Checkout Process

Step 1 of 3

Step 1: Review Cart

Item 1 $29.99
Item 2 $15.00

Total: $44.99

Code:

<Wizard>
  <HeaderTemplate>
    <div style="padding: 15px; background-color: #f0f0f0;">
      <h4>Custom Header Content</h4>
    </div>
  </HeaderTemplate>
  <WizardSteps>
    ...
  </WizardSteps>
</Wizard>

FinishCompleteButtonText Override

When FinishCompleteButtonText is set, it takes precedence over FinishButtonText for the rendered Finish button label.

Button Text Override

Step 1: Student Details

Move to the finish step to compare the configured labels.

Code:

<Wizard FinishButtonText="Submit Enrollment"
        FinishCompleteButtonText="Complete Enrollment">
  <WizardSteps>
    <WizardStep Title="Confirm" StepType="WizardStepType.Finish" />
  </WizardSteps>
</Wizard>

Wizard with SideBarTemplate

Use SideBarTemplate to replace the built-in sidebar links with your own custom list layout.

Custom Sidebar

Step 1: Account

This sidebar is fully custom markup.

Code:

<Wizard DisplaySideBar="true">
  <SideBarTemplate>
    <ul class="list-unstyled">
      <li>Custom step list</li>
      <li>with your own layout</li>
    </ul>
  </SideBarTemplate>
  <WizardSteps>...</WizardSteps>
</Wizard>

Wizard with StartNavigationTemplate

StartNavigationTemplate replaces the default navigation row for the first step, letting you use a custom button layout.

Custom Start Navigation

Step 1: Welcome

The custom start button replaces the default Next button on this step.

Code:

<Wizard>
  <StartNavigationTemplate>
    <button type="button" class="btn btn-outline-primary">🚀 Begin Setup</button>
  </StartNavigationTemplate>
  <WizardSteps>...</WizardSteps>
</Wizard>

Wizard with StepNavigationTemplate

StepNavigationTemplate customizes navigation for middle steps while leaving the start and finish steps unchanged.

Custom Middle Navigation

Step 1: Start

Use the default Next button to reach the middle step.

Code:

<Wizard>
  <StepNavigationTemplate>
    <div class="d-flex justify-content-between">
      <button type="button">← Edit</button>
      <button type="button">Save →</button>
    </div>
  </StepNavigationTemplate>
  <WizardSteps>...</WizardSteps>
</Wizard>

Wizard with FinishNavigationTemplate

FinishNavigationTemplate replaces the default Previous/Finish row on the finish step with custom actions.

Custom Finish Navigation

Step 1: Summary

Use the default Next button to reach the finish step.

Code:

<Wizard>
  <FinishNavigationTemplate>
    <div class="d-flex justify-content-end gap-2">
      <button type="button">← Back</button>
      <button type="button">✅ Confirm</button>
    </div>
  </FinishNavigationTemplate>
  <WizardSteps>...</WizardSteps>
</Wizard>

Source Code

Complete code-behind implementation for all wizard demonstrations: