Click here to Skip to main content
15,867,895 members
Articles / Desktop Programming / WPF
Article

Silverlight Wizard

Rate me:
Please Sign up or sign in to vote.
4.33/5 (8 votes)
26 Sep 2008CPOL4 min read 52.9K   886   29   7
Describes how to create an MFC like Wizard (Property sheet with Property Pages) control.

Introduction

This article aims to show how a multi-step procedure for collecting user input could be implemented in Silvelight 2.0 Beta.

Background

In developing business applications, you soon realise that users need simple and self-guiding UIs in order to complete even really simple tasks. When a multitude of fields must be completed and not all of that can fit in a single form/window, we are forced to split those by some sort of criteria and place them in different forms. Sometimes, some of the input will effect the choices available for other fields, so those fields are pushed further down the UI. MFC has the classes CPropertySheet and CPropertyPage to aid in resolving such issues. Combining those two classes, we could create a modal window with a set of buttons that allows users to flip through pages of input field, and we would put the dependent fields in pages that are further away.

Silverlight does not provide such a feature, and nor do the .NET standard libraries. I will shortly describe how to do just that.

Here is how my implementation looks like, with some extra demo UI added for completeness:

image1.png

How it works

The main player is the Wizard (UserControl); it lays out the familiar UI for the user, with two buttons at the right bottom, a title bar, and a pages area. This is achieved using a grid with 3X3 cells. The middle cell 1,1 is reserved for pages. This cell is assigned a SwitcherControl (UserControl) that has no UI content of its own. The SwitchPage(UserControl oControl) function is used to switch pages on the SwitcherControl.

The Wizard class is added a Pages attached property that enables us to bind to it and to also add pages through XAML.

Whenever one of the two buttons is clicked, the wizard fires a predefined PageEvent that enables the host page to monitor wizard activity. The WizardEventArgs passes the current page index, the new page index, button action (previous, next, and finish) and an optional Cancel property. This event is fired before the page is changed; setting the Cancel property to true will stop the intended transition.

I have tried to encapsulate as much functionality as necessary to demonstrate the point in the Wizard class while following the OO design paradigm, and as little as not to clutter it too much with unnecessary code.

In this project, I have decided to involve as much of Binding as possible, as it makes the implementation cleaner and easier to follow.

Functionality provided by the Wizard class

  • Setting the wizard title.
  • Switching between pages available.
  • Previous button is disabled when showing the first page.
  • Next button is changed to Finish when on the last page.
  • A PageEvent is fired after every button (previous, next, and finish) click.
  • WizardEventArgs class contains the
    • current pages index,
    • the index of the page intending to move to,
    • the action taken (previous, next, and finish),
    • the option to cancel the switch.

Useful features to add

We could also easily add the following;

  • Property to get/set the current page.
  • In the PageEvent, an option to specify a page to go to instead of the one in the sequence.
  • Properties to specify other visual aspects of the wizard.
  • Making the wizard into a modal popup window - that is shown on my article: Modal window in Silverlight.

Using the code

Start by creating your own page (MainPage); import the wizard namespace in XAML. In the code below, I have alias-ed the namespace as "sl". Within the section/container you wish to place the wizard, add the following XAML;

XML
<sl:Wizard x:Name="ctrlWizard" Title="Test Wizard" Grid.Row="0"  />

The code above specifies that we are placing the wizard in grid row 0; we have given it an instance name of "ctrlWizard", and we have set the title property to "Test Wizard".

Adding three pages to the wizard through XAML is shown below:

XML
<sl:Wizard x:Name="ctrlWizard" Title="Test Wizard" Grid.Row="0"  >
    <sl:Wizard.Pages>
      <sl:WizardPage1 x:Name="Page1" />
      <sl:WizardPage2 x:Name="Page2" />
      <sl:WizardPage3 x:Name="Page3" />
    </sl:Wizard.Pages>
</sl:Wizard>

We can do the same in code; e.g., in the in Loaded event of the MainPage.

C#
ctrlWizard.Pages.Add(new WizardPage1());
ctrlWizard.Pages.Add(new WizardPage2());
ctrlWizard.Pages.Add(new WizardPage3());

Below is the implementation of the PageEvent handler:

C#
void OnPageEvent(Wizard sender, WizardEventArgs e)
{
     _txtMsg.Text = string.Format("Action: {0}, Current: {1}, New: {2}", 
    e.Action, e.CurrentPageIndex, e.NewPageIndex);
}

Points of interest

  • Wizard pages can be any control derived from UserControl. Pages are completely oblivious to how they are used.
  • The Wizard class is just as much oblivious to what pages/controls are shown and their purpose.

License

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


Written By
Team Leader
United Kingdom United Kingdom
C, BASIC on XT 8086,
C++, Perl, Java, HTML, SQL
.
.
.
MCTS - Web Applications
MCTS - Windows Forms Applications
MCTS - Distributed Applications
MCPD - Enterprise Systems
.
WCF
WPF
Silverlight
Javascript
JQuery


ebuzoku@hotmail.com


Comments and Discussions

 
GeneralMy vote of 1 Pin
Nirmal8416-Apr-10 1:50
Nirmal8416-Apr-10 1:50 
GeneralUser Control Validation Pin
olexij11-Jan-10 7:25
olexij11-Jan-10 7:25 
GeneralRe: User Control Validation Pin
olexij11-Jan-10 8:25
olexij11-Jan-10 8:25 
QuestionUserControl Validation Pin
mwieder16-Dec-08 4:13
mwieder16-Dec-08 4:13 
GeneralGood stuff! Pin
StevieGen3-Nov-08 7:10
StevieGen3-Nov-08 7:10 
GeneralRe: Good stuff! Pin
StevieGen3-Nov-08 7:19
StevieGen3-Nov-08 7:19 
GeneralRe: Good stuff! Pin
Enver Buzoku3-Nov-08 22:15
Enver Buzoku3-Nov-08 22:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.