Modify the appearance of a system control in different states
.png "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.
To modify the appearance of a button in different states
Create a reusable template for a system control such as the Button
.png "Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.10).png")
control.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.
.png "Dd185522.5bb586ea-6adc-4672-b316-0fab8215ff8c(en-us,Expression.10).png")
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).
.png "Dd185522.7740762c-1a9d-490f-898e-2886ac1cf541(en-us,Expression.10).png")
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.
.png "Dd185522.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(en-us,Expression.10).png")
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 selectedstate. 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.
.png "Dd185522.a95c671a-5639-40b9-83db-1e6b214330d5(en-us,Expression.10).png")
To change the size of the button when in the MouseOver state, click [Grid] under Objects and Timeline.
Tip
The Grid
.png "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.In the Properties panel, under Transform, click the Scale
.png "Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(en-us,Expression.10).png")
tab. 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 an orange bounding box. If you want to change a template-bound property, first click the Advanced property options
.png "Dd185522.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png")
button next to the property, and then click Reset..png "Dd185522.31f58be3-51bc-4806-af37-e32422465e8c(en-us,Expression.10).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 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
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 in system controls.
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
Concepts
Draw a control in your Silverlight 2 project
Modify the transition time between state changes in system controls