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

You can create interactivity in your application by defining a different visual appearance for each visual state that your UserControl control, Page control, or control template can be in, and then add code to switch between those states based on user interaction. You can modify the transition between two state combinations, even creating animations that will run when a state is first entered.

State groups

A state group contains any visual states that are part of the same logical category, and that cannot be displayed at the same time. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.

For example, if you were working with a UserControl control that represented a playing card, you might have a state group named "SideDisplayed" that included states that display the card face-up (FaceUp) and face-down (FaceDown). You might also have a state group named "MouseInteraction" that included states that change the appearance of the card when the pointer is over the card (MouseOver), and when the card is clicked (Click). A card can be face-up and have the pointer move across it at the same time, so those states are in different state groups. However, the card cannot be face-up and face-down at the same time, so those two states can be in the same state group.

State groups and states of a playing card

For more information, see Define different visual states and transition times for a user control (Blend for Visual Studio).

States

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button , or select Base in the States panel. If you want to change the appearance of a state in one state group while also viewing the control in the state of another state group, you can pin a preview of the second state while in recording mode for the first state.

For more information, see Define different visual states and transition times for a user control (Blend for Visual Studio).

To change between states, you can use the GoToState method, or you can write code in an event handler.

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 the transitions that occur between specific combinations of states.

For more information, see Modify the transition time between state changes (Blend for Visual Studio) and Define different visual states and transition times for a user control (Blend for Visual Studio).

If you want to create a smooth transition between states that modify layout properties that are discrete values (such as column or row numbers) or set automatically (such as width and height), you can use fluid layout.

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 doing one of the following:

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

• Click Select None (Ctrl+Shift+A) on the Edit menu and then click the desired visual state you want to apply the theme animation to.