Apply a theme animation 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 theme animation by applying one of the built-in theme animations available in Blend for Visual Studio 2012.

To apply a theme animation to a user control

1. In the States panel, click the state to which you want to apply a theme animation and then click the Add theme animation  button in the Theme Animations window under the Properties panel.

   Warning

   If the Theme Animations category does not appear in the Properties panel when you click a visual state in the States panel, in the Edit menu, click Select None (Ctrl+Shift+A).

2. In the Theme Animations drop-down list, click the theme animation type you want to use.

   

3. In the Select Element dialog box, select the element that you want to target.

   

4. Click OK

   The theme animation is added to the Theme Animations category in the Properties panel where you can modify it. For example, you can change the target (TargetName), convert the animation to a resource, remove the animation, and so on.

   

5. 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 Pin the preview of this state.

See Also

Tasks

Create a reusable template to style a system control (Blend for Visual Studio)

Modify the appearance of a system control in different states (Blend for Visual Studio)

Concepts

Defining different visual states for a control (Blend for Visual Studio)