Storyboard
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Controls animations with a timeline, and provides object and property targeting information for its child animations.
<Storyboard ...>
oneOrMoreChildTimelines
</Storyboard>
XAML Values
Value |
Description |
|---|---|
oneOrMoreChildTimelines |
One or more of the following object elements that derive from Timeline: Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation, DoubleAnimationUsingKeyFrames, PointAnimation, or PointAnimationUsingKeyFrames. Object elements defined here become members of the Children collection when the Children property is accessed at run time. |
Methods
Begin, Equals, FindName (DependencyObject), GetHost, GetParent, GetValue, Pause (Storyboard), Resume, Seek, SetValue, Stop (Storyboard)
Properties
AutoReverse, BeginTime, Children (Storyboard), Duration (Timeline), FillBehavior, Name (DependencyObject), RepeatBehavior (Timeline), SpeedRatio, Storyboard.TargetName, Storyboard.TargetProperty
Remarks
You can use the interactive methods of the Storyboard object to start a storyboard automatically when an object loads or to start, pause, resume, and stop an animation.
A Storyboard is the only supported type of resource for the Resources property.
For more information on basic concepts, see Animation Overview. Note that the Animation Overview topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.
Example
The following example shows how to use a Storyboard and an EventTrigger to create a rectangle that fades in and out of view after it is loaded.
<Canvas
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>