Modify the appearance of a system control in different states

Modify the appearance of a system control in different states

This page applies to Silverlight 2 projects only

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 2 or any imported custom Silverlight 2 control that inherits from the Control class.

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

  2. If you are not already in the editing mode of a template, right-click a control on the artboard, point to Edit Control Parts (Template), and then click Edit Template. 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 under States in the Interaction panel. States are contained in state groups (such as CommonStates and FocusStates).


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

  4. Click MouseOver under States. 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. Under Objects and Timeline, 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] under Objects and Timeline.


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

  6. In the Properties panel, under Transform, click the Scale Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(en-us,Expression.10).png tab. 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 an orange bounding box. If you want to change a template-bound property, first click the Advanced property options Dd185522.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button 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 Create a new user control in your Silverlight 2 project, Define different visual states and transition times for a user control, and Change state in response to user interaction.

  • If you have trouble when you view your application in a browser, you might not have the correct Silverlight 2 runtime installed. For more information, see Install the Silverlight 2 tools and runtime.

Next steps

Community Additions

© 2016 Microsoft