Click here to Skip to main content
15,891,253 members
Articles / Mobile Apps / Windows Phone 7

Implementing Wizard Functionality for Windows Phone 7 Applications

Rate me:
Please Sign up or sign in to vote.
4.88/5 (12 votes)
5 Aug 2011CPOL23 min read 38.7K   683   17  
This article presents how to build a wizard for WP7 applications.
<Application 
    x:Class="MVVMSample1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:loc="clr-namespace:MVVMSample1"
    xmlns:v="clr-namespace:MVVMSample1.View"
    xmlns:conv="clr-namespace:MVVMSample1.Converters"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"
    >

    <!--Application Resources-->
    <Application.Resources>
        <loc:ViewModelLocator x:Key="Locator"/>
        <conv:StepTitleConverter x:Key="conv2"/>
        <conv:Bool2VisibilityConverter x:Key="conv" FalseVisibility="Collapsed"/>
        <DataTemplate x:Key="AdvancedWizard">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Path=Title}" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
                <v:DynamicContentControl Content="{Binding Path=CurrentStep}"
                                     VerticalContentAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch" Grid.Row="1"/>
                <StackPanel Orientation="Horizontal" Grid.Row="2" HorizontalAlignment="Center">
                    <Button Content="Previous" Visibility="{Binding Path=CanPrevious, Converter={StaticResource conv}}" >
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding PreviousCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                    <Button Content="Next" Visibility="{Binding Path=CanNext, Converter={StaticResource conv}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding NextCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                    <Button Content="Finish" Visibility="{Binding Path=CanFinish, Converter={StaticResource conv}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding FinishCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                    <Button Content="Cancel" Visibility="{Binding Path=CanCancel, Converter={StaticResource conv}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding CancelCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="DerivedWizard">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Path=Title}" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
                <v:DynamicContentControl Content="{Binding Path=CurrentStep}"
                                     VerticalContentAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch" Grid.Row="1"/>
                <StackPanel Orientation="Horizontal" Grid.Row="2" HorizontalAlignment="Center">
                    <Button Content="Previous" Visibility="{Binding Path=CanPrevious, Converter={StaticResource conv}}" >
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding PreviousCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                    <Button Content="Next" Visibility="{Binding Path=CanNext, Converter={StaticResource conv}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding NextCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                    <Button Content="Finish" Visibility="{Binding Path=CanFinish, Converter={StaticResource conv}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding FinishCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                    <Button Content="Cancel" Visibility="{Binding Path=CanCancel, Converter={StaticResource conv}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding CancelCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="FirstPageViewModel">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="First Name" VerticalAlignment="Center"/>
                <TextBlock Text="Last Name" Grid.Row="1" VerticalAlignment="Center"/>
                <TextBox Text="{Binding FirstName, Mode=TwoWay}"
                         Grid.Column="1"/>
                <TextBox Text="{Binding LastName, Mode=TwoWay}"
                         Grid.Column="1" Grid.Row="1"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SecondPageViewModel">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Email" VerticalAlignment="Center"/>
                <TextBlock Text="Address" Grid.Row="1" Grid.ColumnSpan="2"/>
                <TextBox Text="{Binding Email, Mode=TwoWay}"
                         Grid.Column="1"/>
                <Grid Grid.Row="2" Grid.ColumnSpan="2">
                    <v:DynamicContentControl Content="{Binding Address}"
                                             VerticalContentAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch"/>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="AddressViewModel">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Street" Grid.Row="0" VerticalAlignment="Center"/>
                <TextBlock Text="City" Grid.Row="1" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Path=Street, Mode=TwoWay}"
                         Grid.Column="1" Grid.Row="0"/>
                <TextBox Text="{Binding Path=City, Mode=TwoWay}"
                         Grid.Column="1" Grid.Row="1"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ThirdPageViewModel">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Biography"/>
                <ScrollViewer Grid.Row="1">
                    <TextBox Text="{Binding Biography, Mode=TwoWay}"
                             TextWrapping="Wrap" VerticalAlignment="Stretch" />
                </ScrollViewer>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="WizardStep">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Converter={StaticResource conv2}}" Style="{StaticResource PhoneTextTitle2Style}"/>
                <v:DynamicContentControl Content="{Binding Content}" Margin="5,20,0,5" Grid.Row="1"
                                     VerticalContentAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch"/>
            </Grid>
        </DataTemplate>
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Romania Romania
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions