Create or modify a template

  • Article

The appearance of a control is defined by the template that is applied to the control on the artboard. The template includes the objects that are contained within the control. For example, the control template for a TextBox contains a Border object named Bd, which in turn contains a ScrollViewer object named PART_ContentHost. The ScrollViewer object 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
Cc294908.5b3d19c3-460f-4cd1-8a35-262f8b3005b1(en-us,Expression.30).png

The default templates of system controls use a dynamic theme that changes the appearance of controls depending on whether your application runs on a Windows XP computer or on a Windows Vista computer. However, if you modify the template of a system control, your control will look the same on both Windows XP and Windows Vista.

For more information, see the "Themes" section in Styling a control that supports templates.

Control templates are saved as resources that you can apply to other controls of the same type.

To create a control template

  1. In the Objects and Timeline panel 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 Template.

    • Right-click the object and then point to Edit Template.

    • In the breadcrumb bar at the top of the artboard, click the name of the object.

  2. In the drop-down menu that appears, 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 object (whether it is the default template for the object, or a custom template previously created), click Edit a Copy.

      Note

      If the Edit Current option is enabled, a template is already applied to this object. You can alternatively choose to edit this template.

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

  3. Under Name (Key), do one of the following:

    • To create a new named style for the object, type a key name. This is the name by which other objects can reference the style, thus applying the template.

    • To create a style that will be used by all objects of this type, select Apply to all.

      Tip

      In the XAML for the style object that will be created, an attribute named TargetType will be set to the type of object for which you are creating the style.

      An x:Key attribute will be set only if you typed a key name (the first option in this step). The presence of an x:Key attribute allows the style to be applied only to objects that specify the style by the key name. The absence of an x:Key attribute makes the style apply to all objects of this type. For example, the style object in the following code example 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, and choose an option from the drop-down menu.

    • 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 in the drop-down menu or create a new one by clicking New.

  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 Edit resource button in the Resources panel.

  6. Notice the Microsoft Expression Blend breadcrumb bar at the top of the artboard.

    Breadcrumb bar with template-editing mode selected
    Cc294908.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(en-us,Expression.30).png

    By clicking the buttons on the breadcrumb bar, you can quickly move among 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.

  7. Modify your template by adding or rearranging child objects.

  8. You can change the appearance or behavior of your object based on the results of user interaction by doing one of the following:

    • If you are working in a Windows Presentation Foundation (WPF) project, select a trigger in the Triggers panel to turn on trigger recording, and then make changes to the objects in your template. If a trigger that you want does not exist, you can create one. For example, to create a trigger to handle the click of a Button object, click Add property trigger, set the trigger to IsPressed=True, select the new trigger, and then make changes.

      For more information about triggers, see Using triggers to define the behavior of a WPF control.

      For more information, see Styling tips for WPF Simple Styles.

      Warning

      Changing some aspects of the template of a control can break the functionality of the control.

      For guidance, see "Best practices" in Styling a control that supports templates.

    • If you are working in a Microsoft Silverlight project, select a state in the States panel to turn on state recording, and then make changes to the objects in your template. If the type of your object supports parts, you can assign the parts of the template to different objects. For example, you could import art as Image objects, and then convert the new objects into parts of the template. The states work with template parts to change the appearance of your object in response to user interaction.

      For more information, see Styling the parts of a Silverlight control template and Styling tips for common Silverlight controls.

    • To add additional interactivity to your object, you could create new states in the States panel, and then use the GoToStateAction behavior to change between states based on an event.

      For more information, see Defining different visual states for a control and Adding behaviors to objects.

    • You can write code that will run in response to an event. In the Events view of the Properties panel, double-click in the input field next to an event name to add an event handler method to the code-behind file of your document.

      For more information, see Writing code that will respond to events.

  9. To exit the editing scope of the style, click Return scope to Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png in the Objects and Timeline panel. This returns you to the editing scope of the document.

    Tip

    Notice that after you create or apply a style resource to an object, a green highlight appears in the Properties panel for the Style property to indicate that the object is now bound, or linked, to this style resource.

To edit an existing customized template

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

  • In the breadcrumb bar at the top of the artboard, click the third button.

    Cc294908.5bb586ea-6adc-4672-b316-0fab8215ff8c(en-us,Expression.30).png

  • In the Object menu, point to Edit Template, and then click Edit Current.

  • Right-click the object, point to Edit Template, and then click Edit Current.

  • In the Properties panel, click Advanced property options Cc294908.ac1bd7f6-f5e6-494c-bca7-7a57ab314eab(en-us,Expression.30).png next to the Style property (it should be highlighted in green since you've applied a style to this object previously), and then click Edit Resource on the shortcut menu. Once in the editing scope of the style, right-click the Style object in the Objects and Timeline panel, point to Edit Template, and then click Edit Current.

    Note

    If the Edit Current option is disabled, no template has been applied to the object.

    Expression Blend enters the editing scope for the template.

To open a template from the Resources panel

  1. 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 style.

  2. Once in the editing scope of the style, right-click the Style object in the Objects and Timeline panel, point to Edit Template, and then click Edit Current.

    Expression Blend enters the editing scope for the template.

See also

Tasks

Create a user control from existing objects

Concepts

Styling tips for common Silverlight controls

Styling tips for WPF Simple Styles