Create a style

You can use the style of a control in Microsoft Expression Blend project to specify the properties that will be used as defaults by the control to which the style is applied. If you want to modify the structure of a control, modify the template instead using the procedures in Create or modify a template, Styling tips for common Silverlight controls, or Styling tips for WPF Simple Styles.

Because a style is a resource, you can save the style separately from the control, and then apply the style resource to other instances of the same control. For more information about resources, see Creating reusable resources.

To create a new style resource for a control

1. On the artboard or in the Objects and Timeline panel, select the object for which you want to create a style.

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

   • To modify the style that is currently in use by the selected object (a custom style that you created previously), click Edit Current. Expression Blend enters style-editing mode for the current style. You can skip ahead to step 6 or see Edit a style.

   • 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.

   • 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.

   The Create Style Resource dialog box appears.

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

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

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

     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 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 objects that specify the style by name. The absence of an x:Key attribute makes the style apply to all objects of this type. For example, the style object 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 or to an object in the current document, select This document, and then select an option from the associated drop-down menu.

   • To define the style in a resource dictionary file that can be reused in other projects, select Resource dictionary, or click New to create a new resource dictionary.

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. The resource includes a reference to a template that you can modify to change the structure of the control.

   For more information, see Create a reusable template to style a system control.

6. Notice the breadcrumb bar at the top of the artboard.

   Breadcrumb bar with style-editing mode selected

   

   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.

7. In the Properties panel, change the properties for which you want to provide new default values for your control.

8. If you are working in a Windows Presentation Foundation (WPF) project, add or modify property and event triggers in the Triggers panel.

   For an example of triggers to set, see Create a control from existing objects in this User Guide, or see the Try it! topics under Styling tips for WPF Simple Styles.

9. To exit the editing scope of the style, click Return scope to in the Objects and Timeline panel.

   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 panel for the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource.

See also

Tasks

Apply a style resource

Concepts

Styling a control that supports templates

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.