Apply a transition effect to a visual state change

Expression Studio 4.0

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

  1. In the States panel, click the state that you want to apply the transition effect to, and then click Add transition Ff723949.2fe2c349-41aa-4cc0-b1d3-3ff7d5aed33d(en-us,Expression.40).png. 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.


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

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 noteTip

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.

  • Blinds

    Blinds transition effect
  • Circle Reveal

    Circle reveal transition effect
  • Cloud Reveal

    Cloud reveal transition effect
  • Fade

    Fade transition effect
  • Pixelate

    Pixelate transition effect
  • Radial Blur

    Radial blur transition effect
  • Ripple

    Ripple transition effect
  • Slide In

    Slide in transition effect
  • Smooth Swirl Grid

    Smooth swirl grid transition effect
  • Wave

    Wave transition effect
  • Wipe

    Wipe transition effect

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.