Wizard control

  • Article

Collecting user input by using forms is a recurring task in web development. A group of forms that is used to accomplish a task is often called a wizard. The ASP.NET Wizard control simplifies many of the tasks that are associated with building multiple forms and collecting user input. The Wizard control provides a simple mechanism that allows you to easily build steps, add a new step, or reorder the steps. You can build linear and non-linear navigation and customize the control's user navigation without writing code.

To add a Wizard control to a page

  1. Drag the Wizard control from the Toolbox task pane to your page.

  2. Drag the sizing boxes on the side and bottom of the Wizard control outline until the Wizard is the size you want.

A Wizard control consists of three separate regions: The sidebar area, the navigation area, and the step area. You can set properties in the Tag Properties task pane for each of these areas, as well as for the Wizard as a whole.

For a full description of all Wizard control properties, see Wizard Properties in the MSDN library.

Wizard Steps

The Wizard control uses steps to delineate different sections of user data input. Within each step, you can add controls and labels, and accept user data. The Wizard control will help manage which step to display, and help maintain the collected data.

To change between steps as you design them

  • In Design view, right-click the Wizard control, and then click Show CommonControl Tasks.

Tip

You can also click the Wizard control in Design view, click the arrow Cc295425.56557a2a-a4ef-4c47-906b-f64b8d530387(en-us,Expression.10).png in the upper-right corner to show the Common Wizard Tasks menu. Click the arrow again to hide the menu.

  1. On the Common Wizard Tasks menu, select the step you want to design from the Step menu.

To add or remove steps

  1. In Design view, right-click the Wizard control, and then click Show CommonControl Tasks.

  2. On the Common Wizard Tasks menu, click Add/Remove WizardSteps.

  3. In the WizardStep Collection Editor dialog box, click the Add button.

  4. Set the Title property (and other properties) for your new step in the StepProperties area. The Title is displayed as the link text for the step in the sidebar area of the Wizard.

Each step within the control is given a StepType to indicate whether it is the beginning step (StartNavigation), intermediate step (StepNavigation), or completion (FinishNavigation) step. You can customize the steps, but by default, the StartNavigation step has a Next button. The StepNavigation pages have Previous and Next buttons. The FinishNavigation step has Previous and Finish buttons. The wizard can have as many intermediate steps as needed. You can add different controls, such as a TextBox control or a ListBox control, to collect user input.

To specify a StepType for a step

  1. In Design view, right-click the Wizard control, and then click Show CommonControl Tasks.

  2. On the Common Wizard Tasks menu, select the step you want to specify the type for from the Stepmenu.

  3. On the CommonWizard Tasks menu, click one of the following links.

    • Convert to StartNavigationTemplate

    • Convert to StepNavigationTemplate

    • Convert to FinishNavigationTemplate

Wizard Navigation

The Wizard control features both linear and non-linear navigation. The user can move forward and backward between steps by clicking the buttons in the navigation area, and it allows the user to select individual steps at any point, as long as the sidebar is displayed. You can customize the text for navigation by setting the StepNextButtonText, StepPreviousButtonText, and FinishCompleteButtonText properties in the TagProperties task pane.

Customizing Wizard Templates

You can customize each of the areas of the Wizard by updating the collection of styles associated with the area. For example, in the Styles group in the Tag Properties task pane, you can customize the StepStyle, NavigationStyle and other collections of styles for an area of the Wizard. The Wizard control automatically displays a title and the control's current step. The title is customized with the HeaderText property. You can adjust the header's template by using the HeaderTemplate property or design the template interactively.

To interactively design a template

  1. In Design view, right-click the Wizard control, and then click Show CommonControl Tasks.

  2. On the Common Wizard Tasks menu, click Edit Templates. This switches the Wizard into Template Editing Mode.

  3. In the Display dropdown, select the template you would like to edit: HeaderTemplate, SideBarTemplate, StartNavigationTemplate, StepNavigationTemplate, or FinishNavigationTemplate.

  4. Add text or controls or make changes to the Template.

  5. When you are finished designing your templates, on the CommonWizardTasks menu, click EndTemplateEditing to return to the standard Wizard design mode.

For more information about using the Wizard control, see Wizard Web Server Control Overview in the MSDN library.