Export (0) Print
Expand All

Define different visual states and transition times for a user control

This page applies to Silverlight 2 projects only

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.

Dd185499.alert_note(en-us,Expression.10).gifNote:

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.

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

    Dd185499.alert_tip(en-us,Expression.10).gifTip:

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

  2. The States pane in the Interaction 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.10).png
  3. Under States, click the Add State Group Dd185499.46de5414-36ac-4603-9fd6-aa55fc2c8093(en-us,Expression.10).png button.

    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.10).png

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

  1. Next to the name of a state group under States, click the Add State Dd185499.1a937ec9-9a57-4cb9-9187-275e73c9fc8b(en-us,Expression.10).png button.

    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.10).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.10).png
    Dd185499.alert_tip(en-us,Expression.10).gifTip:

    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.10).png

  • To set the transition time for your user control to change between any two states in a state group, click inside the Default Transition Duration 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.10).png
  • To override the default transition time for specific transitions, click the Add Transition Dd185499.6023baa2-015d-4eb5-93d4-7c79f0d69e90(en-us,Expression.10).png button 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.10).png

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

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

Troubleshooting

Next steps

Community Additions

ADD
Show:
© 2014 Microsoft