Best way to implement wizard style user interface in WP7

Question

I am migrating Windows Forms to Windows Phone 7.

Part of the window program is a series of wizard steps with Next and Prev steps along with Save and Cancel. The screen is generated from metadata stored in the 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 support rod, but then I read Tim Heyer's guide to Panaroma vs Pivot , where he specifically states: "Do not use pivot / pano for a wizard-based user interface.

I have a number of ideas - I can make each screen a page (not too keen on this because of problems with the back stack), or I could use one page using the tab control - but I am against this wise time and I can’t allow lose days guiding the wrong way.

Any ideas? My WP7 application is built using MVVM through Caliburn Micro.

Answer 1

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

Non-linear navigation The service can help you with the back button.

I could use one page with a tab control

I made one magic application in WPF using Restyled Tab control. It was a bit dirty, works well.

You need to first design it and consider several scenarios. What happens when a user clicks the back button, starts a button, or does someone call the user? (when the application is under the tombstone, and the user presses the back button, the OS returns the last page). Is navigation very complex (decision tree)?

Make only one page with a grid with three grids / stack inside. Place them horizontally with margins 0; 480; 960. Only one internal grid can be displayed at this time. You can see an example here (I made jokes for friends: P).

I used stack panels with compound transform.

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

with 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 the user clicks the button, the 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 the animation gives a good UX. For a more complex wizard, consider creating your own UserControl.

Answer 2

My initial thought is not to do this and reverse engineer the process. Without a better understanding of your situation and application, however, it is difficult to give appropriate recommendations.

If you are in a hurry and really need to do this, I would recommend using a single page and updating the presentation model to create the look of multiple pages.

Alternatively, you can use a series of pages and a non-linear navigation service .
This may have problems with how it integrates with the rest of the application.

Answer 3

Have you tried to use grids and switched their visibility using the "Back" and "Next" buttons in the application panel? Then the back button will act as a cancel button.