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

ws1.jpg

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

ws2.jpg

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

ws3.jpg

ws4.jpg

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

ws5.jpg

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s