Silverlight wizard

This sample shows how we can use modal dialog to create a wizard in silverlight which helps user through a series of steps.
when the user goes through all the steps data is returned to the page

see a demo( you will have to click once on demo link and click again on the file, until I figure out a better way)

you specify the Content of the wizard using wizard steps, the following snippet shows how we create a wizard

<UserControl x:Class=”WizardApp.ModalPage”
    xmlns=”http://schemas.microsoft.com/client/2007“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    xmlns:local=”clr-namespace:WizardApp;assembly=WizardApp”
    Width=”400″ Height=”300″>
    <Border BorderBrush=”Beige” CornerRadius=”5″
            BorderThickness=”4″>
        <Grid x:Name=”LayoutRoot”
          Background=”AliceBlue”>
        <local:Wizard x:Name=”wz”
                       Margin=”5″>
            <local:Wizard.Steps>
            <local:WizardStep Header=”Personal”>
                    <Grid Margin=”10″>
                        <Grid.RowDefinitions>
                            <RowDefinition Height=”40″ />
                            <RowDefinition Height=”40″ />
                          
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width=”150″ />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text=”FirstName”
                                   Margin=”2″></TextBlock>
                        <TextBox Grid.Column=”1″
                                 Margin=”2″
                                 Text=”{Binding FirstName, Mode=TwoWay}”></TextBox>
                        <TextBlock Grid.Row=”1″
                                   Margin=”2″
                                   Grid.Column=”0″
                                   Text=”LastName”></TextBlock>
                        <TextBox Grid.Row=”1″
                                 Margin=”2″
                                 Grid.Column=”1″
                                 Text=”{Binding LastName, Mode=TwoWay}”></TextBox>
                      
                    </Grid>
                </local:WizardStep>
            …
          </local:Wizard.Steps>
        </local:Wizard>
    </Grid>
        </Border>
</UserControl>

In the sample we click the button to start the wizard

When the wizard opens first step if selected and content of the first step is displayed

we navigate between the steps using previous and next buttons and click finish in the last step

The Wizard step headers will be placed in a custom panel which spaces the headers of the steps to fill the width of the wizard

The data entered by the user in the wizard will be shown in the page

What this sample doesnt have

It doesnt do any validations
It doesnt have any styles
I did not add code to display the steps vertically
Wizard doesn’t have cancel button, to cancel the wizard and all the other user friendly features

You can download the sample
here