Edit a control template
- To create a control template
- To edit the template of an object that is drawn on the artboard
- To edit a template resource
- To modify a 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 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
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 Themes and simple styles.
Control templates are saved as a style resource that you can apply to other controls of the same type.
You can configure
triggers 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. |
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 pre-styled, simple control which gives you total freedom over the
design of the template.
For more information, see 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:
|
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.
If the Edit Template option is enabled, then a template is already applied to this object. You can choose to edit this template . - 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.
- 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.
- Click OK to exit the dialog box and open the style for
editing.
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. - 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 under
Objects and Timeline.
This returns you to the editing scope of the document.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.
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.
|
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.
If the Edit Template option is disabled, then no template has been applied to the object. |
Expression Blend enters the editing scope for the template.
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.
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
Objects and Timeline.
This returns you to the editing scope of the document.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.