This example demonstrates how to define a collection of wizard pages in the View Model and display them in the Wizard Control.
- Bind the
ItemsSource
property to the View Model collection that contains pages. - Assign the page content template to the
ItemTemplate
property. - Define page settings in the
Style
objects and create aStyleSelector
descendant that returns one of these objects based on the page type. Assign the selector to theItemContainerStyleSelector
property.
Files to Review
- ViewModel.cs (VB: ViewModel.vb)
- MainWindow.xaml (VB: MainWindow.xaml)
- PageStyleSelector.cs (VB: PageStyleSelector.vb)
Documentation
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
C#using System.Collections.ObjectModel;
namespace DXSample {
public class MainViewModel {
public ObservableCollection<PageViewModel> Pages { get; set; }
public MainViewModel() {
Pages = new ObservableCollection<PageViewModel>() {
new PageViewModel() { Text = "Welcome Page", Type = PageType.Welcome },
new PageViewModel() { Text = "Common Page", Type = PageType.Common },
new PageViewModel() { Text = "Completion Page", Type = PageType.Completion },
};
}
}
public enum PageType { Welcome, Common, Completion }
public class PageViewModel {
public string Text { get; set; }
public PageType Type { get; set; }
}
}
XAML<Window x:Class="DXSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:dxco="http://schemas.devexpress.com/winfx/2008/xaml/controls"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DXSample"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="pageContentTemlate">
<TextBlock Text="{Binding Text}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DataTemplate>
<local:PageStyleSelector x:Key="pageStyleSelector">
<local:PageStyleSelector.WelcomePageStyle>
<Style TargetType="dxco:WizardPage">
<Setter Property="ShowBack" Value="False"/>
<Setter Property="Header" Value="Header"/>
<Setter Property="HeaderBackground" Value="AliceBlue"/>
<Setter Property="ShowSideContent" Value="True"/>
<Setter Property="SideContent" Value="Side content"/>
<Setter Property="SideContentTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="Cornsilk">
<TextBlock Text="{Binding}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</local:PageStyleSelector.WelcomePageStyle>
<local:PageStyleSelector.CommonPageStyle>
<Style TargetType="dxco:WizardPage">
<Setter Property="Header" Value="{x:Null}"/>
<Setter Property="ShowFinish" Value="False"/>
</Style>
</local:PageStyleSelector.CommonPageStyle>
<local:PageStyleSelector.CompletionPageStyle>
<Style TargetType="dxco:WizardPage">
<Setter Property="Header" Value="{x:Null}"/>
<Setter Property="ShowBack" Value="False"/>
<Setter Property="ShowNext" Value="False"/>
<Setter Property="ShowFinish" Value="True"/>
<Setter Property="AllowFinish" Value="True"/>
</Style>
</local:PageStyleSelector.CompletionPageStyle>
</local:PageStyleSelector>
</Window.Resources>
<Grid>
<dxco:Wizard ItemsSource="{Binding Pages}"
ItemTemplate="{StaticResource pageContentTemlate}"
ItemContainerStyleSelector="{StaticResource pageStyleSelector}"/>
</Grid>
</Window>
C#using System.Windows;
using System.Windows.Controls;
namespace DXSample {
public class PageStyleSelector : StyleSelector {
public Style WelcomePageStyle { get; set; }
public Style CommonPageStyle { get; set; }
public Style CompletionPageStyle { get; set; }
public override Style SelectStyle(object item, DependencyObject container) {
if (!(item is PageViewModel)) return null;
var vm = item as PageViewModel;
switch (vm.Type) {
case PageType.Welcome:
return WelcomePageStyle;
case PageType.Common:
return CommonPageStyle;
case PageType.Completion:
return CompletionPageStyle;
}
return base.SelectStyle(item, container);
}
}
}