Modify the appearance of a system control in different states

Controls look different depending on which state they are in. For example, a button changes color slightly when you move the mouse pointer over it. "MouseOver" is one of the states of a button. You can customize the appearance of different states of system controls.

The following procedure uses a button, but you can customize any system control that is included with Microsoft Expression Blend or any imported custom Microsoft Silverlight control that inherits from the Control class.

To modify the appearance of a button in different states

  1. Create a reusable template for a system control such as the Button control Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.40).png.

  2. If you are not already in the editing mode of a template, right-click a control on the artboard, point to Edit Template, and then click Edit Current. Optionally, select the object and then click Template in the breadcrumb bar.


  3. While in template-editing mode, the states of the button (such as Normal and MouseOver) are displayed in the States panel. States are contained in state groups (such as CommonStates and FocusStates).


    The parts of the template are displayed in the Objects and Timeline panel. It is the appearance of these parts that you can modify for a selected state.


  4. Click MouseOver in the States panel. Notice that a red circle appears at the top of the artboard to let you know that state recording is on. This means that any property changes you make will be recorded for the selected state. In the Objects and Timeline panel, the parts of the template that have properties set differently from when Base is selected are identified by red circles around the expander buttons.


  5. To change the size of the button when in the MouseOver state, click [Grid] in the Objects and Timeline panel.


    The Grid Dd185522.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(en-us,Expression.40).png is a layout panel that arranges child objects according to horizontal alignment, vertical alignment, and margins. For more information about layout panels, see Arranging objects and Using the Grid layout panel.

  6. In the Properties panel, under Transform, click the Scale tab Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(en-us,Expression.40).png. Change the X and Y values to 1.1.

  7. Save your work (CTRL+S), and then press F5 to build and test your application. After your application opens in a browser window, move your mouse pointer over the button to see it expand.


  • Some template parts have properties that are bound to values outside the template. For example, the Fill property of the Background part is template-bound to the Background property of the button. This means that when you draw a button that uses this template, the template will take on the value that you set on the button itself. Template binding makes it possible to design a customized control, but still enable some changes when you include the controls in your application.

    Bound properties are identified in the template by a yellow bounding box. If you want to change a template-bound property, first click Advanced options Dd185522.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.40).png next to the property, and then click Reset.


  • You cannot add custom states and state groups to the template of a system control. However, you can create a custom user control and then define custom states and add code to change states based on user interaction.

    For more information, see the following topics:

  • If you have trouble when you view your application in a browser, you might not have the correct Silverlight runtime installed.

    For more information, see Install the Silverlight tools and runtime.

Next steps

See also


Draw a control in your project
Modify the transition time between state changes
Create a reusable template to style a system control

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