Modify the transition time between state changes in system controls
.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 transition time between states of system controls by modifying a copy of the control's template.
The following procedure uses a button, but you can customize any system control that comes with Microsoft Expression Blend 2 or any imported custom Silverlight 2 control that inherits from the Control class.
Tip
You can also modify the states and transition times of user controls. For more information, see Define different visual states and transition times for a user control.
To modify the transition time between states
Create a reusable template for a system control such as the Button
.png "Dd185517.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 the click Edit Template. Optionally select the object and then click Template in the breadcrumb bar.
.png "Dd185517.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 "Dd185517.7740762c-1a9d-490f-898e-2886ac1cf541(en-us,Expression.10).png")
Next to CommonStates a text box with the value of 0 seconds ("0s"). This is the default transition duration for all the transitions between the states in the state group. For example, it takes 0 seconds to transition from any state to the Normal state. You can change this default transition duration.
.png "Dd185517.f13475c2-d26f-4ad0-b62e-53bd1f532288(en-us,Expression.10).png")
This value is overridden with the value "0.1s" when transitioning to the MouseOver state and to the Pressed state. The star and the arrow indicate "from any state to this one."
.png "Dd185517.87bd6d25-da6b-4d90-a4a5-c492b8d148ff(en-us,Expression.10).png")
Click the Add Transition
.png "Dd185517.6023baa2-015d-4eb5-93d4-7c79f0d69e90(en-us,Expression.10).png")
button for the MouseOver state under States, and then click the MouseOver to Normal transition..png "Dd185517.fdeff432-52c4-46c2-a3f1-6ee49d86677b(en-us,Expression.10).png")
In the new line for the MouseOver to Normal transition, change the value in the text box from "0s" to "0.5s."
.png "Dd185517.ba5ad076-c4f4-4525-b8a6-ac3aab272194(en-us,Expression.10).png")
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 how slowly it transitions back to its previous state when the mouse leaves the button.
Troubleshooting
- If you have trouble viewing 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 appearance of your button in different states. For more information, see Modify the appearance of a system control in different states.
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.