Question

I’m porting a windows forms program to run on Windows Phone 7.

Part of the windows program is a wizard style series of steps with Next and Prev buttons along with Save and Cancel. The screens are generates from metadata stored in a database. Some screens are optional and are only created after certain conditions are met.

My question is – how is this best implemented in WP7?

My initial idea was to use a pivot but then I read Tim Heuer’s guide to Panaroma vs Pivot where he specifically states “don’t use pivot/pano for wizard-based UI”.

I have a number of ideas – I could make each screen a page (not too keen on this due to back stack issues) or I could use one page with a tab control – but am up against it time wise and can’t afford to waste days heading the wrong way.

Any ideas? My WP7 app is being built using MVVM via Caliburn Micro.

Answer 1

I could make each screen a page (not too keen on this due to back stack issues)

The Nonlinear Navigation Service may help you with the back button.

I could use one page with a tab control

I did one wizard-like app in WPF using restyled Tab control. Was a bit messy, works well though.

You need to design it first and consider a few scenarios. What happen when user clicks the back button, starts button or someone calls the user? (when app is tombstoned and user presses back button OS brings back the last page). Is the navigation very complex (decision tree)?

Make just one page with a grid with 3 grids/stack panels inside. Place them horizontally with margins 0; 480; 960. The only one internal grid can be shown at the time. You can see an example here (I made a joke for friends 😛 ).

I have used stack panels with composite transform.

        <StackPanel Name="questionPanel" Grid.Row="0" HorizontalAlignment="Center">
            <StackPanel.RenderTransform>
             <CompositeTransform TranslateX="480"></CompositeTransform>
            </StackPanel.RenderTransform>

with an animation

<UserControl.Resources>

    <Storyboard x:Name="centerPanelIn">
        <DoubleAnimation Duration="0:0:0.3" BeginTime="0:0:0.6" To="0"
                         Storyboard.TargetName="centerPanel"
                         Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
            <DoubleAnimation.EasingFunction>
                <ExponentialEase Exponent="6.0" EasingMode="EaseOut"></ExponentialEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

When user presses the button, Completed event is added.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        centerPanelOut.Begin();
        centerPanelOut.Completed += new EventHandler(centerPanelOut_Completed);
    }

This approach has an advantage, because everything is on one page and animations give the nice UX. For more complex wizard consider making you own UserControl.