Export (0) Print
Expand All
0 out of 5 rated this helpful - Rate this topic

Style and template overview

This page applies to WPF and Silverlight 2

You can customize Windows Presentation Foundation (WPF) and Silverlight 2 controls in many ways, including by creating a set of templates and styles for controls, This results in a unique and consistent look for your application.

Cc295273.alert_note(en-us,Expression.10).gifNote:

Styles and templates are not supported in Microsoft Silverlight 1.0 projects, but you can create JavaScript classes to define reusable controls. For an example, see the Button class in the ButtonGallery sample that is available from the Samples tab in the Welcome Screen (on the Help menu). For more information, see the Silverlight learning center.

Templates and styles define the pieces that make up a control and the default behavior of the control, respectively. You create templates and styles by making copies of the default system styles and templates for a control (because you can't modify system styles and templates). Modifying templates and styles is an easy way to essentially make new controls in Design view of Microsoft Expression Blend, without having to use code.

The following table provides a detailed comparison of styles and templates to help you decide whether you want to modify the style or template of a control, or both.

Characteristic

Styles

Templates

Purpose

By using styles, you can modify the default values of properties that are set on the control to which the style is applied. For example, you can specify default colors for the background, border, and foreground of a control such as a button.

These style properties can be overridden by the values that are set on the control itself when it is drawn on the artboard. For example, if you set the background color to blue in the style of a button, the button will appear blue when it is drawn on the artboard, but you can change the color.

You can set only pre-existing properties in the style. For example, you cannot set a default value for a property that belongs to a new part that you added to the template.

Finally, you can use styles to specify the default behavior of a control. For example, in a style for a button, you can specify a trigger so that when users move their mouse pointer over the button, the background color will change. These property changes are instantaneous (they cannot be animated gradually).

Using templates, you can modify the structure of the control to which the template is applied. You can modify a control template to rearrange, add, or delete the elements (or parts) in the control. For example, you can add a background image or design to a control such as a button.

You can also modify the values of properties (such as background color) that are set on the control to which the template is applied. These template values cannot be overridden by the values that are set on the control itself when it is drawn on the artboard. However, you can use template-binding to set the properties of a template according to the values of properties of the control when it is drawn on the artboard.

When you modify a template, you have access to more parts of a control than when you modify a style. For example, you can change the way the pop-up list appears in a combo box, or you change the look of the button that triggers the pop-up list in the combo box by modifying the items template. Some templates consist of the following parts:

  • Content Presenter   A content presenter is a placeholder in the control template to display the content of the control to which the template is applied. This might be the value of a content property (in a button for example), or a text property (in a text box).

  • Header   Some controls have multiple properties that hold content. In this case, an additional content presenter is used in the template as a placeholder for the type of content that is used as a header. An example of a headered control is a tab item control where the header is the label on the tab and the content is displayed underneath the header.

  • Items Host   An items host is used as a placeholder for the child elements of a control. The items host part of a template is identified by Is_Items_Host = True in the Properties panel.

  • ItemContainerTemplate   An item container template is applied to a control that contains items, such as a Menu or List control. This template is used when items are added to the list.

Finally, you can specify the behavior of any new and existing parts in a template by using triggers. For example, you can specify a trigger so that when users move their mouse pointer over a button, the color of one of the parts will change. These property changes can be instantaneous or animated to produce a smooth transition.

Cc295273.alert_note(en-us,Expression.10).gifNote:
You cannot animate from the value of a template-bound property or a color resource to another value. When using animations in triggers, use specific property values.

How to edit

You can enter the editing mode for a style in the following ways:

Using the menu

  1. Under Objects and Timeline, select the control.

  2. On the Object menu, point to Edit Style.

  3. Do one of the following:

    • Click Edit Style (if you want to change the style that is currently applied to the control)

    • Click Edit a Copy (to simultaneously create a new copy of the style that is currently applied to the control and apply the new style to the control).

The Edit Style option will not be available if the system style is applied to the control.For an example, see Create a style resource.

Using the Resources panel (to modify an existing style)

Cc295273.alert_note(en-us,Expression.10).gifNote:
Styles and templates are resources that you can apply to controls in different ways and store in different locations in your application. For an example of creating a style, see Create a style resource.

You can enter the editing mode for a control template in the following ways:

Using the menu

  1. Under Objects and Timeline, select the control.

  2. Do one of the following:

    • On the Object menu, point to Edit Control Parts (Template).

    • Right-click the control, point to Edit Control Parts (Template).

  3. Click Edit Template (if you want to modify the template that is currently applied to the control) or click Edit a Copy (to simultaneously create a new copy of the template that is currently applied to the control and apply the new template to the control). The Edit Template option is not available if the system template is applied to the control.For an example, see Create or edit a control template.

Using the Resources panel (to modify an existing template)

  1. In the Resources panel, locate the style that contains the template, and then click the Edit resource button next to the style.

  2. Under Objects and Timeline, right-click the Style elements, point to Edit Control Parts (Template), and then click Edit Template.

Cc295273.alert_tip(en-us,Expression.10).gifTip:
Control templates are wrapped inside styles so that the style that is applied to a control includes both the appearance (parts) and the behavior for the control. That is why you click Edit Template instead of Edit a Copy, because the copy of the style includes the template.To return to the editing scope of your main document, you must click the Scope Up Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png button two times because the first click brings you back to the editing mode of the style.
Cc295273.alert_note(en-us,Expression.10).gifNote:
Styles and templates are resources that you can apply to controls in different ways and store in different locations in your application. For an example of creating a template, see Create or edit a control template.

How to apply

You can apply an existing style to a control on the artboard in the following ways:

Using the menu

  1. Under Objects and Timeline, select the control.

  2. On the Object menu, point to Edit Style, point to Apply Resource, and then select the style from the drop-down list that appears. The drop-down list will display only styles that are available to the selected control. For example, you cannot apply a text box style to a button.

Using the Asset Library to draw a styled control on the artboard

  1. Open the Asset Library Cc295273.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png.

  2. Do one of the following:

    • If your style was created in the document in which you are working, click the Local Styles tab.

    • If your style was created in a resource dictionary (WPF only), click the Controls tab, and then select the dictionary.

  3. Select the style that you want, and then draw on the artboard.

You can apply an existing template to a control on the artboard in the following ways:

Using the menu

  1. Under Objects and Timeline, select the control.

  2. Do one of the following:

    • On the Object menu, point to Edit Control Parts (Template).

    • Right-click the control and then point to Edit Control Parts (Template).

  3. Click Edit Template (if you want to change the template that is currently applied to the control) or click Edit a Copy (to simultaneously create a new copy of the template that is currently applied to the control and apply the new template to the control). The Edit Template option is not available if the system template is applied to the control.For an example, see Create or edit a control template.

Using the Resources panel (to modify an existing template)

  1. In the Resources panel, locate the style that contains the template, and then click the Edit resource button next to the style.

  2. Under Objects and Timeline, right-click the Style elements, point to Edit Control Parts (Template), and then click Edit Template.

    To return to the editing scope of your main document, you must click the Scope Up Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png button two times because the first click brings you back to the editing mode of the style.

Expression Blend includes a set of simple styles and templates that are packaged in a resource dictionary in WPF projects. You can use resource dictionaries to design a theme for your application. For more information, see the Simple styles and resource dictionaries section.

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

When you are in the editing scope of a style or template in Expression Blend 2, a breadcrumb navigation bar appears at the upper left of the artboard.

Breadcrumb bar with template-editing mode selected

Cc295273.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(en-us,Expression.10).png

By clicking the buttons on the breadcrumb bar, you can quickly move through template-editing mode, style-editing mode, and object-editing scope for the selected object. The breadcrumb bar appears for any selected object that has a custom style or template applied to it.

For information about how to modify a style or template, see Edit a style and Create or edit a control template. When you modify styles or templates, make sure that you adopt the Best practices that follow.

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

Cc295273.alert_caution(en-us,Expression.10).gifCaution:

When you modify styles and templates, the following are key points to remember to keep from breaking the functionality of the system control to which the style or template is applied:

  • Avoid changing the existing triggers unless you are just changing color brushes.

  • Do not rename or modify any element whose name starts with "PART_", because these elements are referred to from the code that implements the control.

  • Do not remove any helper elements, such as the TabPanel in the SimpleTabControl, or the Track in the SimpleScrollBar. These elements must be present to preserve the capabilities of the control.

  • Do not reset or change any bindings in the Properties panel. These are identified by a yellow highlight around the property or by a yellow Advanced property options Cc295273.41b6d73e-9be5-48d9-aebf-12a284314457(en-us,Expression.10).png button. Template binding is used to bind properties in the template to the properties of the control to which the template is applied.

  • If the template includes a presenter element (such as a ContentPresenter or ItemsPresenter element), make sure to retain that element in the template. Presenter elements display content that is defined in the control to which the template is applied.

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

A theme is a set of styles and templates that produce a consistent look for user interface controls. For example, Windows Presentation Foundation uses one theme for WPF applications that are running on Microsoft Windows XP, and a different theme for WPF applications that are running on Windows Vista. That is why the same button will look different between the two operating systems.

To determine the look of a control (such as a button), an application will search in the following locations:

  1. Properties that are set on a control   An example is if you were to create a button in Expression Blend and then change the background color directly on the button. Setting a property directly on a control overrides any values for that property set anywhere else.

  2. Properties that are set in the custom style or template that is used by a control   An example is if you were to create a button in Expression Blend and then modify a copy of the template to set the background color in the template. This is the background color that will be used for the button if the background property is not set directly on the button. You can define resources in the document that contains the control, or you can define resources at the application level (therefore making the resources available to all documents in the application). Document-level resources override application-level resources.

  3. Properties that are set on the system template that is used by a control   WPF determines the system template based on the theme (in other words, based on the operating system).

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

Cc295273.alert_note(en-us,Expression.10).gifNote:

Simple styles and resource dictionaries are not supported in Silverlight 2 projects.

You can effectively create a theme by creating property, style, and template resources in an individual file that is named a resource dictionary. Resource dictionaries enable you to reuse a theme across multiple applications. You can also create swappable themes, by defining multiple resource dictionaries that provide the same types of resources but with different values. For example, the Expression Blend application itself uses different resource dictionaries for a Dark theme and a Light theme, which you can switch between by clicking Options on the Tools menu, and then changing the Theme for the Workspace.

For your own applications, Expression Blend provides a ready-to-use resource dictionary named SimpleStyles.xaml that contains a set of styles for common controls such as buttons, list boxes, and others. You can access these styles under Simple Styles on the Controls tab of the Asset Library. When you use one of the simple styles to draw a control on the artboard, the system version of the control is simultaneously created and the simple style is applied. For example, if you create a system Button on the artboard, the resulting Extensible Application Markup Language (XAML) is as follows:

<Button Content="Button" ... />

If you create a SimpleButton on the artboard, the resulting XAML includes a reference to the SimpleButton style:

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

After you add a simple style control to the artboard, the SimpleStyles.xaml resource dictionary file is added to your project, and is linked to the app.xaml file so that the styles are defined in the scope of the application. You can view all the styles in the Resources panel.

For examples of using simple styles, see the topics under Simple styles. For more information about how to manage resources, see Resources overview.

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.