Wizard Framework for WPF User Guide

Using the Designer

Back to Table of Contents

Creating a Wizard

Normally you will want to add a WizardWindow complete with a Wizard inside to your project. Our installer adds a template to Visual Studio to make this easy. Simply right-click your project and choose Add Item, and select Wizard Window from the list of available templates. Your wizard will then appear in design mode ready for editing.

Alternatively, to add a wizard to an existing window, use the toolbox. Our installer adds all the Wizard Framework to your toolbox upon installation. Just drag a Wizard control from the toolbox to create a new wizard. Depending on the container you drag it into, you may need to remove Width and Height attributes set by the designer in order for the wizard to stretch appropriately.

Populating Pages

When you add a new wizard, three pages are created automatically: a start page, a middle page and a finish page. At design time the Next and Previous buttons can be clicked just like they can at runtime, enabling easy and intuitive page navigation for the developer just like for the user.

To create new pages, right-click on an existing page and use the commands in the context menu. Normally you will choose either Add Before Before or Add Page After. These commands create a new normal page and insert it at the appropriate position in the wizard. The new page will become selected in the designer ready for child controls to be added. New pages have a Grid control added to them by default so you can drop child controls on there right away.

Rearranging and Managing Pages

When a wizard control or one of its pages is selected, a popup bar is displayed to the left of the wizard. Thumbnails of each page are shown within the bar arranged vertically in their default order. Clicking one of the thumbnails instantly selects it ready for editing, making it very easy to navigate and jump between pages at design time.

To reorder the pages visually, simply drag the thumbnails in the popup bar. When the mouse button is released you will see your XAML updated.