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

Events

Completed (Storyboard)

Managed Equivalent

Storyboard

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>