Storyboard Class

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.

Inheritance Hierarchy

System.Object
  System.Windows.DependencyObject
    System.Windows.Media.Animation.Timeline
      System.Windows.Media.Animation.Storyboard

Namespace:  System.Windows.Media.Animation
Assembly:  System.Windows (in System.Windows.dll)

Syntax

'Declaration
<ContentPropertyAttribute("Children", True)> _
Public NotInheritable Class Storyboard _
    Inherits Timeline

[ContentPropertyAttribute("Children", true)]
public sealed class Storyboard : 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.

The Storyboard type exposes the following members.

Constructors

	Name	Description
	Storyboard	Initializes a new instance of the Storyboard class.

Top

Properties

	Name	Description
	AutoReverse	Gets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. (Inherited from Timeline.)
	BeginTime	Gets or sets the time at which this Timeline should begin. (Inherited from Timeline.)
	Children	Gets the collection of child Timeline objects.
	Dispatcher	Gets the Dispatcher this object is associated with. (Inherited from DependencyObject.)
	Duration	Gets or sets the length of time for which this timeline plays, not counting repetitions. (Inherited from Timeline.)
	FillBehavior	Gets or sets a value that specifies how the animation behaves after it reaches the end of its active period. (Inherited from Timeline.)
	RepeatBehavior	Gets or sets the repeating behavior of this timeline. (Inherited from Timeline.)
	SpeedRatio	Gets or sets the rate, relative to its parent, at which time progresses for this Timeline. (Inherited from Timeline.)

Top

Attached Properties

	Name	Description
	TargetName	Gets or sets the name of the object to animate.
	TargetProperty	Gets or sets the name of the property that should be animated.

Top

Methods

	Name	Description
	Begin	Initiates the set of animations associated with the storyboard.
	CheckAccess	Determines whether the calling thread has access to this object. (Inherited from DependencyObject.)
	ClearValue	Clears the local value of a dependency property. (Inherited from DependencyObject.)
	Equals(Object)	Determines whether the specified Object is equal to the current Object. (Inherited from Object.)
	Finalize	Allows an object to try to free resources and perform other cleanup operations before the Object is reclaimed by garbage collection. (Inherited from Object.)
	GetAnimationBaseValue	Returns any base value established for a Silverlight dependency property, which would apply in cases where an animation is not active. (Inherited from DependencyObject.)
	GetCurrentState	Gets the clock state of the storyboard.
	GetCurrentTime	Gets the current time of the storyboard.
	GetHashCode	Serves as a hash function for a particular type. (Inherited from Object.)
	GetTargetName	Gets the TargetName of the specified Timeline object.
	GetTargetProperty	Gets the TargetProperty of the specified Timeline object.
	GetType	Gets the Type of the current instance. (Inherited from Object.)
	GetValue	Returns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject.)
	MemberwiseClone	Creates a shallow copy of the current Object. (Inherited from Object.)
	Pause	Pauses the animation clock associated with the storyboard.
	ReadLocalValue	Returns the local value of a dependency property, if a local value is set. (Inherited from DependencyObject.)
	Resume	Resumes the animation clock, or run-time state, associated with the storyboard.
	Seek	Moves the storyboard to the specified animation position. The storyboard performs the requested seek when the next clock tick occurs.
	SeekAlignedToLastTick	Moves the storyboard to the specified animation position immediately (synchronously).
	SetTarget	Causes the specified Timeline to target the specified object.
	SetTargetName	Causes the specified Timeline to target the object with the specified name.
	SetTargetProperty	Causes the specified Timeline to target the specified dependency property.
	SetValue	Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject.)
	SkipToFill	Advances the current time of the storyboard's clock to the end of its active period.
	Stop	Stops the storyboard.
	ToString	Returns a string that represents the current object. (Inherited from Object.)

Top

Events

	Name	Description
	Completed	Occurs when the Storyboard object has completed playing. (Inherited from Timeline.)

Top

