Pages

• Apr 01, 2021
• 3 minutes to read

This document describes common page concepts, as well as features that are specific to pages of individual types only.

Page Area

Before you start learning about page types and features, take a look at what a page is and what area it occupies. At runtime, end-users cycle through wizard windows, which are not the same as wizard pages. A window consists of a wizard page, plus a bottom area where navigation buttons sit (see the figure below).

Although navigation buttons are certainly related to the currently displayed page, technically they belong to the wizard itself, and their parent region can be customized by using the Wizard.FooterTemplate property. To learn more about navigation buttons, refer to this article.

Populating Wizard

To populate a Wizard with pages, add them between start and end Wizard tags at XAML mark-up, or modify the Items collection in code (see below).

• XAML
• C#
• VB.NET

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxco="http://schemas.devexpress.com/winfx/2008/xaml/controls"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxco:Wizard x:Name="wizard">
            <dxco:WelcomeWizardPage Title="Start Page" Header="This is the first page">
                Start Page
            </dxco:WelcomeWizardPage>
            <dxco:WizardPage Title="Regular Page" Header="This is the second page">
                Regular page
            </dxco:WizardPage>
            <dxco:CompletionWizardPage Title="Completion Page" Header="This is the last page">
                Completion Page
            </dxco:CompletionWizardPage>
        </dxco:Wizard>
    </Grid>
</Window>

wizard.Items.Add(new CompletionWizardPage() { Title="Last Page", Content="This page is added from code"});

Dim lastPage As CompletionWizardPage = New CompletionWizardPage()
lastPage.Title = "Last Page"
lastPage.Content = "This page is added from code"
wizard.Items.Add(lastPage)

At design time you can click the ellipsis button next to the Wizard’s Items property in Visual Studio’s property grid. This will invoke the Collection Editor dialog that allows you to add, modify, re-arrange or remove pages.

For MVVM-based applications use the ItemSource property to populate the Wizard from an external object that stores Wizard pages.

Page Types

The wizard provides three types of pages – a welcome page, regular page and completion page. These are objects of the WelcomeWizardPage, WizardPage and CompletionWizardPage classes respectively. The WizardPage class serves as a base class for welcome and completion pages.

The figure below illustrates the three regions that every page consists of – the header, side content and main page content regions.

• Header Region. Displays the page title (a text string assigned to the WizardPage.Title property) and header (an object assigned to the Header property). To apply a custom template for this region, use the HeaderTemplate and HeaderTemplateSelector properties of the current page.
• Side Content Region. A rectangular area docked to the page’s left. Displays content assigned to the page’s WizardPage.SideContent property. This region is templated by using the WizardPage.SideContentTemplate and WizardPage.SideContentTemplateSelector properties. By default, only welcome and completion pages display their side contents. To enable this area for a regular page, set the page WizardPage.ShowSideContent property to true.
• Content Region. A central page area that displays main page content. The ContentTemplate and ContentTemplateSelector properties specify a template applied to this region.

Pages of different types diverge in default Show… property values (there are four boolean Show… properties that specify whether the related navigation button should be displayed). This causes a Wizard to display different navigation buttons for different pages.

• Next and Cancel buttons for welcome pages
• Next, Cancel and Back buttons for regular pages
• Back, Cancel and Finish for completion pages

Apart from side content region visibility and navigation button presets, pages of all three types are identical. It is also important to note that the wizard does not require a strict welcome-regular-completion page order. You can create any page sequence you want.

See Also

Buttons