Share via


States panel (XAML)

You can use the States panel to create interactivity between different states of your app by first creating a visual states group, and then defining a different appearance for each visual state.

A state group contains any visual states that are part of the same logical category. Different states from the same visual state group cannot be displayed at the same time. In other words, in a well-defined control, changes (animations or keyframes) in only one state from each state group can be applied at any given time.

By adding transitions, you can extend the amount of time that it takes to transition between states when a state change occurs. You can set the transition duration for an entire state group or for specific combinations of states. You can also use the States panel to create theme animations.

B1_1

Base   The normal (base) visual state of the object or app.

B1_2

EasingFunction   Use to change animation interpolation between keyframes.

B1_3

Add state   Use to create a new visual state.

B1_4

Add state group   Use to create a new visual state group.

B1_5

Turn on or off transition preview   Use to turn transition previews on or off.

B1_6

Visual state group   Expand or collapse to show or hide the visual states contained within the visual state group.

B1_7

Remove state group   Use to delete a selected visual state group.

B1_8

Turn off recording mode   Use to turn visual state recording off or on.

B1_9

Transition duration   Use to set the transition duration.

97fa60b9-0caf-4387-9225-b57510d32209

Pin the preview of this state   Use to pin the preview of the currently selected visual state.

B1_11

Delete state   Use to delete a visual state.

B1_12

Transition   Shows a transition of 0.6 seconds between two visual states.

B1_13

Add transition   Use to add a transition between two or more visual states.

See Also

Concepts

Design surface (XAML)

Assets panel (XAML)

Device panel (XAML)

Objects and Timeline panel (XAML)

Projects panel (XAML)

Properties panel (XAML)

Results panel (XAML)

Tools panel (XAML)