Gets or sets a Storyboard that defines state-specific property values and appearance of the control when it is using this visual state.
A 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. For more info, see Storyboarded animations for visual states.
This example creates a simple ControlTemplate for a Button that contains one Grid. The VisualState with the x:Name 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 value of "Normal" is included so that when the user moves the pointer off the button, the Grid background returns to green.
<ControlTemplate TargetType="Button"> <Grid > <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <!--Take one half second to transition to the PointerOver state.--> <VisualTransition To="PointerOver" GeneratedDuration="0:0:0.5"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal" /> <!--Change the SolidColorBrush, ButtonBrush, to red when the Pointer is over the button.--> <VisualState x:Name="PointerOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="ButtonBrush" Storyboard.TargetProperty="Color" To="Red" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.Background> <SolidColorBrush x:Name="ButtonBrush" Color="Green"/> </Grid.Background> </Grid> </ControlTemplate>
Minimum supported client
Minimum supported server
|Windows Server 2012|
- Storyboarded animations
- Storyboarded animations for visual states
- Quickstart: Control templates
- XAML control and app styling sample
Build date: 11/16/2013