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.

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

Preserve WizardPage content

By default, RadWizard reuses a single ContentPresenter for holding the currently selected page. Each time the selection is changed, the content of the last active page is unloaded in order to load the content of the newly selected page, thus the content of the pages is not persisted.

As of Q3 2015 RadWizard exposes a new property - IsContentPreserved. Its default value is "False", meaning that the content of the selected pages would not be persisted. In order to save the content of each page, you need to set the property to "True".

Example 2: Setting IsContentPreserved property to "True"

<telerik:RadWizard x:Name="radWizard" IsContentPreserved="True">
    <telerik:RadWizard.WizardPages>
        <telerik:WizardPage Content="My First Wizard Page Content" />
        <telerik:WizardPage Content="My Second Wizard Page Content" />
    </telerik:RadWizard.WizardPages>
</telerik:RadWizard>

See also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy