Storyboard Class (System.Windows.Media.Animation)

MSDN Library
Web Development
Silverlight
Silverlight 3
.NET Framework Class Library for Silverlight
System.Windows.Media.Animation Namespace

Storyboard Class

Storyboard Members
Storyboard Constructor
Storyboard Fields
Storyboard Methods
Storyboard Properties
Storyboard Events
Storyboard Attached Properties

Storyboard Class
This page is specific to:Microsoft Version:3.0 3.5Silverlight 34.0

.NET Framework Class Library for Silverlight

Storyboard Class

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

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

Syntax

C++

JScript

Copy to Clipboard Print

'Usage

Dim instance As Storyboard

'Declaration

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

XAML Object Element Usage

<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.

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

XAML

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

C++

JScript

Copy to Clipboard Print

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

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

Run this sample

C++

JScript

Copy to Clipboard Print

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

Inheritance Hierarchy

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

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.

Platforms

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

Reference

Storyboard Members

System.Windows.Media.Animation Namespace

Other Resources

Animation Overview