Gets or sets the Storyboard that runs when the transition occurs.
Exactly one Storyboard object element.
The Storyboard that occurs when the transition occurs.
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 must be 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.
If you have a value for Storyboard, you can choose to omit a value for GeneratedDuration. Instead, set specific Duration values on the animations in the Storyboard or the main Storyboard element within it. If you do set a GeneratedDuration value, it won't truncate or change any Storyboard with a Duration value; the total length of the transition is the longest Duration value that you've set in the animations for Storyboard, or the GeneratedDuration, whichever is longer.
You can define a VisualTransition such that it has a GeneratedDuration, but does not have a Storyboard value. This creates an implicit transition that can interpolate values that are different between two states. For more info, see GeneratedDuration.
This example creates a VisualTransition that specifies that when the user moves the mouse away from the control, the control's border changes to blue, then to yellow, then to black in 1.5 seconds.
<!--Take one and a half seconds to transition from the PointerOver state to the Normal state. Have the SolidColorBrush, BorderBrush, fade to blue, then to yellow, and then to black in that time.--> <VisualTransition From="PointerOver" To="Normal" GeneratedDuration="0:0:1.5"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="BorderBrush" FillBehavior="HoldEnd" > <ColorAnimationUsingKeyFrames.KeyFrames> <LinearColorKeyFrame Value="Blue" KeyTime="0:0:0.5" /> <LinearColorKeyFrame Value="Yellow" KeyTime="0:0:1" /> <LinearColorKeyFrame Value="Black" KeyTime="0:0:1.5" /> </ColorAnimationUsingKeyFrames.KeyFrames> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualTransition>
Minimum supported client
Minimum supported server
|Windows Server 2012|
Minimum supported phone
|Windows Phone 8.1 [Windows Runtime apps only]|
- Quickstart: Control templates
- Storyboarded animations
- Storyboarded animations for visual states