Share via


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.

    Dd185499.2daa57d7-1466-43ca-86e8-960aaa384148(en-us,Expression.30).png

  3. Under States, click Add state group Dd185499.15176e71-c966-415f-8fc6-18d8263cc140(en-us,Expression.30).png.

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

    Dd185499.b3335795-6267-4f9d-8fa2-618c40ff2f32(en-us,Expression.30).png

    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 Dd185499.d7b5fc2f-1470-48fc-bd81-b09bf261168f(en-us,Expression.30).png.

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

    Dd185499.91a3aada-a295-40c0-bed8-c7bc572df7d9(en-us,Expression.30).png

  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.

    Dd185499.59996960-c66b-4be0-abc9-5509c79f3a5d(en-us,Expression.30).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, 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.

    Dd185499.4fecf399-1962-4668-86e7-efe1a485cbc1(en-us,Expression.30).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.

    Dd185499.d1eabf30-62d2-47ae-a52b-453c702b9358(en-us,Expression.30).png

  • To override the default transition time for specific transitions, click Add transition Dd185499.2fe2c349-41aa-4cc0-b1d3-3ff7d5aed33d(en-us,Expression.30).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."

    Dd185499.1ed8d611-1ce5-4101-ad73-54aa166c4e9a(en-us,Expression.30).png

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

    Dd185499.de14af5e-81fd-4f47-a668-41552a565714(en-us,Expression.30).png

Troubleshooting

Next steps