Introduction

So I decided to make my contribution to the community. It's time to give something back.

Why do we need yet another wizard control sample, you might ask. My opinion on that is that there's never enough samples on any specific matter.

Background

This control uses VS.NET designers to give you a native support in the IDE. You can add pages to the wizard in the same way you add pages to a tab control. You can place additional controls on the wizard pages.

The control provides run-time events for controlling page navigation. I provided a sample application, with code, to demonstrate this.

The layout of the pages is based on the Wizard 97 Specification from MSDN, particularly on Graphic Design for Wizard Art for welcome and completion pages and interior pages also.

Using the control

Start by creating a new Windows Forms application.

Change the form's name to SampleWizard. Also make the following settings:

Add a reference to the compiled Controls.dll assembly. The control should appear in the toolbox now:

If you double click on the item in the toolbox, an empty wizard will appear on the form:

I set the default docking style of the wizard control to DockingStyle.Fill because usually there is nothing else on a Wizard dialog than the wizard itself.

Notice that the wizard properties appear in the property grid grouped under the Wizard category.

There are not many properties. This is just a sample control. You can extend it in any way you like, or you may suggest new functionality to me and I just could add those properties in the future.

To add pages to the wizard, you need to click on the Pages properties ellipsis button. The WizardPage Collection Editor appears.

Here I added the first page and set its style properties to WizardPageStyle.Welcome.

There possible values for the wizard page's Style properties are:

WizardPageStyle.Standard // Standard interior wizard page// with a white banner at the top.
WizardPageStyle.Welcome // Welcome wizard page with white background// and large logo on the left.
WizardPageStyle.Finish // Finish wizard page with white background,// a large logo on the left and OK button.
WizardPageStyle.Custom // Blank wizard page that you can// customize any way you like.

There are also two properties used to specify the title and description of each page. The page draws these texts at the right location depending on the page style. Note that a Custom page does not draw its texts, you are responsible for drawing them or you may not set them at all.

To set the images that appear on the page you need to go on the wizard itself. Here is an example using the pictures I provided with this sample:

I chose to implement the images properties at the main control level to provide a consistent look to the wizard pages. If you want each page to have its own images you may change this implementation.

The welcome page should look now like this screenshot:

Adding and setting the other pages is pretty straightforward.

You can use the control in the same way you use a Tab control. You add pages to the Pages collection and then you place additional controls on the wizard page, just like on a TabPage.

The coolest thing is that you can switch wizard pages at design time by clicking on the Back and Next buttons.

Using the code

Here are some sample code bits of handling the wizard control's events to provide the user with validation and more interaction:

The above code simply displays a notification when the user presses the Help button.

Credits

I need to mention that the code is based on Al Gardner's article on wizards: Designer centric Wizard control from which I took the design-time clicking functionality. I simplified the design of the component using less classes. Everything else is pretty much built from scratch.

History

September 5th 2005. Minor corrections.

August 12th 2005. Overrode NewIndex on BeforeSwitchPagesEventArgs to allow page skipping and provided a new sample page to be skipped.

July 2nd 2005. Fixed some behaviour and added Help button.

June 24th 2005. Initial release.

License

This article, along with any associated source code and files, is licensed under The MIT License

Comments and Discussions

You're right about this.
I choose a simpler model.
This is just a sample.

The code will work with MVC if you change the event model
so that each page will fire it's own events.
My framework doesn't give the page a view (from MVC) status.
I preffer validating on a centralized location; it helps when doing mentenance.

You can use the control in the same way you use a TabControl.
You add pages the the Pages collection and then you place additional controls on the wizard page, just like on a TabPage.
It's pretty simple.

So I was thinking that the difference between this and a tab control was that you can select the tab control's tab to show the other pages. Where as there was nothing on a per page basis that is visible to allow it to be selected. Each page is lined up on top of each other and could not be selected.

I missed the obvious, the Next and Back button actually worked in Design mode. Sweet.... Great job.

Perhaps you want to be explicit about this in your article for the thick people like me looking looking for something more complicated.