Styles and Templates

Wizard makes extensive use of the style and template features provided in the WPF framework.

Everything from pages to the button container can be completely customized on multiple levels. You may choose to apply certain types of images and backgrounds to pages via our simple WizardPage-level properties. You may wish to define more of a theme for all the pages in your wizard. Or you may even want to redefine the way the pages or the button container look via templates. By doing this, you can determine which controls are in a page's header or in the button container and add your own as needed.

WizardPage Properties

The WizardPage has a couple properties that control the visual style of the header on the page. For an interior page, the header is the area that is at the top of the page. For an exterior page, the header is the watermark area on the left side of the page. Each header can display a custom image and can draw its background using a custom brush.

Applying Styles

The next level of customization is to apply styles to the parts of the wizard. The wizard parts that can be customized are the exterior page style, the interior page style, and the button container style.

Of course, the default styles of any other type of control can be updated. For instance you may wish to apply a new style to any Button in the button container that matches the new style you apply to the button container.

Styles may be applied anywhere within a control hierarchy, at an application-level, or in a Generic.xaml resource dictionary.

Templates

Custom templates may be applied via styles for the wizard, pages or the button container. In the case of pages, if a custom template is applied, there is no need to use the BasedOn attribute in the new style.

The sample project contains numerous template examples in the Themes child folder. You may use those samples as a base for your own templates.

The real power of templates becomes apparent when you start rearranging where template child controls appear and add your own controls. For instance, perhaps you wish to have a Hyperlink back to your web site in the left part of the button container. No problem... just make a custom button container template.

Changing Button Positions (Next/Finish Button Shared Space)

Some developers prefer to have the Help button on the right side or the button container and others prefer to have the Next and Finish buttons share the same space. In this scenario, the Finish button is only visible on a finish page.

Both of these scenarios are perfect situations for a custom button container template. The full source for the alternate button container template used in the screen above is located in the sample project.