Create wizard user-interfaces in your apps easily with the ShellObjects.Net Wizard Control

Introduction

The Wizard control in ShellObjects allows you to quickly create user interfaces in the wizard format. A wizard presents a long information gathering procedure in the form a series of simple UI pages. Each page may display information to the user and may gathers data or choices from the user. Each page also displays a Back, Next and Finish button to allows the user to navigate through the wizard. Additionally, Help and Cancel buttons are also displayed.

The Wizard control features full design time support allowing you to design the UI of each page of the wizard completely at design time just like you would design a form. The wizard control allows adding/removing pages at design-time, changing page properties, reordering pages and each page can be completely designed in the designer itself.

Wizard Basics

A Wizard consists of a series of pages. Each step of the wizard shows a specific page from its collection of pages along with the Back, Next, Finish, Cancel and Help buttons for navigation.

Page types

A wizard page can be a Welcome page,an Inner page or a Finish page. Depending on its page type and its position in the page collection, the wizard shows/hides and enables/disables the wizard buttons when the page is displayed. A wizard typically consists of a Welcome page, one or more Inner pages, and one or more Finish pages.

Creating and designing a basic wizard at design-time

• Select the wizard control from the toolbox and place it on the form. The wizard control automatically fills the entire form using DockStyle.Fill.
  
• The next step is to add some pages to the wizard. First add a Welcome page to the wizard by right-clicking the wizard and selecting the 'Add Welcome Page' menu item. A page with a pre-defined template for a 'Welcome Page' is created. Now add a couple of inner pages by right-clicking on the wizard/page and selecting the 'Add Inner page' menu item. A blank wizard page with a page header is added to the wizard and displayed. The caption, description and header image can be changed if required. The pages can be designed just like you would design any form - by placing child controls on the page. Finally, a Finish page is added by right-clicking on the wizard/page and selecting the 'Add Finish page' menu item.

Wizard - Design time support

The Wizard control comes with comprehensive design-time support which allows you to completely design your wizard including the content of wizard pages just like you would design a form. Pages can be added, removed and reordered at design-time and their properties can be changed easily.

Navigating pages at design time

At design-time, the wizard control shows two links - '< Back' and 'Next >' - at the bottom left corner for navigation.  Clicking on these links shows the previous or next page of the wizard.

You can also use the Page Manager dialog to directly jump to the desired page.

Using the Page Manager Dialog

The Page Manager allows you at add, remove, modify and reorder pages as well as jump to any page in the wizard.

The Page Manager dialog can be shown by clicking on the 'Page Manager...' link shown in the wizard control in the bottom left corner. It can also be shown by right-clicking on the wizard at design-time and clicking the 'Page Manager...' menu item. The Page Manager dialog shows a list of all pages in the wizard page collection, along with command buttons and a property grid for changing page properties.

Jumping to a page

To jump to a page in the wizard page collection, simply select the page from the page list. The wizard will show that page as the currently selected wizard page.

Adding a page

To add pages, click on the 'Add Page...' button. A menu will pop up display three choice of pages : Welcome, Inner and Finish page. Select the desired option and the page will be added to the wizard at the end.

Removing a page

To remove a page from the wizard page collection, select the desired page from the page list and click on the 'Remove' button.

Reordering pages

To move a page around in the wizard page collection, select the desired page from the page list and click the 'Move Up' or 'Move Down' buttons.

Changing page properties

To change the properties of a page, select the desired page from the page list. The page properties will be shown in the property grid on the right from where they can be changed.

Configuring the wizard and wizard pages.

Page navigation control at runtime

By default, the wizard navigates through the collection of pages in the order in which they appear in the wizard. You can change this behavior by handling the wizard level or page-level BackButtonClick and NextButtonClick events. When such page jumps are used, the BackTrackingStyle property determines how previous pages are displayed when the Back button is clicked.

Using events

The *ButtonClick events can be handled at the page level and wizard level. When a button click occurs via the UI or simulated via Perform*ButtonClick methods, the corresponding *ButtonClick event of both the wizard and the currently selected page is raised. When the selected page changes, the BeforeHide and BeforeShow events are raised for the current page, then the AfterHide and AfterShow events are raised for the new page. These events can be handled to cancel the page change.

Configuring buttons

By default, the wizard atomically enables/disables and shows/hides wizard buttons depending on the type of the currently selected page and its position in the page collection. You can override this by using the *ButtonEnabled and *ButtonVisible properties. To change other properties of buttons such as their captions, you can directly access the buttons using the *Button properties.

Conclusion