States panel (XAML)

You can use the States panel to create interactivity between different states of your app by first creating a visual states group, and then defining a different appearance for each visual state.

A state group contains any visual states that are part of the same logical category. Different states from the same visual state group cannot be displayed at the same time. In other words, in a well-defined control, changes (animations or keyframes) in only one state from each state group can be applied at any given time.

By adding transitions, you can extend the amount of time that it takes to transition between states when a state change occurs. You can set the transition duration for an entire state group or for specific combinations of states. You can also use the States panel to create Windows 8 theme animations.

	Base   The normal (base) visual state of the object or app.
	EasingFunction   Use to change animation interpolation between keyframes.
	Add state   Use to create a new visual state.
	Add state group   Use to create a new visual state group.
	Turn on or off transition preview   Use to turn transition previews on or off.
	Visual state group   Expand or collapse to show or hide the visual states contained within the visual state group.
	Remove state group   Use to delete a selected visual state group.
	Turn off recording mode   Use to turn visual state recording off or on.
	Transition duration   Use to set the transition duration.
	Pin the preview of this state   Use to pin the preview of the currently selected visual state.
	Delete state   Use to delete a visual state.
	Transition   Shows a transition of 0.6 seconds between two visual states.
	Add transition   Use to add a transition between two or more visual states.

Application view states

You can create new view states for your application by adding a special visual state group called ApplicationViewStates in the States panel. This group will connect with application views and orientations in the Device panel. This group must be named ApplicationViewStates for it to work with the views in the Device panel.

When you create an ApplicationViewStates group, layout changes made in Blend for Visual Studio 2012 are stored as changes to the layout properties rather than changes to render transforms. The following image shows the States panel with an ApplicationViewStates group and the Device panel shows the individual application view states in the Visual state drop-down list.

You can also use the Visual State Manager to define different visual states. The code for handling the changes to the view state is included in the project templates, can be found in the following files for the corresponding language:

• LayoutAwarePage.h for a C++ project

• LayoutAwarePage.cs for a C# project

• LayoutAwarePage.vb for a VB project

Theme animations

Blend supports theme animations included in the Windows 8 Animation Library. You can design and preview visual states with theme animations from the Animation Library that are applied by using the Visual State Manager in Blend. The Theme Animations category is available in the Properties panel.

You can display the Theme Animations category by clicking Select None on the Edit menu or pressing Ctrl+Shift+A, and then doing one of the following:

• In the Objects and Timeline panel, select a storyboard.

• In the States panel, select a visual state.

See Also

Concepts

Artboard (XAML)

Assets panel (XAML)

Device panel (XAML)

Objects and Timeline panel (XAML)

Projects panel (XAML)

Properties panel (XAML)

Results panel (XAML)

Tools panel (XAML)