Apply a transition effect to a visual state change

After you have created a user control and defined state changes for that user control, you can quickly and easily add a transition effect by applying one of the built-in transition effects available in Blend for Visual Studio 2012.

To create the button used in the following procedure, see Create a reusable template to style a system control and Modify the appearance of a system control in different states.

To apply a transition effect to a user control

1. In the States panel, click the state that you want to apply the transition effect to, and then click Add transition . Click Transition effect, and then select the transition effect that you want from the TransitionEffect drop-down list.

   

2. In the Transition duration box, type the number of seconds that you want the transition effect to be displayed.

3. Save your work (CTRL+S), and then press F5 to build and test your application.

   Note

   You can also preview the transition directly in Blend by clicking Transition Preview .

Depending on the transition effect that you choose, you may have the option to modify additional properties. For example, if you choose the Slide In transition effect, you can select one of the following:

• LeftToRight

• RightToLeft

• TopToBottom

• BottomToTop

You can also apply an EasingFunction to the transition effect.

See Also

Tasks

Define different visual states and transition times for a user control

Import third-party or custom effects