Edit a style

  • Article

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.

Editing the style of a button

Cc295021.6030b0d2-b1f3-491f-b2a7-e4914794925d(en-us,Expression.10).png

Style resources save you time by allowing you to define the appearance and behavior for a type of control, and then apply that style to multiple instances of that type of control on the artboard. When you modify a style resource, all of the controls on the artboard that use that style are automatically updated.

Tip

To edit a style, you must have already created the style as a resource or applied the style to an element on the artboard. For more information, see Create a style resource or Apply a style resource in this User Guide.

To edit the style of an object on the artboard

  1. On the artboard or under Objects and Timeline in the Interaction panel, select the object whose style you want to edit.

    • On the Object menu, point to Edit Style, and then click Edit Style.

      Note

      If the Edit Style option is unavailable, the object does not have a custom style applied to it. If you choose Edit a Copy, you will create a style resource that is a copy of the system style.

    • Under Miscellaneous in the Properties panel, click the Style property, and then click Edit Resource.

      Note

      If the Style property is empty, the object does not have a custom style applied to it.

    Expression Blend enters the editing scope for the style.

  2. Notice the new Expression Blend 2 breadcrumb bar at the top of the artboard.

    Breadcrumb bar with template-editing mode selected

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

To edit a style resource

  • Locate the name of the resource in the Resources panel, and then click the Edit resource button next to the resource.

    Expression Blend enters the editing scope for the style.

To modify a style

  1. While in the editing scope for a style, add your property and event triggers under Triggers in the Interaction panel. For an example of triggers that you can set, see Make an object into a button in this User Guide.

  2. To exit the editing scope of the style, click the Scope Up button Cc295021.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png under Objects and Timeline. This returns you to the editing scope of the document.

    Tip

    Notice that after you create a new style resource for an object or apply an existing 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 the style resource.