Apply a transition effect to a visual state change

2017-10-10

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 Microsoft Expression Blend.

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

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.
In the Transition duration box, type the number of seconds that you want the transition effect to be displayed.
Save your work (CTRL+S), and then press F5 to build and test your application.

Note

You can also preview the transition directly in Expression 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.

Tip

To data-bind a transition effect or easing function, in the TransitionEffect or EasingFunction dialog box, click Advanced options, and then click Data Binding.

Built-in transition effects

The following images are examples of the different built-in transition effects available in Microsoft Expression Blend 4. The image on the left is the base image. The image in the middle represents that transition. The image on the right represents the image after the transition is complete.