Create or edit a control template
.png "This page applies to WPF and Silverlight 2")
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
.png "Cc294908.5b3d19c3-460f-4cd1-8a35-262f8b3005b1(en-us,Expression.10).png")
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.
Warning
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
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).
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 edit this template .
The Create Style Resource dialog box appears. This is because control templates are stored in a style resource.
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 type of 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:Key attribute only allows the style to be applied to elements that specify the style by the key name. The absence of an x:Key attribute makes the style apply to all elements of this type. For example, the style element below will not be applied to all buttons on the artboard.
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...
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.
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.
Notice the new Expression Blend 2 breadcrumb bar at the top of the artboard.
Breadcrumb bar with template-editing mode selected
.png "Cc294908.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(en-us,Expression.10).png")
By clicking the buttons on the breadcrumb bar, you can quickly move between 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.
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.
To exit the editing scope of the style, click the Scope Up button
.png "Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png")
under Objects and Timeline. This returns you to the editing scope of the document.Tip
Notice that once you create or apply a style resource to an object, a green highlight appears in the Properties panel for the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource.
.gif "Cc294908.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif")
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
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.
To exit the editing scope of the template, click the Scope Up button
under Objectsand 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 panel for the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource.
Back to top