Create or modify a template

  • 아티클

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.

The default templates of system controls use a dynamic theme that changes the appearance of controls depending on which version of Windows your application runs on. However, if you modify the template of a system control, your control will look the same across all versions.

For more information, see 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.

      [!참고]

      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.

      팁팁

      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.

    팁팁

    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 Blend for Visual Studio 2012 breadcrumb bar at the top of the artboard.

    Breadcrumb bar with template-editing mode selected

    JJ170272.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(ko-kr,VS.110).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 WPF(Windows Presentation Foundation) 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.

      주의 정보주의

      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 Define different visual states and transition times for a user control.

    • 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 JJ170272.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,VS.110).png in the Objects and Timeline panel. This returns you to the editing scope of the document.

    팁팁

    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.

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:

To edit an existing customized template

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

    JJ170272.5bb586ea-6adc-4672-b316-0fab8215ff8c(ko-kr,VS.110).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 options JJ170272.ac1bd7f6-f5e6-494c-bca7-7a57ab314eab(ko-kr,VS.110).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.

    [!참고]

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

    팁팁

    You can quickly bind a template from within template editing mode by clicking Advanced options next to the property in the Properties panel that you want to bind to and then clicking Template Binding.

    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.

    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.

    Blend enters the editing scope for the template.

참고 항목

작업

Create a control from existing objects

개념

Styling tips for common Silverlight controls

Styling tips for WPF Simple Styles