Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.
6 out of 9 rated this helpful - Rate this topic

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

  NameDescription
Public methodSupported by Silverlight for Windows PhoneStoryboardInitializes a new instance of the Storyboard class.
Top
  NameDescription
Public propertySupported by Silverlight for Windows PhoneAutoReverseGets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. (Inherited from Timeline.)
Public propertySupported by Silverlight for Windows PhoneBeginTimeGets or sets the time at which this Timeline should begin. (Inherited from Timeline.)
Public propertySupported by Silverlight for Windows PhoneChildrenGets the collection of child Timeline objects.
Public propertySupported by Silverlight for Windows PhoneDispatcherGets the Dispatcher this object is associated with. (Inherited from DependencyObject.)
Public propertySupported by Silverlight for Windows PhoneDurationGets or sets the length of time for which this timeline plays, not counting repetitions. (Inherited from Timeline.)
Public propertySupported by Silverlight for Windows PhoneFillBehaviorGets or sets a value that specifies how the animation behaves after it reaches the end of its active period. (Inherited from Timeline.)
Public propertySupported by Silverlight for Windows PhoneRepeatBehaviorGets or sets the repeating behavior of this timeline. (Inherited from Timeline.)
Public propertySupported by Silverlight for Windows PhoneSpeedRatioGets or sets the rate, relative to its parent, at which time progresses for this Timeline. (Inherited from Timeline.)
Top
  NameDescription
Public attached propertySupported by Silverlight for Windows PhoneTargetNameGets or sets the name of the object to animate.
Public attached propertySupported by Silverlight for Windows PhoneTargetPropertyGets or sets the name of the property that should be animated.
Top
  NameDescription
Public methodSupported by Silverlight for Windows PhoneBeginInitiates the set of animations associated with the storyboard.
Public methodSupported by Silverlight for Windows PhoneCheckAccessDetermines whether the calling thread has access to this object. (Inherited from DependencyObject.)
Public methodSupported by Silverlight for Windows PhoneClearValueClears the local value of a dependency property. (Inherited from DependencyObject.)
Public methodSupported by Silverlight for Windows PhoneEquals(Object)Determines whether the specified Object is equal to the current Object. (Inherited from Object.)
Protected methodSupported by Silverlight for Windows PhoneFinalizeAllows an object to try to free resources and perform other cleanup operations before the Object is reclaimed by garbage collection. (Inherited from Object.)
Public methodSupported by Silverlight for Windows PhoneGetAnimationBaseValueReturns any base value established for a Silverlight dependency property, which would apply in cases where an animation is not active. (Inherited from DependencyObject.)
Public methodSupported by Silverlight for Windows PhoneGetCurrentStateGets the clock state of the storyboard.
Public methodSupported by Silverlight for Windows PhoneGetCurrentTimeGets the current time of the storyboard.
Public methodSupported by Silverlight for Windows PhoneGetHashCodeServes as a hash function for a particular type. (Inherited from Object.)
Public methodStatic memberSupported by Silverlight for Windows PhoneGetTargetNameGets the TargetName of the specified Timeline object.
Public methodStatic memberSupported by Silverlight for Windows PhoneGetTargetPropertyGets the TargetProperty of the specified Timeline object.
Public methodSupported by Silverlight for Windows PhoneGetTypeGets the Type of the current instance. (Inherited from Object.)
Public methodSupported by Silverlight for Windows PhoneGetValueReturns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject.)
Protected methodSupported by Silverlight for Windows PhoneMemberwiseCloneCreates a shallow copy of the current Object. (Inherited from Object.)
Public methodSupported by Silverlight for Windows PhonePausePauses the animation clock associated with the storyboard.
Public methodSupported by Silverlight for Windows PhoneReadLocalValueReturns the local value of a dependency property, if a local value is set. (Inherited from DependencyObject.)
Public methodSupported by Silverlight for Windows PhoneResumeResumes the animation clock, or run-time state, associated with the storyboard.
Public methodSupported by Silverlight for Windows PhoneSeekMoves the storyboard to the specified animation position. The storyboard performs the requested seek when the next clock tick occurs.
Public methodSupported by Silverlight for Windows PhoneSeekAlignedToLastTickMoves the storyboard to the specified animation position immediately (synchronously).
Public methodStatic memberSupported by Silverlight for Windows PhoneSetTargetCauses the specified Timeline to target the specified object.
Public methodStatic memberSupported by Silverlight for Windows PhoneSetTargetNameCauses the specified Timeline to target the object with the specified name.
Public methodStatic memberSupported by Silverlight for Windows PhoneSetTargetPropertyCauses the specified Timeline to target the specified dependency property.
Public methodSupported by Silverlight for Windows PhoneSetValueSets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject.)
Public methodSupported by Silverlight for Windows PhoneSkipToFillAdvances the current time of the storyboard's clock to the end of its active period.
Public methodSupported by Silverlight for Windows PhoneStopStops the storyboard.
Public methodSupported by Silverlight for Windows PhoneToStringReturns a string that represents the current object. (Inherited from Object.)
Top
  NameDescription
Public eventSupported by Silverlight for Windows PhoneCompletedOccurs when the Storyboard object has completed playing. (Inherited from Timeline.)
Top
  NameDescription
Public fieldStatic memberSupported by Silverlight for Windows PhoneTargetNamePropertyIdentifies the TargetName attached property.
Public fieldStatic memberSupported by Silverlight for Windows PhoneTargetPropertyPropertyIdentifies the TargetProperty attached property.
Top

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.

NoteNote:

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

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="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>



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 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();
}


Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

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

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

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

Show:
© 2014 Microsoft. All rights reserved.