Storyboard class

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

Inheritance

Object

  DependencyObject

    Timeline

      Storyboard

Syntax

public ref class Storyboard sealed : Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

XAML Values

oneOrMoreChildTimelines

One or more object elements for classes that derive from Timeline. This can be either another Storyboard or any of a number of animation types.

Attributes

ActivatableAttribute(NTDDI_WIN8)

ContentPropertyAttribute(Name=Children)

MarshalingBehaviorAttribute(Agile)

StaticAttribute(Windows.UI.Xaml.Media.Animation.IStoryboardStatics, NTDDI_WIN8)

ThreadingAttribute(Both)

VersionAttribute(NTDDI_WIN8)

WebHostHiddenAttribute()

Members

The Storyboard class has these types of members:

• Constructors
• Events
• Methods
• Attached Properties
• Properties

Constructors

The Storyboard class has these constructors.

Events

The Storyboard class has these events.

Methods

The Storyboard class has these methods. It also inherits methods from the Object class.

Attached Properties

The Storyboard class has these attached properties.

Properties

The Storyboard class has these properties.

Remarks

Storyboard is an important class in the concept of storyboarded animations. For more info on the concept, see Storyboarded animations.

Storyboard is used for these properties:

• VisualState.Storyboard
• VisualTransition.Storyboard
• BeginStoryboard.Storyboard

These properties aren't the only place where a Storyboard is defined. The typical way that a Storyboard is used for a storyboarded animation is that the Storyboard is defined in a Resources collection (either Application.Resources or FrameworkElement.Resources, or possibly as a resource in a file such as StandardStyles.xaml). If used in this way, you should always assign an x:Name attribute value to your Storyboard. You can then reference the name as a programming variable later in code-behind. You'll need this reference to actually run the animations that the Storyboard contains, by calling the Begin method on that Storyboard instance. Storyboard also has other control methods.

Storyboard inherits several properties from Timeline. These properties can be applied either to a Storyboard or to one of the animations within it (in the Children collection). There are pros and cons to setting Timeline properties on the main Storyboard instead of on each animation. For more info, see Storyboarded animations.

You also need a Storyboard in order to control the personality animations that you add to controls or UI, if you are using one of the theme animations. Theme animations don't have an innate trigger point, so you need to group theme animations in a Storyboard as the Children, and call Begin in your app's logic when you handle trigger events for each type of theme animation. For more info, see Quickstart: Animating your UI.

Storyboard XAML attached properties

Storyboard is the host service class for several XAML attached properties. Theses enable child animations under control by the Storyboard to each target separate target elements and target properties, while still following the same controlling timeline and triggering mechanism as the parent.

The XAML attached properties that are supported by Storyboard are:

• Storyboard.TargetName
• Storyboard.TargetProperty

Storyboard.TargetName is used to reference another element by its name. The element being referenced is the element/object where the animation should apply. This mechanism is part of the basic design of the animation system: it enables animation resources to be declared separately from UI declaration resources, and makes animation repurposing possible. For the value of Storyboard.TargetName on a particular animation, you specify the target element's Name or x:Name attribute value, which is a string. That named element should already exist in some other area of XAML markup.

Storyboard.TargetProperty targets a particular property of the element as named by Storyboard.TargetName. The value you provide for Storyboard.TargetProperty involves a concept known as a property path. For more information on how to specify a property path for an animation, see Remarks in SetTargetProperty or Storyboard.TargetProperty, or the PropertyPath syntax topic.

In order to support XAML processor access to the attached properties, and also to expose equivalent get and set operations to code, each XAML attached property has a pair of Get and Set accessor methods. For example, the GetTargetName and SetTargetName methods support and provide the equivalent code-only support for Storyboard.TargetName. Alternatively, you can use the dependency property system to get or set the value of the attached property. Call GetValue or SetValue, passing the arguments of the dependency property identifier to set, and a reference to the target object on which to get or set the value.

Examples

The following example shows how to use the Begin, Stop, Pause, and Resume methods to control the playback of a storyboard (animation). A set of buttons allow the user to call these methods.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="1" To="6" Duration="00:00:6" 
            Storyboard.TargetName="rectScaleTransform" 
            Storyboard.TargetProperty="ScaleY">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                            Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <!-- Button that begins animation. -->
    <Button Click="Animation_Begin"
         Margin="2" Content="Begin" />

    <!-- Button that pauses Animation. -->
    <Button Click="Animation_Pause"
         Margin="2" Content="Pause" />

    <!-- Button that resumes Animation. -->
    <Button Click="Animation_Resume"
         Margin="2" Content="Resume" />

    <!-- Button that stops Animation. Stopping the animation 
         returns the ellipse to its original location. -->
    <Button Click="Animation_Stop"
         Margin="2" Content="Stop" />

    <Rectangle Fill="Blue" Width="200" Height="30">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="rectScaleTransform" />
        </Rectangle.RenderTransform>
    </Rectangle>

</StackPanel>

The following example shows how to create a Storyboard using code.

Requirements

See also

Timeline

Quickstart: Animating your UI

Key-frame animations and easing function animations

Property path syntax

Storyboarded animations

Storyboarded animations for visual states

Attached properties overview

PropertyPath syntax

Build date: 12/4/2012