Share via


Edit a style

You can use the style of a control in Blend for Visual Studio 2012 project to specify triggers (Windows Presentation Foundation) or states (Microsoft Silverlight) 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 appearance of the control, and the triggers or states will affect how the control responds to property changes and events. For example, when a user moves the pointer 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 pointer moves over the button.

Editing the style of a button

6030b0d2-b1f3-491f-b2a7-e4914794925d

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 object on the artboard. For more information, see Create a style or Apply a style resource.

To edit the style of an object on the artboard

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

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

      Note

      If the Edit Current 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 default 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.

    Blend enters the editing scope for the style.

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

    Breadcrumb bar with template-editing mode selected

    eb50efd9-44c6-41f9-8f50-7d40f6c42e61

    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.

    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 in the Triggers panel.

    For an example of triggers that you can set, see Try it: Create a rollover button.

  2. To exit the editing scope of the style, click Return scope to55844eb3-ed98-4f20-aa66-a6f5b23eeb2b in the Objects and Timeline panel. 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.

See Also

Concepts

Styling tips for common Silverlight controls

Styling tips for WPF Simple Styles