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>