Silverlight 2 - Expression Blend - Styles And Templates

Styles and templates

Page 1 of 65

Styles and templates

The topics in this section describe how you can customize Windows Presentation Foundation and Silverlight 2 controls by creating a set of templates and styles, resulting in a unique and consistent look for your application. Templates and styles define the pieces that make up a control and the default behavior of the control, respectively. Note: 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.

In This Section Conceptual Style and template overview Working with simple styles SimpleButton SimpleCheckBox SimpleComboBox and SimpleComboBoxItem SimpleExpander SimpleListBox and SimpleListBoxItem SimpleMenu and SimpleMenuItem SimpleProgressBar SimpleScrollBar SimpleScrollViewer SimpleSlider SimpleTabControl and SimpleTabItem

How to Create a style resource Edit a style

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 2 of 65

Apply a style resource Restore the default style Create or edit a control template Navigate the style hierarchy using the breadcrumb bar

Try it Try it: Create a button by using bitmap effects Try it: Add animation to a button Try it: Create a rollover button Try it: Customize the appearance of the check mark in a SimpleCheckBox Try it: Customize the appearance of the expander button in a SimpleComboBox Try it: Changing the look of the selected item in a SimpleListBox Try it: Customize the progress indicator of a SimpleProgressBar Try it: Customize the look of a SimpleScrollBar Try it: Customize the Thumb element of a SimpleSlider Try it: Customize the SimpleTabItem using a bitmap effect

See also Concepts Simple styles Resources Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Style and template overview

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. Note: 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

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 3 of 65

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 difference between styles and templates 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 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.

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.

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: 

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

file://C:\Windows\Temp\~hhD0B.htm

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

6/16/2009

Styles and templates

Page 4 of 65

appear blue when it is drawn on the artboard, but you can change the color.

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.

You can set only preexisting 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). Purpose

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. Note: 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.

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

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 5 of 65

Using the menu 1. Under Objects and Timeline, select the control. 2. Do one of the following: You can enter the editing mode for a style in the following ways:



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



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

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: 

How to edit

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

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.

Click Edit a Copy (to simultaneously create a new Using the Resources panel (to copy of the modify an existing template) style that is currently 1. In the Resources panel, applied to the locate the style that contains control and the template, and then click apply the new the Edit resource button style to the next to the style. control). 2. Under Objects and The Edit Style option will Timeline, right-click the not be available if the Style elements, point to Edit system style is applied to Control Parts (Template), the control.For an example, and then click Edit see Create a style resource. Template. 

Using the Resources panel (to modify an existing style) Note: Styles and templates are resources that you can apply to controls in

file://C:\Windows\Temp\~hhD0B.htm

Tip: 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

6/16/2009

Styles and templates

Page 6 of 65

different ways and store in different locations in your application. For an example of creating a style, see Create a style resource.

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.

How to apply

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 . 2. Do one of the following: 

If your style

file://C:\Windows\Temp\~hhD0B.htm

the copy of the style includes the template. To return to the editing scope of your main document, you must click the Scope Up button two times because the first click brings you back to the editing mode of the style. Note: 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. 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)

6/16/2009

Styles and templates

Page 7 of 65

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.

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.

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

To return to the editing scope of your main document, you must click the Scope Up 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. Back to top

Modifying styles and templates 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

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. Back to top

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 8 of 65

Best practices Caution: 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 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.

Back to top

Themes 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). Back to top

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

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 9 of 65

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: Copy Code <Button Content="Button" ... />

If you create a SimpleButton on the artboard, the resulting XAML includes a reference to the SimpleButton style: Copy Code <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. Back to top Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a style resource

You can use the style of a control in Microsoft Expression Blend 2 project to specify triggers (WPF) or states (Silverlight 2) and properties that will be used as defaults by the control to which the style is applied. The properties (such as the background brush color) will affect the control's appearance, and the triggers or states will affect how the control responds to property changes and events. For example, when the user moves their mouse over the control, the IsMouseOver property changes from False to True and the MouseOver event fires. You can create a style for a button that causes the background color of the button to change when the mouse pointer moves over the button. If you want to modify the structure of a control, create a template instead using the procedures in Create or edit a control template. Because a style is a resource, you can save the style separately from the button, and then apply the style resource to other button objects. For more information about resources, see Resources overview in this User Guide.

To create a new style resource for a control 1. On the artboard or under Objects and Timeline in the Interaction panel, select the object for which you want to

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 10 of 65

create a style. 2. On the Object menu, point to Edit Style, and then do one of the following: 

To create a new empty style, click Create Empty. For shape controls (such as Rectangle) and text controls (such as TextBox), this is the only option that is available.



To create a new style that is based on the style that is currently in use by the selected object (whether the style is the default style for the object or is a custom style that you created previously), click Edit a Copy.

The Create Style Resource dialog box appears. 3. Under Resource name (Key), do one of the following: 

To create a new named style for the element, enter a key name. This is the name by which other elements can reference the style, thus applying the style.



To create a style that will be used by all elements of this type, select Apply to all. Tip: In the XAML for the style element that will be created, an attribute named TargetType will be set to the typ element for which you are creating the style. An x:Key attribute will only be set if you entered a key name (the first option above). The presence of an x attribute only allows the style to be applied to elements that specify the style by name. The absence of an x attribute makes the style apply to all elements of this type. For example, the style element below will not be all buttons on the artboard.

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"... 4. Under Define in, select the option where you want the style to be defined: 

To make the style available to any document in your application, select Application.



To make the style available only to the current document, select This document (Window: Window)



To define the style in a resource dictionary file that can be reused in other projects, select Resource dictionary. You can then select an existing resource dictionary file or create a New one.

Note: Resource dictionaries are not supported in Silverlight 2. 5. Click OK to exit the dialog box and open the style for editing. Tip: You are effectively creating a new style resource here. This will become a local resource and can be viewed and modified easily using the Resources panel. 6. Notice the new Expression Blend 2 breadcrumb bar at the top of the artboard. Breadcrumb bar with template-editing mode selected

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 11 of 65

By clicking the buttons on the breadcrumb bar, you can quickly move between template-editing mode, styleediting 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. 7. Add your property and event triggers in the Interaction panel. For an example of triggers to set, see Make an object into a button in this User Guide, or see the Try it! topics under Simple styles. 8. To exit the editing scope of the style, click the Scope Up button

under Objects and Timeline.

This returns you to the previous editing scope you were working from. Tip: Notice that once you create or apply a style resource to an object, a green highlight appears in the Properties pane the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource.

See also Concepts Apply a style resource Style and template overview Simple styles Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Edit a style

You can use the style of a control in Microsoft Expression Blend 2 project to specify triggers (WPF) or states (Silverlight 2) and properties that will be used as defaults by the control to which the style is applied. The properties (such as the background brush color) will affect the control's appearance, and the triggers or states will affect how the control responds to property changes and events. For example, when the user moves their mouse over the control, the IsMouseOver property changes from False to True and the MouseOver event fires. You can create a style for a button that causes the background color of the button to change when the mouse pointer moves over the button. Editing the style of a button

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 12 of 65

Style resources save you time by allowing you to define the appearance and behavior for a type of control, and then apply that style to multiple instances of that type of control on the artboard. When you modify a style resource, all of the controls on the artboard that use that style are automatically updated. Tip: To edit a style, you must have already created the style as a resource or applied the style to an element on the artboard. For more information, see Create a style resource or Apply a style resource in this User Guide.

To edit the style of an object on the artboard 1. On the artboard or under Objects and Timeline in the Interaction panel, select the object whose style you want to edit. 

On the Object menu, point to Edit Style, and then click Edit Style.



Note: If the Edit Style option is unavailable, the object does not have a custom style applied to it. If you choose E you will create a style resource that is a copy of the system style. Under Miscellaneous in the Properties panel, click the Style property, and then click Edit Resource. Note: If the Style property is empty, the object does not have a custom style applied to it.

Expression Blend enters the editing scope for the style. 2. Notice the new Expression Blend 2 breadcrumb bar at the top of the artboard. Breadcrumb bar with template-editing mode selected

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 13 of 65

By clicking the buttons on the breadcrumb bar, you can quickly move between template-editing mode, styleediting 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.

To edit a style resource 

Locate the name of the resource in the Resources panel, and then click the Edit resource button next to the resource. Expression Blend enters the editing scope for the style.

To modify a style 1. While in the editing scope for a style, add your property and event triggers under Triggers in the Interaction panel. For an example of triggers that you can set, see Make an object into a button in this User Guide. 2. To exit the editing scope of the style, click the Scope Up button to the editing scope of the document.

under Objects and Timeline. This returns you

Tip: Notice that after you create a new style resource for an object or apply an existing style resource to an object, a gr highlight appears in the Properties panel for the Style property of the selected object, to indicate that the object is bound, or linked, to the style resource. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Apply a style resource

You can use the style of a control in Microsoft Expression Blend 2 project to specify triggers (WPF) or states (Silverlight 2) and properties that will be used as defaults by the control to which the style is applied. The properties (such as the background brush color) will affect the control's appearance, and the triggers or states will affect how the control responds to property changes and events. For example, when the user moves their mouse over the control, the IsMouseOver property changes from False to True and the MouseOver event fires. You can create a style for a button that causes the background color of the button to change when the mouse pointer moves over the button. Note: You cannot create a style or a control template for one control that will effect a change on another control. However, you can use event triggers directly on one control to effect a change on another control. For more information, see Add

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 14 of 65

or remove a trigger in this User Guide. Style resources save you time by allowing you to define the appearance and behavior for a type of control, and then apply that style to multiple instances of that type of control on the artboard. Tip: To apply a style, you must first create a style. For more information about how to create a style, see Create a style resource in this User Guide.

To apply an existing style resource to a control on the artboard 

On the artboard or under Objects and Timeline in the Interaction panel, click an object to select it, and then do one of the following: 

On the Object menu, point to Edit Style, point to Apply Resource, and then click the named style that you want to apply.



Under Miscellaneous in the Properties panel, click the Advanced property options button next the Style property, point to Local Resource, and then click the named style that you want to apply.

