Define different visual states and transition times for a user control (Blend for Visual Studio)
When you create your own user control, you can add custom states and state groups to define a different appearance for each state of your user control. For example, if your user control represents a playing card, you might want to have a FaceUp and FaceDown state.
To define a state group for your user control
If you do not already have a user control, you can create a new user control in your project.
For more information, see Create a new user control in your project (Blend for Visual Studio).
Tip
You can also define state groups for your main document (typically MainPage.xaml).
When in template-editing mode, the States panel shows the default appearance or states of the elements in your user control. You can select Base whenever you want to exit state-recording mode, such as when you want to add more objects to your document.
Important
The States panel will only show default appearance or states of your elements if there exists. For elements with no predefined states, for example, a rectangle element, you will have to create the states manually.
.png "JJ155151.2daa57d7-1466-43ca-86e8-960aaa384148(en-us,VS.110).png")
To create a state group , click Add state group
.png "JJ155151.15176e71-c966-415f-8fc6-18d8263cc140(en-us,VS.110).png")
button.A new state group is added, and the name is highlighted so that you can enter a new name.
.png "JJ155151.b3335795-6267-4f9d-8fa2-618c40ff2f32(en-us,VS.110).png")
You can now add states to the state group, or add more state groups.
To add states to a state group
Next to the name of a state group under States, click Add state
.png "JJ155151.d7b5fc2f-1470-48fc-bd81-b09bf261168f(en-us,VS.110).png")
.A new state is added to the state group, and the name is highlighted so that you can enter a new name.
.png "JJ155151.91a3aada-a295-40c0-bed8-c7bc572df7d9(en-us,VS.110).png")
When you create a VisualState, state recording is automatically turned on. Changes you make to the appearance of objects in your document will be recorded for the selected state.
.png "JJ155151.59996960-c66b-4be0-abc9-5509c79f3a5d(en-us,VS.110).png")
Tip
When you specify states and state groups, consider all the visual states that you want your user control to display, and then identify the states that you do not want to be displayed at the same time. Those states should be listed in the same state group, because only one state in a state group can be displayed at a time. For example, the following image shows a user control that represents a card in a card game. Two state groups are defined: MouseInteraction and SideDisplayed. The MouseInteraction state group includes states for Click, PointerOver, and Normal—states that are not displayed at the same time. The SideDisplayed state group includes states that display the card face up (FaceUp) and face down (FaceDown). A card can be face up and have the mouse pointer move over it at the same time, so those states are in different state groups.
.png "JJ155151.4fecf399-1962-4668-86e7-efe1a485cbc1(en-us,VS.110).png")
To set the transition time for your user control to change between states
To set the transition time for your user control to change between any two states in a state group, click inside the Default transition text box and enter a new time. This will set how long it takes for your user control to transition to or from any of the states in the state group.
.png "JJ155151.d1eabf30-62d2-47ae-a52b-453c702b9358(en-us,VS.110).png")
To override the default transition time for specific transitions, click Add transition
.png "JJ155151.2fe2c349-41aa-4cc0-b1d3-3ff7d5aed33d(en-us,VS.110).png")
next to a state, and then select the specific transition from the list that appears. The list item that is highlighted by the mouse pointer in the following image indicates "from the Click state to any other state" where the arrow corresponds to "to" and the star (*) corresponds to "any state.".png "JJ155151.1ed8d611-1ce5-4101-ad73-54aa166c4e9a(en-us,VS.110).png")
Click inside the Transition duration text box, and enter a new time.
.png "JJ155151.de14af5e-81fd-4f47-a668-41552a565714(en-us,VS.110).png")
Next steps
You can make your user control respond to mouse clicks. For more information, see Change states in response to user interaction.
You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Modify the appearance of a system control in different states (Blend for Visual Studio).