| -api-id | -api-type |
|---|---|
P:Microsoft.UI.Xaml.VisualState.Storyboard |
winrt property |
Gets or sets a Storyboard that defines state-specific property values and appearance of the control when it is using this visual state.
<VisualState>
singleStoryboard
</VisualState>- singleStoryboard
- singleStoryboardA single Storyboard object element, which declares the animation storyboard to use for this state.
The value of the Storyboard property is either null or a single Storyboard object. A Storyboard is like a container for animations; it can contain one or more animation definitions. Each such animation can target a specific dependency property on a specific named target. The named target must be an element in the control template that has a Name or x:Name attribute value defined in the template itself. The dependency property must be a property that exists in that object's object model, or an attached property. To target animations, you use the Storyboard.TargetName and Storyboard.TargetProperty attached properties. For more info on how to define animations with XAML syntax, and the types of animations you can use, see Storyboarded animations.
Animations that affect layout are potentially dependent animations, which can have performance consequences for users of your control when the control loads a VisualState.
This example creates a simple ControlTemplate for a Button that contains one Grid. The VisualState with the x:Name attribute value of "PointerOver" has a Storyboard that changes the color of the button content (a Grid) from green to red when the user puts the pointer over the Button. The VisualState with the x:Name attribute value of "Normal" is included so that when the user moves the pointer off the button, the Grid background returns to green.
[!code-xaml11]
Storyboard, Storyboarded animations, XAML Control templates, XAML control and app styling sample