Note: If you do not see your style resource listed, the resource might have been created for a different type of control. F example, a resource that was created from a button object cannot be applied to a check box control.

To use a style resource to create a control on the artboard 1. In the Resources panel, locate the style resource for the control that you want to add to the artboard. You might have to expand the nodes in the Resources panel to see the resource. 2. Drag the style resource to the artboard. A control is added to the artboard with the style already applied. Note: If the style is defined in a resource dictionary, you can also add it to the artboard by selecting the name of the reso dictionary in the Controls tab of the Asset Library, selecting the style, and then drawing on the artboard. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Restore the default style

You can use the style of a control in Microsoft Expression Blend 2 project to specify triggers (WPF) or states (Silverlight 2) and properties that will be used as defaults by the control to which the style is applied. The properties (such as the background brush color) will affect the control's appearance, and the triggers or states will affect how the control responds to property changes and events. For example, when the user moves their mouse over a control, the

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 15 of 65

IsMouseOver property changes from False to True and the MouseOver event fires. You can create a style for a button that causes the background color of the button to change when the mouse pointer moves over the button. At any time, you can restore the default style or template of a control that is drawn on the artboard. The default style uses a dynamic theme that changes the appearance of your control depending on whether your application runs on a Microsoft Windows XP computer or on a Windows Vista computer. For more information, see the "Themes and simple styles" section of the Style and template overview. Tip: To restore the default style for a control, you must have applied a different style to it previously. Restoring the default style essentially breaks the link the control had to a style resource.

To restore the default style or template that is applied to an object 1. On the artboard or under Objects and Timeline, click an object that has a style resource applied to it. 2. In the Properties panel, locate the Style or Template property, click the property value or the Advanced property options marker, and then click Reset on the shortcut menu. Notice that the green outline disappears from around the property value.

See also Concepts Apply a style resource Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create or edit a control template

The template of a control in a Microsoft Expression Blend 2 project defines its appearance by defining the child controls that are contained within the control. For example, the control template for a TextBox contains a Border element named Bd, which in turn contains a ScrollViewer element named PART_ContentHost. The ScrollViewer element displays the content of the TextBox when the control template is applied to a TextBox on the artboard. Editing the template of a TextBox control

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 16 of 65

A default control template uses a dynamic theme that changes the appearance of your control depending on whether your application runs on a Microsoft Windows XP computer or on a Windows Vista computer. You can modify the elements (control parts) within a control template to rearrange the elements or draw more elements into the control. However, if you modify a template for a system control, your control will look the same on both Windows XP and Windows Vista. For more information, see the "Themes and simple styles" section in the Style and template overview. Control templates are saved as a style resource that you can apply to other controls of the same type. Note: You can configure trigger in a control template that respond to property changes (such as IsMouseOver). For example, you can create a property trigger for a TextBox that changes the background color when the mouse cursor moves over the TextBox. If you want to create an event trigger that responds to an event by changing properties or starting an animation, you must create it in a style. For more information, see Edit a style. Caution: Changing the template of a control can break the functionality of the control. As an alternative to editing the control template for a system control, you could use a prestyled, simple control which gives you total freedom over the design of the template. For more information, see Working with simple styles. If none of the simple styles meet your needs and you want to modify the template of a system control, remember the following cautions: 

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



Do not rename or modify any element whose name begins with "PART_" because these are referred to from the code that implements 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 option button.



If the template includes a ContentPresenter or 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 that will use the template.

To create a control template 1. Under Objects and Timeline or on the artboard, select the object from which you want to create a control template and do one of the following: 

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



Right-click the object under Objects and Timeline, point to Edit Control Parts (Template).

2. Point to Edit Template, and then do one of the following: 

To create a new empty template, click Create Empty.



To create a new template based upon the template currently in use by the selected element (whether it is the default template for the object, or a custom template previously created), click Edit a Copy. Note: If the Edit Template option is enabled, then a template is already applied to this object. You can choose to e template .

The Create Style Resource dialog box appears. This is because control templates are stored in a style resource.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 17 of 65

3. Under Resource name (Key), do one of the following: 

To create a new named style for the element, enter a key name. This is the name by which other elements can reference the style, thus applying the template.



To create a style that will be used by all elements of this type, select Apply to all. Tip: In the XAML for the style element that will be created, an attribute named TargetType will be set to the typ element for which you are creating the style. An x:Key attribute will only be set if you entered a key name option above). The presence of an x:Key attribute only allows the style to be applied to elements that specif by the key name. The absence of an x:Key attribute makes the style apply to all elements of this type. For e style element below will not be applied to all buttons on the artboard.

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"... 4. Under Define in, select the option where you want the style to be defined: 

To make the style available to any document in your application, select Application.



To make the style available only to the current document, select This document (Window: Window)



To define the style in a resource dictionary file that can be reused in other projects, select Resource dictionary. You can then select an existing resource dictionary file or create a New one.

Note: Resource dictionaries are not supported in Silverlight 2. 5. Click OK to exit the dialog box and open the style for editing. Tip: You are effectively creating a new template resource inside a style. This will become a local resource and can be viewed and modified easily using the Resources panel. 6. Notice the new Expression Blend 2 breadcrumb bar at the top of the artboard. Breadcrumb bar with template-editing mode selected

By clicking the buttons on the breadcrumb bar, you can quickly move between template-editing mode, styleediting 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. 7. Modify your template by adding or rearranging child elements or adding your property triggers in the Interaction panel. Follow the cautions above if you are modify the template of a system control. 8. To exit the editing scope of the style, click the Scope Up button to the editing scope of the document.

under Objects and Timeline. This returns you

Tip:

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 18 of 65

Notice that once you create or apply a style resource to an object, a green highlight appears in the Properties pane the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource. Back to top

To edit the template of an object that is drawn on the artboard 

On the artboard or under Objects and Timeline, click an object to select it, and then do one of the following: 

In the Object menu, point to Edit Control Parts (Template), and then click Edit Template.



Right-click the object under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template.



