Edit this page

Wizard Pages

In order to add pages to RadWizard, you have to use its WizardPages collection. It consists of the following page types:

  • WizardPage: Represents a wizard's page and by default its ButtonsVisibilityMode property is set to “Previous”, ”Next” and “Cancel”.
  • WelcomeWizardPage: Represents a welcome page. It derives directly from WizardPage and the only difference is that the ButtonsVisibilityMode property is set to “Next” and “Cancel” by default.
  • CompletionWizardPage: Represents a completion page. It derives directly from WizardPage and the only difference is that the ButtonsVisibilityMode property is set to “Previous”, “Cancel” and “Finish” by default.

For each wizard page you are able to define a header, title, side header and change the default footer by setting the following properties:

  • Header : Enables you to define anything as a header.
  • Title : Provides you a way to define a title for the page.
  • SideHeader : Enables you to define anything as a side header on the left side of the page.
  • Content : Contains the page content (WizardPage derives directly from ContentControl).

Setting HeaderTemplate, SideHeaderTemplate and FooterTemplate

All these properties can be used to get or set the data template, respectfully, for the header, side header and footer. So, if you want to change those default elements for a particular wizard page, you may define them as in Example 1.

[XAML]Example 1: Setting the HeaderTemplate, SideHeaderTemplate and FooterTemplate properties in XAML

<telerik:RadWizard x:Name="radWizard" >
    <telerik:RadWizard.WizardPages>
        <telerik:WizardPage Content="My Wizard Page Content" SideHeaderWidth="100" HeaderHeight="100">                  
            <telerik:WizardPage.HeaderTemplate>
                <DataTemplate>
                    <Image Source="Images/BrandMark_Telerik_Black.png" Width="200" Height="100" />
                </DataTemplate>
            </telerik:WizardPage.HeaderTemplate>
            <telerik:WizardPage.SideHeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="My Side Header" />
                </DataTemplate>
            </telerik:WizardPage.SideHeaderTemplate>
            <telerik:WizardPage.FooterTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <telerik:RadButton Content="Back" 
                                               Width="70" Height="25"
                                               Command="wizard:RadWizardCommands.MoveCurrentToPrevious"  
                                               CommandParameter="{Binding}" />
                        <telerik:RadButton Content="Next" Width="70" Height="25"
                                               Command="wizard:RadWizardCommands.MoveCurrentToNext" 
                                               CommandParameter="{Binding}" />
                    </StackPanel>
                </DataTemplate>
            </telerik:WizardPage.FooterTemplate>
        </telerik:WizardPage>               
    </telerik:RadWizard.WizardPages>            
</telerik:RadWizard>

In order to use the built-in commands, you should define the following namespace:
xmlns:wizard="clr-namespace:Telerik.Windows.Controls.Wizard;assembly=Telerik.Windows.Controls.Navigation"

Figure 1: The wizard page defined in Example 1 will be displayed as follows:
Pages SettingTemplates

See also