Share via


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

  1. 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.

    JJ155151.2daa57d7-1466-43ca-86e8-960aaa384148(en-us,VS.110).png

  2. To create a state group , click Add state group JJ155151.15176e71-c966-415f-8fc6-18d8263cc140(en-us,VS.110).png button.

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

    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

  1. Next to the name of a state group under States, click Add state 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.

    JJ155151.91a3aada-a295-40c0-bed8-c7bc572df7d9(en-us,VS.110).png

  2. 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.

    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.

    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.

    JJ155151.d1eabf30-62d2-47ae-a52b-453c702b9358(en-us,VS.110).png

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

    JJ155151.1ed8d611-1ce5-4101-ad73-54aa166c4e9a(en-us,VS.110).png

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

    JJ155151.de14af5e-81fd-4f47-a668-41552a565714(en-us,VS.110).png

Next steps