Export (0) Print
Expand All
Run
Expand Minimize

Storyboard

Silverlight

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

<Storyboard   ...>
  oneOrMoreChildTimelines
</Storyboard>

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.

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.

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

Community Additions

ADD
Show:
© 2014 Microsoft