Share via


Storyboard Object

Controls animations with a timeline, and provides object and property targeting information for its child animations.

XAML
<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>
Scripting
To create an object using scripting, see CreateFromXAML.

XAML Values

oneOrMoreChildTimelines One or more object elements that derive from Timeline. These can be one or more of the following: Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation, DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames. Object elements defined here become members of the collection held by the Children property, when accessed by scripting at runtime.

Properties

AutoReverse, BeginTime, Children, Duration, FillBehavior, Name, RepeatBehavior, SpeedRatio, Storyboard.TargetName, Storyboard.TargetProperty

Methods

Begin, Equals, FindName, GetHost, GetParent, GetValue, Pause, Resume, Seek, SetValue, Stop

Events

Completed

Remarks

In addition to starting a storyboard automatically when an object loads, you can use the interactive methods of the Storyboard object to start, pause, resume, and stop an animation. For more information, see Interactive Animations Overview.

A Storyboard is the only supported type of resource for the Resources property.

Examples

The following example shows how to use a Storyboard and an EventTrigger to make a rectangle that fades in and out of view after it is loaded.

XAML
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  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>

See Also

Animation Overview
Interactive Animations Overview