In the Properties panel, click the Style property (it should be highlighted in green since you've applied a style to this element previously), and then click Edit Resource in the shortcut menu. Once in the editing scope of the style, right-click the Style object under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template.

Note: If the Edit Template option is disabled, then no template has been applied to the object. Microsoft Expression Blend enters the editing scope for the template. Back to top

To edit a template resource 

In the Resources panel, locate your resource name, and then click the Edit Resource button next to the name. Expression Blend enters the editing scope for the template.

Back to top

To modify a template 1. While in the editing scope for a template, add your property triggers in the Interaction panel, or add child elements to the template. Follow the cautions above if you are modify the template of a system control. 2. To exit the editing scope of the template, click the Scope Up button

under Objects and Timeline.

This returns you to the editing scope of the document. Tip: Notice that once you create or apply a template resource to an object, a green highlight appears in the Properties p for the Style property of the selected object to indicate that the object is now bound, or linked, to this style resour Back to top

See also

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 19 of 65

Concepts Working with simple styles Try it: Create a button by using bitmap effects Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Navigate the style hierarchy using the breadcrumb bar

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

The breadcrumb bar appears for any selected object that can have a custom style or template applied to it.

To navigate the style hierarchy using the breadcrumb bar 

By clicking the buttons on the breadcrumb bar, you can quickly move through template-editing mode, styleediting mode, and object-editing scope for the selected object.

To create a style or template resource by using the breadcrumb bar 1. Select an object on the artboard or under Objects and Timeline that supports styles and templates. For example, select a button. 2. At the top of the artboard, select the breadcrumb button that appears.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 20 of 65

Note: If the object does not support styles or templates, the breadcrumb button for the object is unavailable.

3. From the pop-up menu that appears below the breadcrumb, select which kind of resource to create. For information about how to create styles and templates, see Create a style resource, Create or edit a control template, and see the section on "The difference between styles and templates" in the Style and template overview. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Simple styles

Simple styles are a set of custom, ready-to-use style resources for a set of common system controls, such as the Button and ListBox controls. The simple styles are contained in a resource dictionary that is not visible in the Resources panel until you draw a simple style from the Asset Library on the artboard. Expression Blend provides these simple style resources because modifying the style of a system control requires some knowledge of Windows Presentation Foundation (WPF) styles and templates in order to not break the functionality of the control. Note: The Expression Blend simple styles are not available 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.

In This Section Conceptual

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 21 of 65

Working with simple styles SimpleButton SimpleCheckBox SimpleComboBox and SimpleComboBoxItem SimpleExpander SimpleListBox and SimpleListBoxItem SimpleMenu and SimpleMenuItem SimpleProgressBar SimpleScrollBar SimpleScrollViewer SimpleSlider SimpleTabControl and SimpleTabItem

Try it Try it: Create a button by using bitmap effects Try it: Add animation to a button Try it: Create a rollover button Try it: Customize the appearance of the check mark in a SimpleCheckBox Try it: Customize the appearance of the expander button in a SimpleComboBox Try it: Changing the look of the selected item in a SimpleListBox Try it: Customize the progress indicator of a SimpleProgressBar Try it: Customize the look of a SimpleScrollBar Try it: Customize the Thumb element of a SimpleSlider Try it: Customize the SimpleTabItem using a bitmap effect

See also Concepts Styles and templates Style and template overview Resources Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 22 of 65

Working with simple styles

Microsoft Expression Blend enables you to go above and beyond simply working with default or system controls as you design the user interface (UI) for your application. Instead, you can actually customize and style controls to your liking to make them perform the way you want and—through the use of resources in Expression Blend—give them a unique, attractive look to differentiate your application from others as a way to create a highly branded experience or to create a consistent UI across all of your applications. Note: The Expression Blend simple styles are not available 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.

What are simple styles? Simple styles are a set of custom, ready-to-use style resources for a set of common system controls, such as the Button and ListBox controls. Expression Blend provides these simple style resources because modifying the style of a system control requires some knowledge of Windows Presentation Foundation (WPF) styles and templates in order to not break the functionality of the control. You can use the simple styles in Expression Blend as a self-contained set of resources that you can quickly modify to create a unique look for your application, without having to start with an understanding of WPF styles and templates. Back to top

Creating a simple style control Simple styles are available in the Asset Library, on the Controls tab, by clicking Simple Styles. Select the Show All check box to see all of the available simple styles. After you select a simple style from the Asset Library, the icon for the simple style appears above the Asset Library button and is selected, ready to be drawn on the artboard. When you draw a simple style (such as the SimpleButton) onto the artboard, you actually create an instance of the system control (such as the Button), but with the SimpleButton style applied to it. If you want the simple styles to be applied to the tools that are available in the drop-down lists for some of the tools in the Toolbox, you can click the Use as Default button in the Asset Library when Simple Styles is selected on the Controls tab. The Asset Library showing the available simple style controls, and the option to make them the default styles

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 23 of 65

The following table lists the available simple styles and the controls to which they apply.

Simple style

Control to which it applies

SimpleButton

Button

SimpleCheckBox

CheckBox

SimpleComboBox

ComboBox

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

SimpleLabel

Label

SimpleListBox

ListBox

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

SimpleMenuItem

MenuItem

SimpleProgressBar

ProgressBar

SimpleRadioButton

RadioButton

SimpleRepeatButton

RepeatButton in a ListBox control

file://C:\Windows\Temp\~hhD0B.htm

Icon

6/16/2009

Styles and templates

SimpleScrollBar

Page 24 of 65

ScrollBar

RepeatButton SimpleScrollBarRepeatButtonStyle in a ScrollBar control SimpleScrollViewer

ScrollViewer

SimpleSeparator

Separator in a ListBox, Menu, or ToolBar control

SimpleSlider

Slider

SimpleSliderThumb

Thumb in a Slider control

SimpleTabControl

TabControl

SimpleTabItem

TabItem in a TabControl

SimpleTextBox

TextBox

SimpleThumbStyle

Thumb in a ScrollBar in a ListBox control

SimpleTreeView

TreeView

SimpleTreeViewItem

TreeViewItem in a TreeView control

ToggleButton SimpleTreeViewItemToggleButton in a TreeView control Back to top

Modifying simple styles The simple style resources are contained in a resource dictionary named SimpleStyles.xaml. After you add a simple style to the artboard from the Toolbox, the SimpleStyles.xaml resource dictionary is added to your project, and all of the simple style resources are visible in the Resources panel. The SimpleStyles.xaml resource dictionary includes brush resources and other templates that are used by the simple styles. You can make any of the following changes to the simple styles: 

Change the colors The colors that are used by all of the simple styles are stored as resources that you can change. To change one of the color resources, click the down arrow button next to the color resource in the Resources panel. For information about brushes, see Appearance overview. Choosing to edit a brush resource in the Resources panel

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates



Page 25 of 65

Change the style You can use the style of a control in Expression Blend to specify properties and triggers that will be used as defaults by the control to which the style is applied. The properties (such as the background brush color) will affect the control's appearance, and the triggers will affect how the control responds to property changes and events. For example, the SimpleButton style includes a trigger for the IsMouseOver property such that the button's appearance is changed when the user moves their mouse pointer over the control. The trigger occurs when the IsMouseOver property changes from False to True. To change one of the simple styles, click the Edit Resource button next to the simple style in the Resources panel. Choosing to edit a style resource in the Resources panel



Change the control template The template of a control defines its appearance by defining the child controls that are contained within the control. For example, the control template for the SimpleTextBox element contains a Grid element, which in turn contains a Border element, which contains a ScrollViewer element named PART_ContentHost. The ScrollViewer element displays the content of the TextBox when the SimpleTextBox style is applied to a TextBox on the artboard. Just like the style, you can set property and event triggers in the control template.To change the control template for a simple style, click the Edit resource button next to the simple style in the Resources panel, right-click the Style element that appears under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. Choosing to edit the control template when starting from the editing scope of the style

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 26 of 65

Tip: Control templates are wrapped inside styles so that the style that is applied to a control includes both the appearan (parts) and the behavior for the control. This is important to remember when choosing between Edit a Copy and E Template. For a detailed comparison between styles and templates, see Styles and templates. For specific information about simple styles and examples of modifying the simple styles and control templates, see the topics listed under Reference and Try it! in Simple styles. Back to top

Applying a style resource to an existing control on the artboard The simple styles are resources that can be applied and managed like any other resource. For an example, see Apply a style resource in this User Guide. For more information about resources, see Resources overview in this User Guide. Back to top Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleButton

The button is a content control, which reacts to a Click event. You can place content in a button in Microsoft Expression Blend by double-clicking the button and then drawing an element into it. If you want to place multiple elements into the button, you need to first add in a layout panel such as a Grid or Canvas. A button also can display text by default; you can edit the text by right-clicking the button, and then clicking Edit Text. The artboard view of a SimpleButton control

Breaking down the control template The SimpleButton control template consists of the following items: 

A Grid layout panel, which is used to hold the multiple child elements within the button. The Grid is also used because it makes it easier for you to add more elements to the template. For example, if the root element was a Border and you tried to add another element, the other element would replace the ContentPresenter element

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 27 of 65

because Border can only have a single child. 

A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the button control to which the template is applied.



A ContentPresenter, which is used to display the Content property of the button to which the template is applied. This element must be present to show the content of the button. Objects view: The basic parts (template) of a SimpleButton control

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleButton template, when the IsMouseOver property becomes True, the background of the Border element changes color to the MouseOverBrush resource. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleButton template: 

The Background property is set by using: the NormalBrush when no trigger is active;, the MouseOverBrush when IsMouseOver is True; the PressedBrush when IsPressed is True; and the DisabledBackgroundBrush when is IsEnabled is False.



The Border property is set by using: the NormalBorderBrush when no trigger is active; the DefaultBorderBrush when IsKeyboardFocused is True; the PressedBorderBrush when IsPressed is True; and the DisabledBorderBrush when IsEnabled is False.



The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.

Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 28 of 65



Property triggers are used to change the look of the control depending on the user action, such as a button click. Property triggers are preferred over event triggers because you need two event triggers (for example, for the MouseDown and MouseUp events) to do the same job as one property trigger (for example, for the IsPressed state). However, event triggers can be used to start an animation timeline for more complicated controls.



In general, you will want to set a brush or visual change on the IsMouseOver, IsPressed, and IsEnabled (False) states. In addition, you can use the IsKeyboardFocused state that is usually used to display a dotted line around the control.

Back to top

See also Concepts Try it: Create a button by using bitmap effects Try it: Add animation to a button Try it: Create a rollover button Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Create a button by using bitmap effects

In addition to using property triggers to change the appearance of a button depending on user interaction, in Microsoft Expression Blend you can also apply a bitmap effect on each state.

To create bitmap effects on a button 1. Draw a SimpleButton on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the button under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 3. In the editing scope of the control template, delete the Border child element of the Grid. 4. Double-click the Grid element to make it active so that you can add child elements. 5. Draw a Rectangle into the grid, and then set the Fill property to yellow under Brushes in the Properties panel.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 29 of 65

6. Right-click the Rectangle element, point to Order, and then click Send to Back to layer it behind the ContentPresenter element. 7. Round the edges of the Rectangle element, either by using the adorner that appears when you move your mouse pointer over one of the two handles outside the upper left corner of the rectangle, or by using the RadiusX and RadiusY properties under Appearance in the Properties panel. 8. With the Rectangle still selected, locate the BitmapEffect property in the Advanced section under Appearance in the Properties panel. Click the drop-down arrow, and then click Bevel. Leave the BevelWidth property set to 5, but change the other bevel properties until you achieve the effect that you want. 9. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger, to activate trigger recording. In the Properties panel, click the drop-down arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth property to 10. A new line appears under Properties when active under Triggers, reflecting the property change that will occur when the mouse moves over the button. Tip: You might have to adjust the windows of the Interaction panel to see all of the triggers and actions under Trigger your mouse to resize the windows. 10. Under Triggers in the Interaction panel, click the IsPressed = True trigger to activate trigger recording, and then in the Properties panel, click the drop-down arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth property to 2. A new line appears under Properties when active under Triggers, reflecting the property change that will occur when the mouse clicks the button. 11. Click Default under Triggers in the Interaction panel, to turn off trigger recording. 12. Test your application (F5) to see the effects. Tip: Bitmaps effects are not hardware accelerated, so it is best to set an explicit value and not try to animate the values using an event trigger and animation timeline.

See also Concepts SimpleButton Add or remove a trigger Triggers overview Add a bitmap effect to an object Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Add animation to a button

The SimpleButton does not animate the changes in its state. Instead, it sets a brush resource when there are state changes. In Microsoft Expression Blend, you cannot animate from a brush resource to a color. The following

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 30 of 65

procedure shows you an alternative, by using property triggers to start animation timelines.

To animate a button 1. Draw a SimpleButton on the artboard of Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the button under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 3. In the editing scope of the control template, delete the Border child element of the Grid. 4. Double-click the Grid element to make it active, so that you can add child elements. 5. Draw a Rectangle

into the grid.

6. Right-click the Rectangle element, point to Order, and then click Send to Back to layer it behind the ContentPresenter element. 7. Set a new value for the Fill property of the rectangle under Brushes in the Properties panel. This will be the default color of your button. Tip: The Border child element of the original template used template binding to bind the Fill property of the template Background property of the control to which the template is applied. Template binding lets you use in your templ some of the properties that are set on the control, and thus lets you create multiple buttons that have different background colors but still use the same template. However, you cannot animate from a template bound property specific color, which is why we set a default color for the Fill property in the template. 8. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger to activate trigger recording. Then, beside Actions when activating, click the Add new action button to add an animation timeline. If you do not already have a timeline that you want to trigger when the mouse moves over the button, a Timeline Needed window will appear. Click OK to create a new timeline and to begin recording. Tip: You might have to adjust the windows of the Interaction panel to see all of the triggers and actions under Trigger your mouse to resize the windows. 9. Under Objects and Timeline, move the playhead to 1 second, and then set a new value for the Fill property under Brushes in the Properties panel. As soon as you change the Fill property, a keyframe appears on the timeline. You do not need to set a keyframe at 0 seconds. The timeline will animate from the previous fill to the fill that is set at 1 second, when the mouse pointer moves over the button. 10. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger again to exit the animation timeline and return to the recording mode for the trigger. Click the Add new action button beside Actions

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 31 of 65

when deactivating. Create or select the animation timeline that will run when the mouse pointer moves away from the button. For example, you could use the previous timeline, but select the Stop method for the timeline. 11. If you like, you can create animation timelines for other states under Triggers. 12. Test your application (F5) to see the effects.

See also Concepts SimpleButton Add or remove a trigger Triggers overview Create simple animation Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Create a rollover button

A rollover effect can be created in a button template by changing the appearance of your button depending on user interaction. As an alternative to triggering an animation timeline or triggering property changes to produce a rollover effect, you can use the following procedure to create multiple Grid panels to represent each state of the button, and then toggle the Visibility properties of each Grid panel.

To create a rollover effect on a button 1. Draw a SimpleButton on the artboard in Microsoft Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the button under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 3. In the editing scope of the control template, delete the Border child element of the Grid. 4. Double-click the Grid element to make it active so that you can add child elements. 5. From the Toolbar, add three Grid controls into the Grid of the template. You can add them quickly by double-clicking the Grid icon in the Toolbox, then right-clicking each Grid control under Objects and Timeline,

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 32 of 65

pointing to Auto Size, and then clicking Fill. 6. Right-click the ContentPresenter element, point to Order, and then click Bring to Front to layer the ContentPresenter in front of the new Grid objects. 7. Under Objects and Timeline, rename the new grid objects to "Default", "Pressed", and "MouseOver" respectively, by right-clicking each object and then clicking Rename. 8. To set up the trigger behavior, you need to make only one grid object visible per trigger. For example, with Default selected under Triggers in the Interaction panel, click the Pressed and MouseOver grid objects while holding down the CTRL key, to select those objects. Then, under Appearance in the Properties panel, set the Visibility property to Hidden. 9. Click IsMouseOver = True under Triggers in the Interaction panel, select the Pressed and Default grid objects, and then under Appearance in the Properties panel, set the Visibility property to Hidden. 10. Finally, with IsPressed = True selected under Triggers, select the MouseOver and Default grid objects, and then under Appearance in the Properties panel, set the Visibility property to Hidden. 11. You can now design each grid object the way that you want it to appear under the different conditions. You can use drawing tools and animation timelines to create unique behavior for your button. To design one of the grid objects without the others being visible, you can click the Hide/Show button beside the other grid objects under Objects and Timeline. 12. Test your application (F5) to see the effects.

See also Concepts SimpleButton Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleCheckBox

The check box is a content control that acts as a toggle that can have three states: checked, unchecked, and indeterminate. The IsChecked state indicates whether the check box is selected. You can place content in a check box in Microsoft Expression Blend by double-clicking the check box and then drawing an element into it. If you want to place multiple elements into the check box, you need to first add in a layout panel such as a Grid or Canvas. A check box also can display text by default; you can edit the text by right-clicking the check box, and then clicking Edit Text. The artboard view of a SimpleCheckBox control

Breaking down the control template The SimpleCheckBox control template consists of the following items:

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 33 of 65



A BulletDecorator container, which is used to align the check box against the text. A BulletDecorator takes two children: a bullet, and a content element (such as ContentPresenter). The BulletDecorator is used in other controls (such as the RadioButton) that need to align text against another element.



The Bullet element, which contains a Grid panel that in turn contains a Path element named CheckMark and a Border element. The Path is used to draw an "x" mark.



The ContentPresenter, which is used to display the Content property of the check box to which the template is applied. This element must be present to show the content of the check box. Objects view: The basic parts (template) of a SimpleCheckBox control

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleCheckBox template, when the IsChecked property is False, the visibility of the CheckMark path element is changed to Collapsed. In other triggers, you change the background of the Border element by using brush resources. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleCheckBox template: 

The Background property of the Border element is set by using: the NormalBrush when no trigger is active; the MouseOverBrush when IsMouseOver is True; the PressedBrush when IsPressed is True; and the DisabledBackgroundBrush when is IsEnabled is False.



The BorderBrush property is set by using: the NormalBorderBrush when no trigger is active; the PressedBorderBrush when IsPressed is True; and the DisabledBorderBrush when IsEnabled is False.



The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.



The Stroke property of the CheckMark element uses the GlyphBrush to draw the "x" mark.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 34 of 65

Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect an application user interface (UI) designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



The content of the check box is shown by the ContentPresenter element. ContentPresenter elements automatically bind the template to the Content property of the control to which the template is applied. This element must be present for the check box to show the content from the templated parent.



In some cases, the control you are working with will not have enough attributes to bind to in the control template. For example, the CheckBox control does not provide an attribute to set the brush for the CheckMark element. In this case, the stroke of the CheckMark is set to a brush so that it is easier to change. You can create a custom class based on the CheckBox control and add more attributes to bind to, or you can bind to one of the existing attributes. For an example of a custom class, see Try it: Create a custom WPF control in this User Guide.



The Grid element is a fixed size because you hide and show the CheckMark path element. If the Grid element was not a fixed size, the text in the ContentPresenter would move when the check box selection changed. As an alternative to a fixed Grid size and hiding the CheckMark path, you could change the Opacity of the Stroke property on the CheckMark path object to 0.

Back to top

See also Concepts Try it: Customize the appearance of the check mark in a SimpleCheckBox Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Customize the appearance of the check mark in a SimpleCheckBox

It is easy to customize the appearance of a check mark in Microsoft Expression Blend, by using the SimpleCheckBox control template.

To customize the check mark in a SimpleCheckBox 1. Draw a SimpleCheckBox on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the check box under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 35 of 65

Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 3. In the editing scope of the control template, expand all of the nodes under Objects and Timeline. Delete the CheckMark path element. 4. Double-click the Grid element to make it active, so that you can add child elements. 5. Draw a path into the Grid element by using the Pen tool the Direct Selection tool

in the Toolbox. You can modify the path by using

to adjust points on the path.

Tip: To zoom in on the artboard, you can use the Zoom text box at the bottom of the artboard, or you can the scroll button on your mouse while holding down the CTRL key. Tip: As an alternative to drawing a path element by using the Pen tool, you can use an art resource that is imported fro Microsoft Expression Design 2, or an image file that has been added to your project. 6. When you deleted the CheckMark path element, the trigger that makes it appear and disappear was deleted as well. To recreate the trigger, click IsChecked = False under Triggers in the Interaction panel. Under Objects and Timeline, select the new check mark element, and then under Appearance in the Properties panel, set the Visibility property to Collapsed. 7. Test your application (F5) to see the effects.

See also Concepts SimpleCheckBox Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleComboBox and SimpleComboBoxItem

The combo box is an items control in the form of a drop-down list. You can place content in a combo box in Microsoft Expression Blend by double-clicking the combo box and then drawing an element (such as a SimpleComboBoxItem) within it. Alternatively, you can right-click the combo box under Objects and Timeline, and then click Add SimpleComboBoxItem to add individual items to the collection, or click Bind ItemsSource to Data to generate the collection of ComboBoxItem elements from a data source. To view the combo box on the artboard while it is expanded, you can right-click the combo box or combo box item under Objects and Timeline, and then click Expand ComboBox. The artboard view of a SimpleComboBox control after two items are added

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 36 of 65

Breaking down the control template The SimpleComboBox control template consists of the following items: 

A Grid panel, which is used to hold the multiple children within the combo box. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template.



A ContentPresenter element named ContentSite, which is contained within the Grid and which is used to show the selected item.



A textbox named PART_EditableTextBox, which is contained within the Grid and which allows the user to edit text within the combo box. Because the name PART_EditableTextBox is used by the class to locate the text box, you should not change it. By default, the text box is collapsed and is made visible when IsEditable is set to True on the combo box to which this control template is applied.



A pop-up toggle button control, which is used to create the expanding part of the combo box. The pop-up control knows how to position itself relative to other controls, and renders on top of any other content. This control also supports some built in animations.



A Grid control that is contained within the pop-up control, and which contains a ScrollViewer that allows the list of items to scroll. The StackPanel in the ScrollViewer positions each item. The IsItemsHost property of the StackPanel is set to True so that the combo box control knows to position the child elements inside the StackPanel. If you want to change the way in which your items are displayed, you can replace this layout panel by right-clicking the drop-down grid under Objects and Timeline, and then selecting Change Layout Type to a different panel such as a UniformGrid.

The SimpleComboBoxItem control template consists of the following items: 

A Grid panel, which is used to hold the multiple children within the combo box item. Also, a Grid is used because it makes it easier for a designer to add more elements to the template.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the button control to which this template is applied.



A ContentPresenter element, which is contained within the Grid element and which is automatically bound to the Content property of the item control to which this template is applied. Objects view: The basic parts (template) of a SimpleComboBox control (left) and a SimpleComboBoxItem control (right)

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 37 of 65

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the template for the combo box, when the HasItems property is False, the minimum height of the DropDownBorder element is set to 95 so that an empty drop-down window appears when the combo box is clicked. If the minimum height was set to 0, a very tiny drop-down window would appear. In the template for the combo box item, when the IsHighlighted property is True, the Background property of the Border element is changed to indicate which item in the combo box is selected. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleComboBox and SimpleComboBoxItem templates: 

The Background property of the DropDownBorder element is set by using the WindowBackgroundBrush.



The BorderBrush property of the DropDownBorder element is set by using the SolidBorderBrush.



The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.



If the SimpleComboBox is populated with items that use the SimpleComboBoxItem template, the Background property of the item is set by using the SelectedBackgroundBrush when an item is selected, and the Foreground property is set by using the DisabledForegroundBrush if IsEnabled is False.

Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 38 of 65



The expansion of the combo box is set by binding both the IsChecked property of the ToggleButton and the IsOpen property of the pop-up to the IsDropDownOpen property of the combo box to which this control template is applied. If you edit either the ToggleButton or the pop-up, you need to make sure you maintain this template binding.



The ToggleButton element uses a separate template named ToggleButtonControlTemplate. To modify this, right-click the ToggleButton element, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy.



To edit the SimpleComboBoxItem template, click the Edit resource button next to the SimpleComboBoxItem style in the Resources panel. In the editing mode of the style, right-click Style under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy. If you modify the SimpleComboBoxItem template, you might want to preserve or modify the IsHighlighted trigger.

Back to top

See also Concepts Try it: Customize the appearance of the expander button in a SimpleComboBox Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Customize the appearance of the expander button in a SimpleComboBox

It is easy to customize the appearance of the expander button in a combo box in Microsoft Expression Blend, by using the ToggleButton control template of the SimpleComboBox.

To customize the expander button in a SimpleComboBox 1. Draw a SimpleComboBox on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Add an item to the combo box, by right-clicking the combo box under Objects and Timeline and then clicking Add SimpleComboBoxItem. 3. Add one or two additional items to the combo box by repeating the preceding step. 4. Right-click ComboBox under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button

file://C:\Windows\Temp\~hhD0B.htm

, which

6/16/2009

Styles and templates

Page 39 of 65

above the element tree in the Interaction panel. To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 5. In the editing scope of the control template, expand all of the nodes under Objects and Timeline. 6. Right-click the ToggleButton element under Objects and Timeline, point to Edit Control Parts (Template), and then do one of the following: 

If you selected Edit Template in step 4, click Edit Template now to edit the ExpanderToggeButton control template that is stored in SimpleStyles.xaml.



If you selected Edit a Copy in step 4, click Edit a Copy now to create a copy of the ExpanderToggeButton control template and store it in the same place as the template for the ComboBox.

The look of the expander button is designed in the ExpanderToggeButton control template. Note that the Grid in the template extends the entire width of the combo box. This design enables the drop-down list to appear no matter where the user clicks inside the combo box. 7. Select the Arrow element under Objects and Timeline to identify it on the artboard. The Arrow element is a Path that represents the expander button for the ComboBox control. You can modify the Arrow element by using the Direct Selection tool

to adjust points on the path. Or, you

can delete the Arrow element and then create a new element by using the Pen tool

in the Toolbox.

Tip: To zoom in on the artboard, you can use the Zoom text box at the bottom of the artboard, or you can the scroll button on your mouse while holding down the CTRL key. Tip: As an alternative to drawing a path element by using the Pen tool, you can use an art resource that you import fro Microsoft Expression Design 2, or an image file that you add to your project. 8. The rollover effect when the expander button is clicked is defined by property triggers that change the appearance of the Rectangle elements in the ToggleButton control template. You can add a new property change to the existing triggers that will make your Arrow element rotate when the expander button is clicked. With your Arrow element selected under Objects and Timeline, click IsChecked = True under Triggers in the Interaction panel, and then click the Rotate tab under Transform in the Properties panel, and enter 180 in the Angle text box. When a user clicks the expander button to expand the combo box, the Arrow element will rotate 180 degrees, and will return to its original rotation when it is clicked again. Tip: When you have a property trigger selected under Triggers in the Interaction panel, any edits that you make anywh in Expression Blend will set a value to be changed on that trigger condition. Make sure that the right trigger is sel before you make your changes. If you want to make changes that affect the default state of the control template, c Default under Triggers. 9. Test your application (F5) to see the effects.

See also Concepts SimpleComboBox and SimpleComboBoxItem Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 40 of 65

SimpleExpander

The expander is a headered content control that displays both a header and a collapsible window, which displays content. You can title an expander in Microsoft Expression Blend by modifying the Header property. You can place content in an expander by double-clicking the expander and then drawing an element into it. If you want to place multiple elements into an expander, you need to first add in a layout panel such as a Grid or Canvas. An expander also can display text by default; you can edit the text by right-clicking the expander, and then clicking Edit Text. To view the expander on the artboard while it is expanded, you can right-click the expander under Objects and Timeline, and then click Expand Expander. The artboard view of a SimpleExpander control

Breaking down the control template The SimpleExpander control template consists of the following items: 

A Grid, which is a layout panel that is needed to hold the multiple children within the expander. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template. The Grid is divided into two areas: the Border area that represents the header, and the ExpandSite area that represents the content.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the expander control to which this template is applied.



A ToggleButton element, which is contained within the Border element and which expands and collapses the expander.



A ContentPresenter element, which is contained within the Border element and which is automatically bound to the Header property of the expander control to which this template is applied.



A ContentPresenter under the ExpandSite area, which is used to display the Content property of the expander to which this template is applied. Both ContentPresenter elements must be present to make the expander work as expected. Objects view: The basic parts (template) of a SimpleExpander control

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 41 of 65

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleExpander template, when the IsExpanded property becomes True, the ExpandSite area becomes visible. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleExpander template: 

The Background property is set by using the LightBrush when no trigger is active, and by using the DisabledBackgroundBrush when IsEnabled is False.



The BorderBrush property is set by using the NormalBorderBrush when no trigger is active, and by using the DisabledBorderBrush when IsEnabled is False.



The Background property of the Border element is set by using the NormalBrush when no trigger is active, .



The Background property of the ExpandSite element is set by using the WindowBackgroundBrush when no trigger is active.



The BorderBrush property of the ExpandSite element is set by using the SolidBorderBrush when no trigger is active.



The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.

Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 42 of 65



Because the expander has two ContentPresenter elements (one for the header and one for the content), the ContentPresenter in the header needs to be explicitly set to the class of the control. To do this, set the ContentSource property of the ContentPresenter element (in the Border node of the template) to Header.



The ToggleButton element uses a separate template named ExpanderToggleButton. To modify this, right-click the ToggleButton element, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy. The ToggleButton is connected to the rest of the expander by a binding between IsChecked on the ToggleButton and IsExpanded on the expander. For this property to be correctly updated, you need to keep this binding—the two-way binding allows you to programmatically expand the expander.



By default, the ExpandSite area is collapsed and is made visible by a trigger. Because the trigger references the ExpandSite element by name, you need to also update the IsExpanded trigger if you change or replace the ExpandSite element.

Back to top Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleListBox and SimpleListBoxItem

The list box is an items control in the form of a scrollable list. You can place content in a list box in Microsoft Expression Blend by double-clicking the list box and then drawing an element (such as a rectangle) into it. Alternatively, you can right-click the list box under Objects and Timeline, and then click Add SimpleListBoxItem to add individual items to the collection, or click Bind ItemsSource to Data to generate the collection of SimpleListBoxItem elements from a data source. If you add individual items to the collection, you can reorder the items by double-clicking the list box to make it active, and then dragging the items to change them to the desired order. You can set which item is selected by using the SelectedIndex property of the list box. The artboard view of a SimpleListBox control after two items are added

Breaking down the control template The SimpleListBox control template consists of the following items: 

A Grid panel, which is used to hold the multiple children within the list box. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the list box control to which this template is applied.



A ScrollViewer element, which is used to allow the user of the application to scroll if the list is too long.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates



Page 43 of 65

A StackPanel, which is contained within the ScrollViewer element and which arranges the items. The IsItemsHost property of the StackPanel is set to True to identify the ScrollViewer as the element that will display the items of the list box control to which this template is applied. You can change the StackPanel to another panel element by right-clicking the StackPanel element under Objects and Timeline, and then selecting Change Layout Type to a different panel such as a UniformGrid.

The SimpleListBoxItem control template consists of the following items: 

A Grid panel, which is used to hold the multiple children within the list box item. Also, a Grid is used because it makes it easier for a designer to add more elements to the template.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the button control to which this template is applied.



A ContentPresenter element, which is contained within the Grid element and which is automatically bound to the Content property of the item control to which this template is applied. Objects view: The basic parts (template) of a SimpleListBox control (left) and a SimpleListBoxItem control (right)

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the template for the list box, when the IsSelected property of a list box item is True, the background color of the item is changed. In the template for the list box item, when the IsHighlighted property is True, the Background property of the Border element is changed to indicate which item in the list box is selected. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleListBox and SimpleListBoxItem templates: 

The Background property is set by using the WindowBackgroundBrush if no triggers are active, and is set by using the DisabledBackgroundBrush if IsEnabled is False.



The BorderBrush property is set by using the SolidBorderBrush if no triggers are active, and is set by using the DisabledBorderBrush if IsEnabled is False.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates



Page 44 of 65

If the SimpleListBox is populated with items that use the SimpleListBoxItem template, the Background property of the item is set by using the SelectedBackgroundBrush when an item is selected, and the Foreground property is set by using the DisabledForegroundBrush if IsEnabled is False.

Back to top

See also Concepts Try it: Changing the look of the selected item in a SimpleListBox Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Changing the look of the selected item in a SimpleListBox

It is easy to customize the appearance of a selected item in a list box in Microsoft Expression Blend, by using the SimpleListBoxItem control template.

To change the look of the selected item in a SimpleListBox 1. Draw a SimpleListBox on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Add an item to the list box by right-clicking the list box under Objects and Timeline and then clicking Add SimpleListBoxItem. 3. Right-click one of the list box items under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 4. Click IsSelected = True under Triggers in the Interaction panel. By default, the border background color is changed when an item is selected, as you can see under Properties when active under Triggers. You can change the background to a different color by clicking Border under Objects and Timeline, and then modifying the Background property under Brushes in the Properties panel. Tip: When you have a property trigger selected under Triggers in the Interaction panel, any edits that you make anywh in Expression Blend will set a value to be changed on that trigger condition. Make sure that the right trigger is sel

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 45 of 65

before you make your changes. If you want to make changes that affect the default state of the control template, c Default under Triggers. 5. To add more items to the list box that use the template that you just modified, you can click the Scope up button to return to the editing scope for your document, double-click the list box element to activate it, and then add your custom style from the Local Styles tab of the Asset Library . 6. Test your application (F5) to see the effects.

To change the look of the selected item by using the ItemContainerStyle template 1. Draw a SimpleListBox on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Add a few items to the list box by double-clicking the list box under Objects and Timeline to select it and then drawing a Rectangle or other control into the list box on the artboard. Alternatively, you can right-click the list box element and click Add SimpleListBoxItem. Tip: If you want to try data binding to automatically generate items for the list box, you can use the procedures in Try Create an RSS news reader in this User Guide. 3. Click the ListBox object under Objects and Timeline. On the Object menu, point to Edit Other Styles, point to Edit ItemContainerStyle, and then click Edit a Copy. The Create Style Resource window appears. To learn more about the options in the Create Style Resource window, see Create a resource. For the purposes of this procedure, accept the defaults and click OK. Expression Blend enters the editing mode for the style of a ListBoxItem. 4. Templates are wrapped in style elements, so to edit the template of the ListBoxItem, right-click the Style element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. Note: You click Edit Template here instead of Edit a Copy because control templates are wrapped in style elements and clicked Edit a Copy in step 3 to create a copy of the style. Expression Blend enters the editing scope of the ListBoxItemStyleTemplate—the template that the list box uses for every item. Inside this template is a Border element named Bd, a ContentPresenter element, and two triggers for the IsSelected state. 5. Under Triggers in the Interaction panel, click one of the IsSelected triggers to enter the recording mode for that trigger, and then change the properties of the Bd element. 6. Test your application (F5) to see the effects.

See also Concepts SimpleListBox and SimpleListBoxItem

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 46 of 65

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleMenu and SimpleMenuItem

The menu is an items control that hierarchically organizes elements that are associated with commands and event handlers. You can place content in a menu in Microsoft Expression Blend by double-clicking the menu and then drawing an element (such as a rectangle) into it. Alternatively, you can right-click the menu under Objects and Timeline, and then click Add SimpleMenuItem to add individual items to the collection, or click Bind ItemsSource to Data to generate the collection of MenuItem elements from a data source. To add a second-level menu item, you can right-click a menu item under Objects and Timeline and then click Add SimpleMenuItem, or add a custom menu item from the Local Styles tab of the Asset Library . You can edit the text of the menu item by right-clicking the menu item under Objects and Timeline and then clicking Edit Text, or you can make the menu item active by double-clicking it and drawing a control into it. To view the child menu items of a menu item on the artboard while they are expanded, you can right-click the parent menu item under Objects and Timeline, and then click Expand MenuItem. The artboard view of a SimpleMenu control after two items and a separator are added

Breaking down the control template The SimpleMenu control template consists of the following items: 

A Grid panel, which is used to hold the multiple children within the menu. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the menu control to which this template is applied.



A StackPanel, which is contained within the Grid element and which is used to lay out the menu items. By default, the Orientation property of the StackPanel is set to Horizontal.

The SimpleMenuItem control template consists of the following items: 

A Grid panel, which is used to hold the multiple children within the menu item. The Grid is also used because it makes it easier for a designer to add more elements to the template. This Grid panel uses the concept of size sharing, allowing each menu item to be the same width as all of the other menu items in the menu.



A ContentPresenter element named Icon, which is bound to the Icon property of the menu item to which this template is applied.



A Grid panel named GlyphPanel which is used to display a check mark in case the menu item is a checkable item. By default, the Glyph element is collapsed, but it is made visible by the IsChecked trigger.



A ContentPresenter element named HeaderHost, which is bound to the Header property of the menu item to which this template is applied. The binding is set in the ContentSource property of the HeaderHost element.



A Grid panel named ArrowPanel, which is used to provide a way to expand the menu item. By default, the

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 47 of 65

ArrowPanel is collapsed, but it is made visible by the Role = SubmenuHeader trigger, which identifies the menu item as a submenu header (a second-level or lower-level menu item that has child menu items). 

A Popup element named SubMenuPopup, which is used to hold any existing child menu items. These are placed into a StackPanel element that is marked as the Items Host so that this menu item knows where to place its child menu items. If you want a different arrangement of the menu items, you can use a different layout panel such as a WrapPanel, by right-clicking the StackPanel element under Objects and Timeline, pointing to Change Layout Type, and then selecting a panel. Objects view: The basic parts (template) of a SimpleMenu control (on the left) and a SimpleMenuItem control (on the right)

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the template for the menu item, when the IsChecked property is True, it means that the menu item to which the template is applied is checkable, so the GlyphPanel element is made visible by the trigger. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleMenu and SimpleMenuItem templates: 

The Background property of the menu is set by using the LightBrush, and is set by using the DisabledBackgroundBrush when IsEnabled is False.



The BorderBrush property of the menu is set by using the NormalBorderBrush, and is set by using the DisabledBorderBrush when IsEnabled is False.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 48 of 65



The Background property of the SubMenuBorder element is set by using the WindowBackgroundBrush.



The BorderBrush property of the SubMenuBorder element is set by using the SolidBorderBrush.

Additionally, the templates use bindings to system colors, which allow the controls to use the system defaults. In many cases, you may want to change these brushes so that you can create a unique design. You can do this by editing the Triggers that set the system colors. Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



The pop-up control renders on top of any other controls. This is usually desirable for a menu. The pop-up control itself has logic that allows the offset from the parent control to be set, for example, by setting the Placement property to "Right". In the case of a menu, the menu's expansion is controlled by a binding to the parent control. For the menu to expand correctly you must keep the binding.



The root Grid panel for the menu item template uses the concept of size sharing, allowing each menu item to be the same width as all the other menu items in the menu. If you want to change this behavior, you need to modify the SharedSizeGroup property in XAML view because Expression Blend does not display this property in the Properties panel. In most cases, you do not need to modify the SharedSizeGroup because it allows the menu to resize properly. As a best practice, you can change the look of the menu item by drawing elements into the root Grid panel of the menu item template instead of rearranging the columns or their content.



Some of the menu item template triggers work with a property called Role. Role is set depending on the level of the menu item in the menu hierarchy. If you modify the menu item template, you might want to preserve the role-based triggers. The template that is used by the actual system MenuItem control is considerably more complex than SimpleMenuItem. The MenuItem control template uses a style to switch between different control templates based on the role of the menu item. SimpleMenuItem uses a single template to achieve this, and is thus easier to edit.



To edit the SimpleMenuItem template, click the Edit resource button next to the SimpleMenuItem style in the Resources panel. Then, in the editing mode of the style, right-click Style under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy.



For information about how to hook up a menu item to a Command, see the Menu Overview on MSDN.

Back to top Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleProgressBar

The progress bar is a simple control that an application can use to visually indicate the progress of a lengthy operation. By default, the progress bar window is filled from left to right, as the operation progresses. The control has a range and a current position. The SimpleProgressBar in Microsoft Expression Blend only supports a horizontally orientated

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 49 of 65

progress bar. The artboard view of a SimpleProgressBar control after setting the Value property to 10

Breaking down the control template The SimpleProgressBar control template consists of the following items: 

A Grid layout panel, which is used to hold the multiple child elements within the progress bar. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template.



A Border element named PART_Track, which is used to represent the bar area to be filled.



A Border element named PART_Indicator, which is used to represent the bar area that has already been filled. Caution: Do not rename any element whose name begins with "PART_" because these elements are referred to from the co that implements the control. Objects view: The basic parts (template) of a SimpleProgressBar control

Back to top

Property triggers used The SimpleProgressBar control template does not use triggers. All control behavior is implemented in code. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleProgressBar template: 

The Background property of the PART_Track element is set by using the PressedBrush.



The BorderBrush property of the PART_Track element is set by using the SolidBorderBrush.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 50 of 65



The Background property of the PART_Indicator element is set by using the MouseOverBrush.



The BorderBrush property of the PART_Indicator element is set by using the NormalBorderBrush.

Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



If you want, you can add triggers to the SimpleProgressBar template, or modify the PART_Indicator element to make the bar look more interesting, but do not rename any element whose name begins with "PART_" because these elements are referred to from the code that implements the control.



For information about how to hook up a progress bar to the progress of an operation, see the documentation about the ProgressBar Overview on MSDN.

Back to top

See also Concepts Try it: Customize the progress indicator of a SimpleProgressBar Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Customize the progress indicator of a SimpleProgressBar

It is easy to customize the appearance of a progress indicator in Microsoft Expression Blend, by using the SimpleProgressBar control template. Note that the SimpleProgressBar only supports a horizontally orientated progress bar.

To customize the progress indicator of a SimpleProgressBar 1. Draw a SimpleProgressBar on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the progress bar under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template to create a new template and save it in the document. For more information about creating a copy, see Create a resource.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 51 of 65

Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button , which above the element tree in the Interaction panel. To return to template editing mode for an existing template: under Objects and Timeline, right-click the element whose template you want to edit, point to Edit Control Parts (Temp and then click Edit Template. 3. Under Objects and Timeline, right-click the PART_Indicator element, point to Change Layout Type, and then click Grid. Use your mouse on the artboard, or modify the Width property under Layout in the Properties panel, to increase the width of the PART_Indicator. 4. Double-click the PART_Indicator element under Objects and Timeline to make it active. You can now add child elements to the PART_Indicator element because it is active and because it is a Grid panel instead of a Border. 5. In the Toolbox, double-click the Ellipse tool to add a circle into the PART_Indicator element and fill it. You can see your circle if you change its width. Modify the color of the circle under Brushes in the Properties panel. Adjust the size of the circle by using the properties under Layout in the Properties panel. Make sure that the HorizontalAlignment property is set to Stretch . 6. If you want to apply a bitmap effect, click the Show Advanced Properties button for the Appearance category of the Properties panel, click the drop-down arrow next to the BitmapEffect property, and then select an effect such as Outer Glow. 7. In order to see your progress bar in action, you can add code to the code-behind file for your document. For example, if your document is named Window1.xaml, the code-behind file is Window1.xaml.cs or Window1.xaml.vb, depending on the programming language you selected when you created your project. Under Objects and Timeline, click the Scope Up button to return to the editing scope of your document, and then give your progress bar a name such as "ProgressBar1" (square brackets around the name indicate that an element has not been named). 8. Open the code-behind file from the Project panel, and add the following code. For information about how to open a code-behind file, see Edit a code-behind file. C#

Copy Code

// Insert code required on object creation below this point. Duration duration = new Duration(System.TimeSpan.FromSeconds(10)); DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration); ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);

Visual Basic

Copy Code

' Insert code required on object creation below this point. Dim duration As New Duration(System.TimeSpan.FromSeconds(10)) Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration) ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)

9. Test your application (F5) to see the effects.

See also Concepts SimpleProgressBar Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleScrollBar

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 52 of 65

The scroll bar is a simple control that displays a marker on a bar in a position that depends on the Value property. You can set the orientation of the scroll bar in Microsoft Expression Blend by using the Orientation property under Layout in the Properties panel. You can set the Minimum, Maximum, and current Value of the scroll bar under Common Properties in the Properties panel. The current value must be between the minimum and maximum values. The Artboard view of a SimpleScrollBar control

Breaking down the control template The SimpleScrollBar control template consists of the following items: 

A Grid panel named GridRoot, which is used to hold the multiple child elements within the scroll bar. The Grid is also used because it makes it easier for you to add more elements to the template. The Grid is split into three rows where the top and bottom rows have maximum sizes set so that they will not expand beyond 18 pixels (or, device-independent units which are approximately 1/96 inch), and the middle row is set to star (*) size which means that it will expand when the window expands.



Two RepeatButton elements named DecreaseRepeat and IncreaseRepeat, which are used to move the position marker on the bar. The RepeatButton elements contain content that displays arrows. Again, a Grid is used as a root for each of these so that the user can easily edit the Path elements (named DecreaseArrow and IncreaseArrow) and add other content.



A Track element named PART_Track, which is used to display a Thumb element along a bar. The exposed parts of the bar double as RepeatButtons named PageDown and PageUp. Both of these use the SimpleScrollRepeatButtonStyle template, which can be edited separately. The IncreaseRepeatButton and DecreaseRepeatButton sections of the track use Command bindings so that they can call commands on the scroll bar class. The Thumb element uses the SimpleThumbStyle template, which can be edited separately.



A layout transform, which is used to display the slider bar in a horizontal orientation. This design makes it easier to edit than having to remember to edit two different templates. However, there are cases when the two orientations need to be sufficiently different that they require separate templates. In this case, you could use a Setter in the <Style> element in XAML view of Expression Blend to switch the templates based on orientation. You can find an example of this in the default template for the system ScrollBar control. Caution: Do not rename any element whose name begins with "PART_" because these elements are referred to from the co that implements the control. Objects view: The basic parts (template) of a SimpleScrollBar control

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 53 of 65

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the item under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleScrollBar template, when the Orientation property is Horizontal, multiple properties are changed to reflect the new orientation of the progress bar. Back to top

Brushes used The SimpleScrollBar template only uses one system brush resource for the Foreground property. Other brush resources are referenced in the templates that the SimpleScrollBar uses, such as the SimpleRepeatButton, SimpleThumbStyle, and SimpleScrollRepeatButtonStyle templates. You can modify the brushes that these templates use, to change the look of the SimpleScrollBar, or you can create new templates. Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



You can apply the SimpleScrollBar template to the scroll bar that is used in the template for a ScrollViewer.



Because the SimpleScrollBar template uses other templates, it can be tedious to walk through various levels of templates to get to the one that you want to change. To edit templates directly, you can click the Edit resource

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 54 of 65

button next to the template name in the Resources panel. Then, in the editing mode of the style, right-click Style under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy. Alternatively, it can be simpler to just delete the references to the subtemplates (reset the Style property under Miscellaneous in the Properties panel), and design your template at the first level. 

In order for your control to work, you need to keep the command bindings that fire commands on the control’s class and provide another way to make a contract between the control and the class that represents it. These bindings are present in the Command properties of the IncreaseRepeat, DecreaseRepeat, PageUp, and PageDown elements, and in the Orientation=Horizontal trigger.



If you want, you can add triggers to the SimpleScrollBar template, or modify the elements in the PART_Track element to make the bar look more interesting, but do not rename the PART_Track element or any of its child elements because these elements are referred to from the code that implements the control. The PART_Track element knows how to find its parts because they are placed under specific control headers: Track.IncreaseRepeatButton, Track.DecreaseRepeatButton, and Track.Thumb. The Thumb is also a specific Windows Presentation Foundation (WPF) control that knows how to be dragged.

Back to top

See also Concepts Try it: Customize the look of a SimpleScrollBar Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Customize the look of a SimpleScrollBar

It is easy to customize the appearance of a scroll bar in Microsoft Expression Blend, by using the SimpleScrollBar control template.

To customize the look of a SimpleScrollBar 1. Draw a SimpleScrollBar on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the scroll bar under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 55 of 65

3. Under Objects and Timeline, click the IncreaseRepeat element and set the Alpha attribute (identified by an A on the right side of the color palette) of the Background and BorderBrush properties to 0 percent under Brushes in the Properties panel. 4. Under Objects and Timeline, click the IncreaseArrow path element and then set the Stroke and Fill properties to a white Solid color brush . For the Stroke property, you will first need to remove the binding by clicking the Advanced property options button and then clicking Reset. 5. Right-click the IncreaseRepeat element under Objects and Timeline, point to Edit Control Parts (Template), and then do one of the following: 

If you selected Edit Template in step 2, click Edit Template now to edit the SimpleRepeatButton control template that is stored in SimpleStyles.xaml.



If you selected Edit a Copy in step 2, click Edit a Copy now to create a copy of the SimpleRepeatButton control template and store it in the same place as the template for the ScrollBar.

6. In the editing scope of the SimpleRepeatButton, delete the event triggers named IsMouseOver = True and IsPressed = True under Triggers in the Interaction panel by selecting each trigger and then clicking the Delete trigger button. 7. Return to the editing scope of the SimpleScrollBar template by doing one of the following things: 

If you are editing the Simple Styles.xaml document because you chose Edit Template in step 5, click the tab for your main document (for example, the Window1.xaml tab) at the top of the artboard. Right-click your ScrollBar element, point to Edit Control Parts (Template), and then click Edit Template to return to the ScrollBar template you were editing before.



If you are editing your main document, click the Scope up button

.

8. Repeat the previous step for the DecreaseRepeat element. 9. Activate the GridRoot element by double-clicking it under Objects and Timeline, then click the Border control in the Toolbox, and then draw a Border inside the GridRoot. Auto-size the new Border element by right-clicking it under Objects and Timeline, pointing to Auto Size, and then clicking Fill. 10. With the new Border element still selected under Objects and Timeline, change the CornerRadius property under Appearance in the Properties panel to 4,4,4,4. This will round the corners of the border. 11. Right-click the [Thumb] element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit a Copy. In the editing scope of the ScrollBarStyle, click the Rectangle element, and then change the Fill property to a dark gray Solid color brush , and set the left and right Margin properties to 2. 12. Test your application (F5) to see the effects.

See also Concepts SimpleScrollBar Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleScrollViewer

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 56 of 65

The scroll viewer is a content control that displays its content in a scrollable area. You can place content in a scroll viewer in Microsoft Expression Blend by double-clicking the scroll viewer and then drawing an element into it. If you want to place multiple elements into the scroll viewer, you need to first add in a layout panel such as a Grid or Canvas. A scroll viewer also can display text by default; you can edit the text by selecting the scroll viewer and then modifying the Content property under Common Properties in the Properties panel. To position elements in the scroll viewer but beyond the bounds of the scroll viewer, you need to manually set the positioning properties in the Advanced property options under Layout in the Properties panel. The vertical scroll bar is visible by default. To make the horizontal scroll bar appear, set the HorizontalScrollBarVisibility property to Visible. The artboard view of a SimpleScrollViewer control

Breaking down the control template The SimpleScrollViewer control template consists of the following items: 

A Grid layout panel, which is used to hold the multiple child elements within the scroll viewer. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template. The row and column of the Grid panel that holds the ScrollContentPresenter is set to star (*) size so that it expands as the scroll viewer is expanded. The row and column of the Grid panel that holds the scroll bars are set to auto-size according to the size required by the scroll bars.



A ScrollContentPresenter element, which is used to display the Content property of the scroll bar to which this template is applied. This element must be present to show the content of the scroll bar.



Two ScrollBar elements named PART_HorizontalScrollBar and PART_VerticalScrollBar, which are used to scroll through the content. The scroll bars use the SimpleScrollBarStyle template by default. Caution: Do not rename any element whose name begins with "PART_" because these elements are referred to from the co that implements the control. Objects view: The basic parts (template) of a SimpleScrollViewer control

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 57 of 65

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleScrollViewer template, when the IsMouseOver property becomes True, the background of the Border element changes color to the MouseOverBrush resource. Back to top

Brushes used The SimpleScrollViewer template does not use any brush resources in the SimpleStyles.xaml resource dictionary. Instead, the Background property is template-bound to the Background property of the slider control to which the template is applied. Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



The content of the SimpleScrollViewer is shown by a ScrollContentPresenter element that automatically binds its content to the Content property of the ScrollViewer to which this template is applied. The ScrollContentPresenter element must be present for the SimpleScrollViewer to show its content.



The visibility of the scroll bars is controlled by the scroll viewer control because the template binds to the properties that specify visibility. This binding allows the scroll bars to automatically hide or show as needed. You can set the default for scroll bar visibility either on the scroll viewer control, or in its template.



For the scroll viewer to work correctly, you need to keep all of the template bindings. Also note that the scroll bars named PART_HorizontalScrollBar and PART_VerticalScrollBar must not be changed because these names are used by the code in the control class.



You can apply existing scroll bar templates to the scroll bars in the scroll viewer template by right-clicking the scroll bars (named PART_HorizontalScrollBar and PART_VerticalScrollBar), pointing to Edit Control Parts (Template), pointing to Apply Resource, and then clicking the name of the scroll bar template. Note that the orientation of the template must match the orientation of the scroll bar.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 58 of 65

Back to top Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleSlider

The slider is a simple control that lets a user select from a range of values by moving a Thumb control. By default, the slider displays horizontally, but you can change it to vertical by setting the Orientation property under Common Properties in the Properties panel of Microsoft Expression Blend. To set the value of a slider, use the Minimum, Maximum, and Value properties. The artboard view of a SimpleSlider control

Breaking down the control template The SimpleSlider control template consists of the following items: 

A Grid panel named GridRoot, which is used to hold the multiple child elements within the slider. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template. The GridRoot is split into three rows: the top row holds the TopTick element, the middle row holds the Thumb element, and the bottom row holds the BottomTick element.



Two TickBar elements named TopTick and BottomTick, which are used to show ticks on the slider. By default, their Visibility property is set to Collapsed. The TickBar elements determine the number of tick marks to show based on the properties that are set on the slider control to which this template is applied. The TickBar elements do not provide an editable template, but you can set the brush they use to show the tick mark by setting the Foreground property on the slider control (this TickBar is template-bound to the Foreground property of the slider control).



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the button control to which this template is applied.



A Track element named PART_Track, which is used to display a Thumb element along a bar. The user can drag the Thumb element. By default, the Thumb element uses the SimpleThumbStyle template, which you can edit.



Two RepeatButton elements, which are contained within the PART_Track element and which allow the user to click either side of the thumb to make larger changes to the slider value. You can specify the step value for these changes in the LargeChange property of the slider (not the template). The step value that is specified by the SmallChange property is used when the user moves the thumb by using the arrow keys.



A layout transform, which is used to display the slider in a horizontal orientation. This design makes it easier to edit, so that you don't have to remember to edit two different templates. However there are cases when the two orientations need to be sufficiently different that they require separate templates. In this case, you could use a Setter in the <Style> element in XAML view in Expression Blend to switch the templates based on orientation. An example of this can be found in the default template for the system Slider control. Caution:

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 59 of 65

Do not rename any element whose name begins with "PART_" because these elements are referred to from the co that implements the control. Objects view: The basic parts (template) of a SimpleSlider control

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleSlider template, triggers are used to make the TickBar elements appear based on the TickPlacement property. This sets visibility on the TopTick and BottomTick elements. Horizontal and Vertical orientation are also configured in the triggers of the SimpleSlider template. This applies a layout transform on the slider that rotates it 90 degrees. Because the track automatically orientates itself, it is forced back so that it won't be rotated twice. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleSlider template: 

The Background property is set by using the LightBrush when no trigger is active, and is set by using the DisabledBackgroundBrush when IsEnabled is False.



The BorderBrush property is set by using the NormalBorderBrush when no trigger is active, and is set by using the DisabledBorderBrush when IsEnabled is False.



The Foreground property of the TopTick element is set by using the GlyphBrush.



The Fill property of the SimpleThumb template is set by using the NormalBrush, and the Stroke property is set by using the NormalBorderBrush.

Back to top

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 60 of 65

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



If you want, you can add triggers to the SimpleSlider template, or modify the PART_Track element to make the slider look more interesting, but do not rename any element whose name begins with "PART_" because these elements are referred to from the code that implements the control. The Thumb and repeat buttons need to be placed in the correct elements within Track. The track control knows how to place the Thumb element based on the Slider value. The repeat buttons use Command bindings to cause the value of the slider to increase or decrease.



When you edit the template of SimpelSlider, you can force the TickBar elements to appear by using the Triggers area of the Interaction panel to select the appropriate trigger. For example, in the SimpleSlider template, when TickPlacement is set to Both, both TickBar elements are shown by setting their Visibility property to Visible.

Back to top

See also Concepts Try it: Customize the Thumb element of a SimpleSlider Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Customize the Thumb element of a SimpleSlider

It is easy to customize the appearance of a Thumb control in Microsoft Expression Blend, by using the SimpleSlider control template.

To customize the Thumb element of a SimpleSlider 1. Draw a SimpleSlider on the artboard in Expression Blend. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click the slider under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up button above the element tree in the Interaction panel.

, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 61 of 65

template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 3. Right-click the [Thumb] element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit a Copy. 4. By default, the Thumb template contains a Grid that has an Ellipse. Delete the Ellipse element. 5. Double-click the Grid element under Objects and Timeline so that you can add child elements to it. 6. Draw a path into the Grid element by using the Pen tool the Direct Selection tool

in the Toolbox. You can modify the path by using

to adjust points on the path.

Tip: To zoom in on the artboard, you can use the Zoom text box at the bottom of the artboard, or you can the scroll button on your mouse while holding down the CTRL key. Tip: As an alternative to drawing a path element by using the Pen tool, you can use an art resource that you import fro Microsoft Expression Design 2, or an image file that you add to your project. 7. Test your application (F5) to see the effects.

See also Concepts SimpleSlider Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. SimpleTabControl and SimpleTabItem

The tab control is an items control that displays content in tabs. Typically, the child elements of a tab control are tab items, which are headered content controls, each of which can have a header element and a content element. You can place items in a tab control in Microsoft Expression Blend by right-clicking the tab control under Objects and Timeline, and then clicking Add SimpleTabItem to add individual items to the collection, or by clicking Bind ItemsSource to Data to generate the collection of tab item elements from a data source. . You can edit the text of the tab item by right-clicking it under Objects and Timeline, and then clicking Edit Text, or you can make the tab item active by double-clicking it and drawing a control into it. The artboard view of a SimpleTabControl control after two SimpleTabItems are added

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 62 of 65

Breaking down the control template The SimpleTabControl control template consists of the following items: 

A Grid layout panel, which is used to hold the multiple child elements within the tab control. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template. The top row of the Grid uses auto-sizing so that it changes height with the size of the biggest tab item. The bottom row uses star (*) sizing so that it takes up the remaining space to display the content of the tab item (the PART_SelectedContentHost).



A TabPanel element named HeaderPanel, which is a custom layout panel that knows how to organize tab items.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the tab control to which this template is applied.



A ContentPresenter element named PART_SelectedContentHost, which is used to display the Content property of the tab control to which this template is applied.

The SimpleTabItem control template consists of the following items: 

A Grid layout panel, which is used to hold the multiple child elements within the tab control. The Grid is also used because it makes it easier for an application UI designer to add more elements to the template. This Grid panel uses the concept of size sharing, allowing each tab item to be the same width as all of the other tab items in the tab control.



A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the tab control to which this template is applied.



A ContentPresenter element named ContentSite, which is bound to the Header property of the tab item to which this template is applied. The binding is set in the ContentSource property of the ContentSite element. Objects view: The basic parts (template) of a SimpleTabControl control (on the left) and a SimpleTabItem control (on the right)

Back to top

Property triggers used Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the template for the tab item, the trigger for IsSelected sets the ZIndex property on the tab item, which forces it to the front. For this reason, this trigger needs to be kept if the tab item is to work correctly. The IsSelected

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 63 of 65

trigger also sets a thicker BorderThickness and changes the Background color to show that the item is selected. Back to top

Brushes used The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleTabControl and SimpleTabItem templates: 

The Background property of the tab control is set by using the WindowBackgroundBrush when no trigger is active.



The BorderBrush property of the tab control is set by using the SolidBorderBrush when no trigger is active, and is set by using the DisabledBorderBrush when IsEnabled is False.



The Foreground property of the tab control is set by using the DisabledForegroundBrush when IsEnabled is False.



The Background property of the Border element of the tab item is set by using the LightBrush when no trigger is active, is set by using the WindowBackgroundBrush when IsSelected is True, and is set by using the DisabledBackgroundBrush when IsEnabled is False.



The BorderBrush property of the Border element of the tab item is set by using the SolidBorderBrush, and is set by using the DisabledBorderBrush when IsEnabled is False.



The Foreground property of the tab item is set by using the DisabledForegroundBrush when IsEnabled is False.

Additionally, the templates use bindings to system colors, which allow the controls to use the system defaults. In many cases, you may want to change these brushes so you can create a unique design. You can do this by editing the triggers that set the system colors. Back to top

Best practices and design guidelines 

In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.



The TabPanel element named HeaderPanel in the template is a specific layout panel used for TabControl. A TabPanel knows how to lay out tab items in multiple rows, and how to layer them when a tab item is selected. You can use a different layout container for the HeaderPanel, but you need to set its IsItemsHost property to True.



To edit the SimpleTabItem template, click the Edit resource button next to the SimpleTabItem style in the Resources panel. Then, in the editing mode of the style, right-click Style under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy.



The control template for the system TabControl is considerably more complex than the SimpleTabControl. It allows the TabPanel to be docked in different directions based on the Orientation property of the TabControl. The SimpleTabControl ignores the Orientation property for simplicity, but if you want the TabPanel to be placed in a different location you can edit the grid rows and columns.



The ContentPresenter element that is named PART_SelectedContentHost should not be renamed because the control’s class knows to look for this name as the place to show the tab item.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 64 of 65

Back to top

See also Concepts Try it: Customize the SimpleTabItem using a bitmap effect Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Customize the SimpleTabItem using a bitmap effect

Using the SimpleTabItem template makes it easy to customize the appearance of a tab control.

To add a bitmap effect to the SimpleTabItem 1. Draw a SimpleTabControl on the artboard. The SimpleTabControl includes two SimpleTabItem templates by default. Tip: The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library After you select a simple style control from the list, you can draw it on the artboard. 2. Right-click one of the tab items under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource. Tip: To exit the template-editing mode and return to the scope of your document: click the Scope up above the element tree in the Interaction panel.

button, which

To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w template you want to edit, point to Edit Control Parts (Template), and then click Edit Template. 3. In the editing scope of the control template, select the Border element under Objects and Timeline, and then in the advanced section of the Appearance category of the Properties panel, click the drop-down arrow beside the BitmapEffect property, and click Bevel. By default, the BevelWidth property is 5. 4. In the Triggers panel, select the IsPressed state to turn on recording for the trigger. In the Properties panel, click the drop-down arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth property to 25. A new line appears under Properties when active under Triggers, reflecting the property change that will occur when the mouse moves clicks the tab item. 5. Click the Scope Up

button to return to the editing scope of your document.

6. To apply the custom template to the other tab item in your tab control, right-click the other tab item under Objects and Timeline, point to Edit Control Parts (Template), point to Apply Resource, and then click the name of your custom template.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009

Styles and templates

Page 65 of 65

7. Test your application (F5) to see the effects.

See also Concepts SimpleTabControl and SimpleTabItem Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.

file://C:\Windows\Temp\~hhD0B.htm

6/16/2009