Export (0) Print
Expand All

Storyboard Class

Updated: July 2008

A container timeline that provides object and property targeting information for its child animations.

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

public class Storyboard : ParallelTimeline

Interactively Controlling Storyboards

A controllable storyboard can pause, resume, seek, stop, and be removed. To make a storyboard controllable in markup, you specify the Name property of the BeginStoryboard object that creates it; for an example, see How to: Use Event Triggers to Control a Storyboard After It Starts. To make a storyboard controllable in code, you must use the appropriate overload of the storyboard's Begin method and specify true to make it controllable. For an example, see How to: Control a Storyboard After It Starts.

Data Binding and Animating Timelines


When a timeline is activated, copies are made of the timeline and its child timelines. These copies are frozen (made read-only) and Clock objects are created from them. These clocks do the actual work of animating the targeted properties. If a timeline is data bound or animated, a snapshot of its current values is made when its clock is created. Even though the original timeline might continue to change, its clock does not.

For a timeline to reflect data binding or animation changes, its clock must be re-created. Clocks are not re-created for you automatically. The following are several ways to apply timeline changes:


  • If you applied an animation directly to a property using the BeginAnimation method, call the BeginAnimation method again and pass it the animation that has been modified.


For an example of a data bound animation, see Key Spline Animation Sample .





<!-- StoryboardExample.xaml
     Uses storyboards to animate properties. -->
  WindowTitle="Animate Properties with Storyboards">

  <Border Background="White">

      <TextBlock>Storyboard Animation Example</TextBlock>

      <Button Name="myWidthAnimatedButton"
        A Button   

          <!-- Animates the width of the first button 
               from 200 to 300. -->         
          <EventTrigger RoutedEvent="Button.Click">
                <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"

      <Button Height="30" Width="200" 
        HorizontalAlignment="Left">Another Button

             the second button from red to blue . -->             
          <EventTrigger RoutedEvent="Button.Click">    



using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.Animation.AnimatingWithStoryboards

    // Uses a storyboard to animate the properties 
    // of two buttons. 
    public class StoryboardExample : Page

        public StoryboardExample()
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Animate Properties using Storyboards";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.MinWidth = 500;
            myStackPanel.Margin = new Thickness(30);
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
            TextBlock myTextBlock = new TextBlock();
            myTextBlock.Text = "Storyboard Animation Example";

            // Create and animate the first button. 

            // Create a button.
            Button myWidthAnimatedButton = new Button();
            myWidthAnimatedButton.Height = 30;
            myWidthAnimatedButton.Width = 200;
            myWidthAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
            myWidthAnimatedButton.Content = "A Button";

            // to in the storyboard that's created later. 
            // The ID doesn't have to match the variable name; 
            // it can be any unique identifier.
            myWidthAnimatedButton.Name = "myWidthAnimatedButton";

            this.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton);

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 200;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));          

            // Configure the animation to target the button's Width property.
            Storyboard.SetTargetName(myDoubleAnimation, myWidthAnimatedButton.Name); 
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.WidthProperty));

            // Create a storyboard to contain the animation.
            Storyboard myWidthAnimatedButtonStoryboard = new Storyboard();

            // Animate the button width when it's clicked.
            myWidthAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)


            // Create and animate the second button. 

            // Create a second button.
            Button myColorAnimatedButton = new Button();
            myColorAnimatedButton.Height = 30;
            myColorAnimatedButton.Width = 200;
            myColorAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
            myColorAnimatedButton.Content = "Another Button";

            // Create a SolidColorBrush to paint the button's background.
            SolidColorBrush myBackgroundBrush = new SolidColorBrush();
            myBackgroundBrush.Color = Colors.Blue;

            // Because a Brush isn't a FrameworkElement, it doesn't 
            // register a name for the SolidColorBrush with 
            // the page where it's used. 
            this.RegisterName("myAnimatedBrush", myBackgroundBrush);

            myColorAnimatedButton.Background = myBackgroundBrush;

            // Create a ColorAnimation to animate the button's background.
            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Red;
            myColorAnimation.To = Colors.Blue;
            myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(7000));    

            // Configure the animation to target the brush's Color property.
            Storyboard.SetTargetName(myColorAnimation, "myAnimatedBrush");                        
            Storyboard.SetTargetProperty(myColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));    

            // Create a storyboard to contain the animation.
            Storyboard myColorAnimatedButtonStoryboard = new Storyboard();

            // Animate the button background color when it's clicked.
            myColorAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)

            this.Content = myStackPanel;


For the complete sample, see Property Animation Sample. For more information about animation and storyboards, see Animation Overview.

If you use code, you are not limited to using Storyboard objects in order to animate properties. For more information and examples, see How to: Animate a Property Without Using a Storyboard and How to: Animate a Property by Using an AnimationClock.

More Code

How to: Control a Storyboard After It Starts This example shows how to use code to control a Storyboard after it has started. To control a storyboard in XAML, use Trigger and TriggerAction objects; for an example, see How to: Use Event Triggers to Control a Storyboard After It Starts.
How to: Use Event Triggers to Control a Storyboard After It Starts This example shows how to control a Storyboard after it starts. To start a Storyboard by using XAML, use BeginStoryboard, which distributes the animations to the objects and properties they animate and then starts the storyboard. If you give BeginStoryboard a name by specifying its Name property, you make it a controllable storyboard. You can then interactively control the storyboard after it starts.




.NET Framework

Supported in: 3.5, 3.0

Community Additions

© 2014 Microsoft