Click here to Skip to main content
Click here to Skip to main content

A Generalised WPF Wizard / Procedure Dialog

, 22 Mar 2008
Rate this:
Please Sign up or sign in to vote.
An article presenting ProceedureDialog.dll, a custom control for creating wizard style interfaces / procedure dialogs

Proceedure Dialog Sample

Introduction

This article introduces ProceedureDialog.dll which is a control library to allow creations of consistent vista-styled wizard interfaces.

Background

"A wizard is a user interface element where the user is led through a sequence of dialogs. Unlike most modern user interface paradigms, the user is forced to perform the task in a specific sequence. However, for complex or infrequently performed tasks where the user is unfamiliar with the steps involved, it may make it easier for them to perform the task." --- Wikipedia Wizard (software).

"Wizards were controversial among user interface designers when they first gained widespread use, because they encourage modal windows, which some consider[weasel words] antithetical to proper human interface design. Supporters of the wizard paradigm argue that compliance with what they consider to be arbitrary laws should be secondary to ease of use in interface design." --- Wikipedia Wizard (software).

Despite some controversy wizards are still a significant component in the software engineers toolkit; even Microsoft uses wizards, e.g. Add Hardware Wizard.

Add Hardware Wizard

The wizard presented herein does not entirely fall into the category as defined by Wikipedia; rather than forcing the user through a specific sequence the interface allows non-linearity wherever possible (i.e. prior to processing the task), instead using the control box paradeim from Microsoft Windows Vista, as below. For this reason this control is defined as a procedure dialog.

Control Panel Layout

Procedure Dialog Stages

Introduction

Purpose: to introduce the user to the wizard, state the purpose of the wizard, and optionally state information about the wizards start-up.

This wizard's pages are dynamically loaded from various Dynamic Link Libraries (dlls), and so the loaded components are shown.

Proceedure Dialog Sample - Introduction

Configuration

Purpose: to allow various options of the task to be set.

This options shown on the left pane only refer to loaded components with associated option panels, rather than all loaded configuration panels. Note that the user can flick between configuration pages (and the introduction or confirmation) in not only a linear way via the next and back buttons, but also in a non-linear way via the index on the left panel.

Proceedure Dialog Sample - Configuration

Confirmation

Purpose: to confirm the configuration options chosen.

A brief summary of the chosen options is shown. Before the user can proceed to the next stage via the process button, a dialog is shown as a final confirmation; this is important as many dialogs (such as the example shown in the figures) perform destructive work as part of their processing, i.e. remove data that may not be recoverable.

Proceedure Dialog Sample - Confirmation

Progress

Purpose: to display the status of the executing task.

This page shows the status of the task, and in cases with many sub-tasks it may be relevant to show a progress bar indicating the sub-task name and progress. Pressing the close button at this stage displays a confirmation of close dialog, and assuming Ok or Yes is selected attempts to kill the task. The status of the abort task is shown in a dialog as below. Note that not all tasks can abort (to prevent data corruption) therefore the software may abort the halt procedure, and the dialog will inform the user of this scenario.

Proceedure Dialog Sample - Progress

Proceedure Dialog Sample - Cancel Task

Results

Purpose: to inform the user of the results of the task, whether good or bad (or interesting?).

Proceedure Dialog Sample - Results

Using the code

Creating a procedure dialog is a simple case of calling the constructor with the relevant variables and calling show.

//public ProceedureDialog(String title, IProceedureComponent introductionComponent, 
//                                        List<IProceedureComponent> configurationComponents,
//                                        IProceedureComponent confirmationComponent, 
//                                        IProceedureProcessComponent progressComponent, 
//                                        IProceedureComponent resultsComponent) {...}

ProceedureDialog d = new ProceedureDialog(title, introductionComponent, 
                                                   configurationComponents,
                                                   confirmationComponent, 
                                                   progressComponent, 
                                                   resultsComponent);
d.Show();            

Introduction, Confirmation, and Results Pages

The component should extend UIElement, typically UserControl, and must implement IProceedureComponent.

IProceedureComponent requires one property KeyText which should return the name of the component on the left index; typically for the introduction this would be Introduction, configuration as Configuration, and results as Results.

Configuration Pages

The configuration pages are similar to that of introduction (et. al.), however are passed as a list, List<IProceedureComponent> to ProceedureDialogs constructor, due to the potential need for more than one configuration page. Unlike introduction (et. al.) though KeyText is unlikely to return Configuration but rather some descriptive name of the options it is referring too (see above, Configuration). Care must be taken when using non-standard names that the name is sufficiently short so that its key stays within the bounds of the index.

Progress Page

The production of the progress is more complex, requiring not only implementation of IProceedureComponent, but also IProceedureProcessComponent. As before the component must also extend at a minimum UIElement.

The void startProceedure() method is called by the procedure dialog once the confirmation page's process button has been clicked and the popup message box confirmation has been agreed. In the void startProceedure() method typically a new thread to process the task is started; the task must not be completed on the thread calling startProceedure() unless the task is trivially small, or the application will appear to hang and Windows will report it as non-responsive.

