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
Create a reusable template for a system control such as the Button control
.png "Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.40).png")
.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.
.png "Dd185522.5bb586ea-6adc-4672-b316-0fab8215ff8c(en-us,Expression.40).png")
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).
.png "Dd185522.7740762c-1a9d-490f-898e-2886ac1cf541(en-us,Expression.40).png")
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.
.png "Dd185522.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(en-us,Expression.40).png")
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.
.png "Dd185522.a95c671a-5639-40b9-83db-1e6b214330d5(en-us,Expression.40).png")
To change the size of the button when in the MouseOver state, click [Grid] in the Objects and Timeline panel.
Tip
The Grid
.png "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.In the Properties panel, under Transform, click the Scale tab
.png "Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(en-us,Expression.40).png")
. Change the X and Y values to 1.1.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.
Troubleshooting
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
.png "Dd185522.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.40).png")
next to the property, and then click Reset..png "Dd185522.31f58be3-51bc-4806-af37-e32422465e8c(en-us,Expression.40).png")
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
You can change the time it takes the button to expand when the mouse pointer moves over it. For more information, see Modify the transition time between state changes.
You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Add animation that will play after a change in state.
You can apply this template to another button in your project, or draw a new button that already has the template assigned. For more information, see Apply a style resource.
See also
Tasks
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.