Fields

	Name	Description
	TargetNameProperty	Identifies the TargetName attached property.
	TargetPropertyProperty	Identifies the TargetProperty attached property.

Top

Remarks

You can think of a Storyboard as a container for other animation objects (for example, a DoubleAnimation) as well as other Storyboard objects. In other words, you can nest Storyboard objects within each other and specify BeginTime values for each Storyboard separately. Using nested storyboards can help you orchestrate elaborate animation sequences. Each child Storyboard waits until its parent Storyboard begins and then starts the countdown before it in turn begins.

You can use the interactive methods of the Storyboard object to start, pause, resume, and stop an animation. For more information, see Animation Overview.

Note:
Do not attempt to call Storyboard members (for example, Begin) within the constructor of the page. This will cause the animation to fail silently.

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.

Run this sample

<UserControl x:Class="interactive_animation.Page"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">
    <StackPanel>
        <TextBlock Margin="10" TextWrapping="Wrap">This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.</TextBlock>
        <Canvas>
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">

                    <!-- Animate the center point of the ellipse. -->
                    <PointAnimation Storyboard.TargetProperty="Center"
          Storyboard.TargetName="MyAnimatedEllipseGeometry"
          Duration="0:0:5"
          From="20,200"
          To="400,100"
          RepeatBehavior="Forever" />
                </Storyboard>
            </Canvas.Resources>

            <Path Fill="Blue">
                <Path.Data>
                    <!-- Describes an ellipse. -->
                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="20,20" RadiusX="15" RadiusY="15" />
                </Path.Data>
            </Path>

            <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
                <!-- Button that begins animation. -->
                <Button Click="Animation_Begin"
        Width="65" Height="30" Margin="2" Content="Begin" />

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

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

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

        </Canvas>
    </StackPanel>
</UserControl>

Private Sub Animation_Begin(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

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

Run this sample

Private Sub Create_And_Run_Animation(ByVal sender As Object, ByVal e As EventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myColor As Color = Color.FromArgb(255, 255, 0, 0)
    Dim myBrush As SolidColorBrush = New SolidColorBrush
    myBrush.Color = myColor
    myRectangle.Fill = myBrush
    ' Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle)
    ' Create a duration of 2 seconds.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimation1 As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimation2 As DoubleAnimation = New DoubleAnimation
    myDoubleAnimation1.Duration = duration
    myDoubleAnimation2.Duration = duration
    Dim sb As Storyboard = New Storyboard
    sb.Duration = duration
    sb.Children.Add(myDoubleAnimation1)
    sb.Children.Add(myDoubleAnimation2)
    Storyboard.SetTarget(myDoubleAnimation1, myRectangle)
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle)
    ' Set the attached properties of Canvas.Left and Canvas.Top
    ' to be the target properties of the two respective DoubleAnimations
    Storyboard.SetTargetProperty(myDoubleAnimation1, New PropertyPath("(Canvas.Left)"))
    Storyboard.SetTargetProperty(myDoubleAnimation2, New PropertyPath("(Canvas.Top)"))
    myDoubleAnimation1.To = 200
    myDoubleAnimation2.To = 200
    ' Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb)
    ' Begin the animation.
    sb.Begin()
End Sub

private void Create_And_Run_Animation(object sender, EventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    Color myColor = Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));

    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
    DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

    myDoubleAnimation1.Duration = duration;
    myDoubleAnimation2.Duration = duration;

    Storyboard sb = new Storyboard();
    sb.Duration = duration;

    sb.Children.Add(myDoubleAnimation1);
    sb.Children.Add(myDoubleAnimation2);

    Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle);

    // Set the attached properties of Canvas.Left and Canvas.Top
    // to be the target properties of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
    Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

    myDoubleAnimation1.To = 200;
    myDoubleAnimation2.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb);

    // Begin the animation.
    sb.Begin();
}

Version Information

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Thread Safety

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

See Also

Reference

System.Windows.Media.Animation Namespace

Other Resources

Animation Overview