A Generalised WPF Wizard / Procedure Dialog

• Download wizarddialog_demo - 215.66 KB
• Download wizarddialog_src - 222.84 KB

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.

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.

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.

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.

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.

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.

Results

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

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.