How to manage the Wizard control appearance in ASP.NET pages

The Wizard control offers a big set of different properties you can use. For small changes, you can set various top-level properties. For example, you can control the colors, fonts, spacing, and border style. You can also modify the appearance of every button and add a header by using the HeaderText property.

More control is available through styles. You can use styles to format different parts of the Wizard control. The next table lists different styles you can apply:

 

Style

Description

ControlStyle

Applies to all sections of the Wizard control.

HeaderStyle

Applies to the header section of the Wizard control, which is visible only if you set some text in the HeaderText property.

SideBarStyle

Applies to the sidebar area of the Wizard control.

SideBarButtonStyle

Applies to just the buttons in the sidebar.

StepStyle

Applies to the section of the control where you define the step content.

NavigationStyle

Applies to the bottom area of the control where the navigation buttons are displayed.

NavigationButtonStyle

Applies to just the navigation buttons in the navigation area.

StartNextButtonStyle

Applies to the next navigation button on the first step (when StepType is Start)

StepNextButtonStyle

Applies to the next navigation button on intermediate steps (when StepType is Step).

StepPreviousButtonStyle

Applies to the previous navigation button on intermediate steps (when StepType is Step).

FinishPreviousButtonStyle

Applies to the previous navigation button on the last step (when StepType is Finish).

CancelButtonStyle

Applies to the cancel button, if you have Wizard.DisplayCancelButton set to true.

 

You can use templates to completely define the appearance of the Wizard control, if you can’t get the level of customization you want through properties and styles. Generally, you can supply the markup only for the step content. With templates, which are declared separately from the step content, you supply the markup for one of the other regions, such as buttons, header, or sidebar. The next table lists all templates you can use:

 

Style

Description

HeaderTemplate

Defines the content of the header region.

SideBarTemplate

Defines the sidebar, which typically includes navigation links for each step.

StartNavigationTemplate

Defines the navigation buttons for the first step (when StepType is Start).

StepNavigationTemplate

Defines the navigation buttons for intermediate steps (when StepType is Step).

FinishNavigationTemplate

Defines the navigation buttons for the final step (when StepType is Finish)

LayoutTemplate

Defines the overall arrangement of the header, sidebar, step area, and navigation buttons.

You can use the next markup if you want to show the title of the current step by using data binding expression:

<asp:Wizard ID=”Wizard1″ runat=”server” …>

<WizardSteps>

</WizardSteps>

<HeaderTemplate>

<i>Header Template</i> –

<b><%= Wizard1.ActiveStep.Title %></b>

<br /><br />

</HeaderTemplate>

</asp:Wizard>

 

With the next markup you can customize the navigation buttons in the same control. This example keeps the standard buttons (by declaring them explicitly) and adds a piece of italicized text so you can see when each template is being used:

 

<StartNavigationTemplate>

<i>StartNavigationTemplate</i><br />

<asp:Button ID=”StartNextButton” runat=”server” Text=”Next”

CommandName=”MoveNext” />

</StartNavigationTemplate>

 

<StepNavigationTemplate>

<i>StepNavigationTemplate</i><br />

<asp:Button ID=”StepPreviousButton” runat=”server” CausesValidation=”False”

CommandName=”MovePrevious”

Text=”Previous” />

 

<asp:Button ID=”StepNextButton” runat=”server” Text=”Next”

CommandName=”MoveNext” />

</StepNavigationTemplate>

 

<FinishNavigationTemplate>

<i>FinishNavigationTemplate</i><br />

<asp:Button ID=”FinishPreviousButton” runat=”server” CausesValidation=”False”

Text=”Previous” CommandName=”MovePrevious” />

<asp:Button ID=”FinishButton” runat=”server” Text=”Finish”

CommandName=”MoveComplete” />

</FinishNavigationTemplate>