The bool cancelProceedure() method is called either when the user attempts to close the procedure dialog window (and agrees to cancel the task) or clicks the cancel button (and again agrees to cancel the task). The cancelProceedure() method may keep the executing thread delayed as it is not called from the event dispatch thread (and in fact the demo's progress page implementation calls Thread.Sleep(2000) within cancelProceedure without any effect on application responsiveness.

The List <ProceedureCompleteDelegate> ProceedureCompleteDelegates property allows the proceedure dialog to attach to the running task so that when the task is complete it may enable the next button allowing the user to progress to the results page. This will be changed in a future version to a proper event handler signature.

Known Bugs

  • ProceedureDialog is misspelled, ProcedureDialog.

Points of Interest

Please note that this was my first real Windows Presentation Foundation application, and as such the design may be a little of in place. In particular this library shows why perhaps variable window transparency is not such a good idea. There are no set included methods for restyling the control, therefore some modification of the code may be required.

Why doesn't Microsoft Visual Studio include a spell checker?

History

1.0.0.0 --- Initial build

Additional Licensing Notes

Please feel free to use this in your work, however please be aware that a modified The Code Project Open License (CPOL) is in use; basically it is the same as the standard license except that this code must not be used for commercial or not-for-profit commercial use without prior authorisation. Please see license.txt or license.pdf in the included source and demo files.

License

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

About the Author

Derek Bartram
Software Developer Rail Research UK
United Kingdom United Kingdom
I originally studied for a masters in engineering of software engineering at The University of Birmingham during 2000-2004, of which I received a 2:1. I continued at Birmingham University working with Civil Engineering and Rail Research UK where I am currently in my final year of a 3 year PhD project developing a Computational Intelligent Approach to Railway Intervention Planning. Although my work has a significant focus on railway engineering and associated practices much of my work is with data mining (on SQL Server 2008) and computational intelligence (CI) techniques. My key areas of expertise in CI are clustering algorithms (including Rival Penalised Competitive Learning) and evolutionary algorithms.
 
Outside of my formal work I enjoy testing the latest technologies such as .NET 3.5 and the many frameworks of which it comprises (mainly WPF). I have several projects on the go including a .NET and DirectX port of Quake 3 and many utility libraries. I also maintain an extensive website coded in Cold Fusion which is regularly updated; more information is available about me there.

Comments and Discussions

 
GeneralMy vote of 1 PinmemberPaul Scholz1-May-14 4:45 
GeneralRe: My vote of 1 PinmemberDerek Bartram4-May-14 1:45 
QuestionMy vote of 1 for the license PinmemberPaul Scholz1-May-14 4:44 
AnswerRe: My vote of 1 for the license Pinmemberderek_bartram12-May-14 0:47 
GeneralMy vote of 1 Pinmembermesta16-Jan-13 2:49 
GeneralRe: My vote of 1 PinmemberDerek Bartram4-May-14 1:46 
GeneralRe: My vote of 1 Pinmembermesta7-May-14 21:21 
GeneralRe: My vote of 1 Pinmemberderek_bartram12-May-14 0:46 
GeneralMy vote of 1 PinmemberVinolarium13-Nov-12 8:49 
GeneralRe: My vote of 1 PinmemberDerek Bartram3-Apr-13 12:43 
GeneralLicense - Web page indicates a different license than the included text and pdf files Pinmemberdavid union20-Sep-10 12:52 
GeneralRe: License - Web page indicates a different license than the included text and pdf files PinmemberDerek Bartram4-May-14 1:49 
GeneralVisual Studio 2008 Spell Checker. Pinmemberubik28-Jan-09 21:10 
GeneralRe: Visual Studio 2008 Spell Checker. PinmemberDerek Bartram28-Jan-09 23:28 
GeneralRe: Visual Studio 2008 Spell Checker. Pinmembermejax29-Jan-09 5:52 
GeneralRe: Visual Studio 2008 Spell Checker. PinmemberDerek Bartram29-Jan-09 23:56 
GeneralRe: Visual Studio 2008 Spell Checker. Pinmemberedevri3-Feb-09 13:18 
GeneralRe: Visual Studio 2008 Spell Checker. Pinmemberbooler23-Feb-09 0:19 
GeneralRe: Visual Studio 2008 Spell Checker. PinmemberAntoine3-Sep-09 2:49 
GeneralRe: Visual Studio 2008 Spell Checker. PinmemberGreg Finzer11-Dec-09 5:36 
Generalconverting a wpf appplication to dll Pinmemberchosuenzaid041112-Sep-08 0:21 
GeneralRe: converting a wpf appplication to dll PinmemberDerek Bartram12-Sep-08 2:38 
GeneralExcellent article Pinmember Dr.Luiji 1-Feb-08 2:05 
GeneralRe: Excellent article PinmemberDerek Bartram4-Feb-08 13:46 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 22 Mar 2008
Article Copyright 2008 by Derek Bartram
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid