Define different visual states and transition times for a user control

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.

Note

In a Silverlight project, when you modify the template of a system control, such as a button, default state groups and states are already present. You cannot add new state groups or add states.

To define a state group for your user control

1. If you do not already have a user control, you can create a new user control in your project, and open the XAML file for editing.

   For more information, see Create a new user control in your project.

   Tip

   You can also define state groups for your main document (typically Page.xaml).

2. The States panel shows the default appearance of the objects 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.

   

3. Under States, click Add state group .

   A new state group is added, and the name is highlighted so that you can enter a new name.

   

   You can now add states to the state group, or add more state groups.

To add states to a state group

1. Next to the name of a state group under States, click Add state .

   A new state is added to the state group, and the name is highlighted so that you can enter a new name.

   

2. Select the state to turn on state recording. Changes you make to the appearance of objects in your document will be recorded for the selected state.

   

   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, MouseOver, 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.

   

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.

  

• To override the default transition time for specific transitions, click Add transition  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."

  

  Click inside the Transition duration text box, and enter a new time.

  

Troubleshooting

• If you have trouble when you build your application, you might not have the correct version of Silverlight installed. For more information, see Install the Silverlight tools and runtime.

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 Add animation that will play after a change in state.

• You can see real-life scenarios that use states and state groups in the "How Do I?" video tutorials at the Expression Community website.