Create a style resource
.png "This page applies to WPF and Silverlight 2")
You can use the style of a control in Microsoft Expression Blend 2 project to specify triggers (WPF) or states (Silverlight 2) and properties that will be used as defaults by the control to which the style is applied. The properties (such as the background brush color) will affect the control's appearance, and the triggers or states will affect how the control responds to property changes and events. For example, when the user moves their mouse over the control, the IsMouseOver property changes from False to True and the MouseOver event fires. You can create a style for a button that causes the background color of the button to change when the mouse pointer moves over the button. If you want to modify the structure of a control, create a template instead using the procedures in Create or edit a control template.
Because a style is a resource, you can save the style separately from the button, and then apply the style resource to other button objects. For more information about resources, see Resources overview in this User Guide.
To create a new style resource for a control
On the artboard or under Objects and Timeline in the Interaction panel, select the object for which you want to create a style.
On the Object menu, point to Edit Style, and then do one of the following:
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.
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.
The Create Style Resource dialog box appears.
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 style.
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 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 style resource here. 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 "Cc294740.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.
Add your property and event triggers in the Interaction panel. For an example of triggers to set, see Make an object into a button in this User Guide, or see the Try it! topics under Simple styles.
To exit the editing scope of the style, click the Scope Up button
.png "Cc294740.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png")
under Objects and Timeline.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.