Best way to implement a wizard style UI in WP7

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 :P ).

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.

Answer 2

My initial thought is to not do this and redesign the process. Without a greater understanding of your situation and app though, it is hard to advise appropriately.

If you're in a hurry and really must do this I'd recommend using a single page and updating the view model to create the appearance of multiple pages.

Alternatively you could use a series of pages and the Non-Linear Navigation Service.
This may have issues with how it integrates with the rest of the application though.

Answer 3

Have you tried using grids and toggling their visibility using a back and next button on the app bar? The back button would then act as a cancel button.