Posted by Janet on January 9th, 2009

One of the most powerful and useful features of Microsoft Expression Blend is the ability to customize the appearance of objects by using styles and templates, which is similar to how style sheets are used in a website.

In a team environment, a designer might work on the same project as the developer, modifying the appearance of objects in the project in Design view (a WYSIWYG view). Work done in Design view modifies the .xaml files behind the scenes. The developer can work concurrently, modifying the code-behind files.

Alternatively, a designer might do design work in throw-away projects (in Expression Blend or Microsoft Expression Design), saving the designs as reusable styles and templates called resources. The developer can then include the resources in the final project, and apply the styles and templates to the objects that they have already drawn in the project in their default form.

For example, the following images were created in Expression Design and exported as individual XAML resource files—one for each image.

A sample design for a Stop button

The .xaml file for the middle “Hover” image was imported into Expression Blend, and the objects that made up the image were selected and converted into a button. The style and template of the button were saved in a resource dictionary in the Windows Presentation Foundation (WPF) version of the project, and in the Page.xaml file in the Microsoft Silverlight version of the project. The template was then modified to change the appearance of the button in different states. Finally, the template was applied to a default button object.

The Expression Design file and the two Expression Blend projects are available at StopButtonProjects.zip. You can run the sample applications to test the button by unzipping the folders and double-clicking one of the following:

• StopButton_WPF\StopButton_WPF\bin\Debug\StopButton_WPF.exe (for the WPF version)
• StopButton_SL3\StopButton_SL3\bin\Debug\Default.html file (for the Silverlight version)

The following topics in the Expression Blend User Guide describe some of the techniques that were used:

• Import XAML that is exported from Expression Design (or the topic Exporting XAML files in the Expression Design User Guide)
• Create a control from existing objects
• Create or modify a template and Add or remove a trigger (for the WPF version)
• Modify the appearance of a system control in different states (for the Silverlight version)
• Apply a style resource

What’s with the style?

First, let’s cover one of the most commonly confusing aspects of templates. To modify the appearance of a control, you modify its template. However, when you create a template, a style is automatically created behind the scenes, and wraps around the template.

The palette icon identifying the style in the hierarchy of the breadcrumb bar

Styles and templates are a package deal, where the style defines the behavior and the template defines the appearance. Structurally, the style is the parent of the template. To apply the template, you can drag the parent style from the Resources panel onto the object, among other methods.

Applying a button style (and template) to a default button

Nested templates

Some controls, such as the Button control, have only one template applied to them. For example, the default template of a Button control makes it look like the following:

Default appearance of the Button control, in its different states

Other controls, such as the ListBox control, have multiple templates applied to them. This is because some objects in a ListBox control are also used in other controls. For example, nested inside the template for a ListBox control are ScrollBar controls, and those ScrollBars already have default templates applied to them to change their appearance from vertical to horizontal. The default template of a ListBox control makes it look like the following:

Default appearance of the ListBox control, a selected ListItem, and a moused-over ListItem

If you wanted to, you could change only the appearance of the arrows in the ScrollBar controls of the ListBox control by drilling down in the template tree to the RepeatButton templates, and changing the arrows to something else.

A ListBox control after the RepeatButton templates are changed

The nested templates of the ListBox control

An alternate version of the preceding image can be found here.

The breadcrumb path to the RepeatButton template for the VerticalSmallIncrease object, starting from the ListBox control

For a short video that shows how to get to the template for the VerticalSmallIncrease object, watch the TemplateDrillDown video here.

Some controls have different templates to display different kinds of content. For example, a ListBox control can contain individual items (as seen above), or it can be bound to a data source so that it automatically displays a collection of data items. You can modify the data template to display collection items in a unique way. For example, you can specify whether a data item that defines a path to an image is displayed as a line of text or as the image.

A ListBox control with individual items added manually (grids that contain an image and text)

A ListBox control bound to a data source of book titles

This figure shows an application that uses the sample code at Databinding and datatemplates with Expression Blend.

The Expression Blend project for the preceding ListBox controls is available at ListBoxesCompared.zip.

Versatile templates

You can customize the appearance of a control once, and then reuse the template by applying it to other controls of the same type. Sometimes, however, you might want to create a template to define only some parts of the control. For example, you might want to make a template for a button that you can apply to multiple button objects, but change the text that appears in each button. You can achieve that by template binding—binding a property inside a template to a property on the control that uses the template. For an example, see the Silverlight project in the zip file at StopButtonProjects.zip.

Inside the template, binding the Content property of the ContentPresenter object

Outside the template, three buttons that use the same template, but specify different text in the Content property of each button

The beauty of templates is that you can use them to drastically change the appearance of a control. Charles Petzold, a prolific computer scientist and author, created scrollbars that are curved. You can find his blog article and source code at http://www.charlespetzold.com/blog/2008/08/Curved-ScrollBars.html. (You could apply his template to the scrollbar within a ListBox template.)

A ScrollBar whose appearance is changed to appear curved

Another example of a control whose appearance has been drastically changed is the ListBox control that was modified by Beatriz Costa (a senior test developer at Microsoft) to display the list of planets in our solar system as a ring of concentric circles. You can find her blog article and source code at http://www.beacosta.com/blog/?p=40.

A ListBox control whose appearance is thoroughly customized

Choosing controls

When looking for the right control to use in your project, you can use the pictures in the WPF Control Library and the Silverlight Control Gallery to help you, but remember that you’re selecting a control based on its behavior, not its appearance. For example, when you look at a check box, don’t think of it as a check mark with a label; think of it as a control that can be in one of three states. A radio button is a control that can be selected or cleared. A button can be clicked to start some kind of programmed behavior. A list box can display a list of items and allow one to be selected, but it can look like Beatriz Costa’s solar system. A scroll bar can represent a range of values with one of them selected, allowing the user to scroll through the values by dragging a thumb, but it can look like Charles Petzold’s curved scrollbar.
Part 2 of this article will examine the most popular controls, describing them in a way to help you select the right one for your needs, showing all the templates that are applied to each control, and what parts of the control are changed by each item in the template.

Additional information

If you want to play with the projects that were used in this article, install the trial version of Expression Blend 3 from the Expression community website.

You can open the User Guide by opening Expression Blend and pressing F1.

Tutorials and videos are available at Learn Expression Blend.

Tags: design, development, template

This entry was posted on Friday, January 9th, 2009 at 3:13 pm and is filed under Expression Blend, SketchFlow. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.