Still looking for a sponsor Max Paulousky is looking for a Silverlight/.Net job in the Commonwealth

Share to Facebook Tweet this! Share to MySpace Share to Google Share to Live   Share via AddThis

Wizards. Prototype of sketching Wizard for WPF – 2

In the previous part of this article I described sketchflow map for the wizard prototype and started describing wizard screens. In this article I continue describing screens, animation and transition approaches.

Confirm options screen

 Sketching view of the Confirm Options screen

The Confirm Options screen allows to review all options a user has selected. A multi-line textbox is used for that purposes. The user can go back (by clicking the button ‘Previous’), start processing data (by clicking the button ‘Start’) and close the wizard (the button ‘Cancel’).

Progress screen

  Sketching view of the Progress screen

This screen displays progress of data processing. The ProgressBar control is used to display progress. Usually, this screen is designed to display progress and it does not allow going back or forward during the process. Moreover, when the operation is finished, a user can go forward only. That means, only one button is displayed and it is disabled till the end of the process. In some cases, wizards are implemented with no rights to stop the process.

No doubt, we have to use animation to display changing ProgressBar and text messages. See details below.

Finish screen

Sketching view of the Finish screen

This screen allows to see the result of the operation, whether it has been successful or not. Some wizards are implemented to start the operation again with different set of parameters. In that case, the Back button should bring a user back to the Select Options screen (there is no sense to go to the Welcome screen). So, the sketchflow map contains a link from the Finish screen to the Select Options screen. But it is not a common practice. Buttons Finish and Cancel should do the same – close the wizard.

Transition between screens

 Transition is a feature that can be used to add interactivity to a sketchflow application. For example, a user can navigate through screens by clicking buttons.

It is very easy to add a transition functionality to the application. A developer has to select a button, click right mouse button, select in the ‘Navigate to’ menu item and choose a screen he or she wants to navigate (see fig. below).

Creating transition between screens

Instead of particular screen, the developer can select Back or Forward options. Their behaviour is the same as Back and Forward buttons in browsers.


Animation allows creating more user-friendly prototype. For example, a progress bar will change its state, panels will move etc. A developer uses the same mechanism in a sketching application as he or she uses it in a real wpf/silverlight application – Storyboard.

To add an animation to the application, the Objects and Timeline tool tab should be opened (go to the Main Menu Window, check Objects and Timeline menu item).

Progress screen

Let’s create an animation for the Progress screen. First of all, a Storyboard should be created:

How to add a new storyboard

After that, the developer should change states of controls for specific time stamps. For example, just three controls will change their state – a label above a progress bar, the progress bar itself and the Next button. To create initial state for the controls, the developer should set a timeline to 0 and change properties of the controls.

The properties should be changed via the Properties tab only. Otherwise, the storyboard will not store values.

Initial values of controls on the Progress screen Final values of controls on the Progress screen

So, initial values of the controls are:

  • TextBlock.Text = “Saving Lynxes ...”;
  • ProgressBar.Value = 0;
  • Button.Visible = False;

Here are final values of the controls:

  • TextBlock.Text = “Saving Tasman Devils ...” (at 1 sec)
  • ProgressBar.Value = 100 (at 2.0 sec)
  • Button.Visible = True (at 2.1 sec)

That means, that in 1 second after starting animation, text block will be changed from Saving Lynxes ... to Saving Tasman Devils ...

In 2 seconds after starting animation, ProgressBar will finish its animation. By default, ProgressBar.Value will be changed according to the linear law. But the developer can change it and create own law. Just select the ProgressBar’s time stamp at 2 seconds and the keyspline will be shown on the Properties tab:

Custom law of the ProgressBar changing

Microsoft Expression Blend will generate following xaml code for the animation:

<Storyboard x:Key="Storyboard1">
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(RangeBase.Value)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeySpline="0.99,1,0.94,0" KeyTime="00:00:02" Value="100"/>
  <StringAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(TextBlock.Text)">
    <DiscreteStringKeyFrame KeyTime="00:00:00" Value="Saving Lynxes ..."/>
    <DiscreteStringKeyFrame KeyTime="00:00:01" Value="Saving Tasman Devils ..."/>
  <BooleanAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.IsEnabled)">
    <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False"/>
    <DiscreteBooleanKeyFrame KeyTime="00:00:02.1000000" Value="True"/>

Finish screen

Let’s implement fading effect when a user clicks the Cancel button on the Finish screen.

Initially, the developer should create a Trigger (Menu Window-Triggers, on the Triggers tab click ‘+ Trigger’, select ‘button’ as a control that should fire a event, select the event for the button – ‘Click’, add the action OnClick1-Begin that will start animation):

 Adding a new trigger to the Finish screen

Then the developer selects all controls on the Finish screen, sets duration of fading process (for example 0.6 sec) and sets Opacity to 0%:

Setting fading values for the controls on the Finish screen

As for animation of the ProgressBar, the developer can change the linear law of fading to own one if he or she wants.

Here is the xaml source code for the fading animation:

  <Storyboard x:Key="OnClick1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid1" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid2" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
  <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
    <BeginStoryboard Storyboard="{StaticResource OnClick1}"/>


Microsoft has developed great tool to create WPF/Silverlight prototypes. These prototypes has animation (to simulate state changing of controls) and transition features (to simulate navigation between screens). The tool allows creating additional controls based on standards ones and has big set of ready-to-use controls.

Expression Blend is a really rapid tool to create prototypes. For example, I spent about 6 hours on a WPF Sketchflow Wizard (7 screens, transition between screens, animation for several screens etc). Then I spent about a week to implement that Wizard from scratch using C#, Visual Studio and Blend.


The source code of the WPF Wizard Prototype is here (1.58 Mb).

The binaries of the WPF Wizard Prototype is here (327 Kb).

Hope, this helps,


This work is licensed under a Creative Commons Attribution By license.

Leave a Comment [ RSS ]

Comments have been closed on this topic.