Export (0) Print
Expand All

Storyboard Class

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

Namespace: System.Windows.Media.Animation
Assembly: PresentationFramework (in presentationframework.dll)
XML Namespace:  http://schemas.microsoft.com/winfx/2006/xaml/presentation

public class Storyboard : ParallelTimeline
public class Storyboard extends ParallelTimeline
public class Storyboard extends ParallelTimeline
<Storyboard>
  Children
</Storyboard>

Interactively Controlling Storyboards

A storyboard can be paused, resumed, seeked, stopped, and removed if it is made controllable. 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 an Animation 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. See How to: Control a Storyboard After It Starts for an example.

Databinding and Animating Timelines

Most timeline properties can be databound or animated; however, because of the way the timing system works, databound or animated timelines do not behave like other databound or animated objects. To understand their behavior, it helps to understand what it means to activate a timeline.

When a timeline is activated, copies are made of the timeline and its child timelines. These copies are frozen (made unmodifiable) and Clock objects are created from them. It's these clocks that do the actual work of animating the targeted properties. If a timeline was databound or animated, a snapshot of its current values was made when its clock was created. Even though the original timeline might continue to change, its clock does not.

For a timeline to reflect databinding or animation changes, its clock must be regenerated. Clocks are not regenerated for you automatically. The following are several ways to apply timeline changes:

  • If the timeline is or belongs to a Storyboard, you can make it reflect changes by reapplying its storyboard using a BeginStoryboard or the Begin method. This has the side effect of also restarting the animation. In code, you can use the Seek method to advance the storyboard back to its previous position.

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

  • If you are working directly at the clock level, create and apply a new set of clocks and use them to replace the previous set of generated clocks.

For an example of a databound animation, see the Key Spline Animation Sample .

This example shows how to use a Storyboard to animate properties. To animate a property by using a Storyboard, create an animation for each property that you want to animate and also create a Storyboard to contain the animations.

The type of property determines the type of animation to use. For example, to animate a property that takes Double values, use a DoubleAnimation. The TargetName and TargetProperty attached properties specify the object and property to which the animation is applied.

To start a storyboard in Extensible Application Markup Language (XAML), use a BeginStoryboard action and an EventTrigger. The EventTrigger begins the BeginStoryboard action when the event that is specified by its RoutedEvent property occurs. The BeginStoryboard action starts the Storyboard.

The following example uses Storyboard objects to animate two Button controls. To make the first button change in size, its Width is animated. To make the second button change color, the Color property of the SolidColorBrush is used to set the Background of the button that is animated.

<!-- StoryboardExample.xaml
     Uses storyboards to animate properties. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Animate Properties with Storyboards">

  <Border Background="White">
    <StackPanel Margin="30" HorizontalAlignment="Left" MinWidth="500">

      <TextBlock>Storyboard Animation Example</TextBlock>
      
      <!-- The width of this button is animated. -->
      <Button Name="myWidthAnimatedButton"
        Height="30" Width="200" HorizontalAlignment="Left">
        A Button   
        <Button.Triggers>
        
          <!-- Animates the width of the first button 
               from 200 to 300. -->         
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard>           
                <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
                  Storyboard.TargetProperty="Width"
                  From="200" To="300" Duration="0:0:3" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>

      <!-- The color of the brush used to paint this button is animated. -->
      <Button Height="30" Width="200" 
        HorizontalAlignment="Left">Another Button
        <Button.Background>
          <SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />
        </Button.Background>
        <Button.Triggers>
        
        <!-- Animates the color of the brush used to paint 
             the second button from red to blue . -->             
          <EventTrigger RoutedEvent="Button.Click">    
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="myAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  From="Red" To="Blue" Duration="0:0:7" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
    </StackPanel>
  </Border>
</Page>

NoteNote:

Although animations can target both a FrameworkElement object, such as a Control or Panel, and a Freezable object, such as a Brush or Transform, only framework elements have a Name property. To assign a name to a freezable so that it can be targeted by an animation, use the x:Name Attribute, as the previous example shows.

If you use code, you must create a NameScope for a FrameworkElement and register the names of the objects to animate with that FrameworkElement. To start the animations in code, use a BeginStoryboard action with an EventTrigger. Optionally, you can use an event handler and the Begin method of Storyboard. The following example shows how to use the Begin method.

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";
            myStackPanel.Children.Add(myTextBlock);
            
            //
            // 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";

            // Set the Name of the button so that it can be referred
            // 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";
            
            // Register the name with the page to which the button belongs.
            this.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton);
            
            // Create a DoubleAnimation to animate the width of the button.
            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();
            myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation);
            
            // Animate the button width when it's clicked.
            myWidthAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
                {
                    myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton);
                };

            
            myStackPanel.Children.Add(myWidthAnimatedButton);

            //
            // 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
            // have a Name property to set. Instead, you just
            // register a name for the SolidColorBrush with
            // the page where it's used.
            this.RegisterName("myAnimatedBrush", myBackgroundBrush);
            
            // Use the brush to paint the background of the button.
            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();
            myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation);

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

          
            myStackPanel.Children.Add(myColorAnimatedButton);
            this.Content = myStackPanel;

        }
    }
}

For the complete sample, see Animate a Property with Storyboards 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: Apply a Local (Non-Storyboard) Animation to a Property and How to: Animate a Property by Using an AnimationClock.

More Code

How to: Trigger an Animation When a Property Value Changes

This example shows how to use a Trigger to start a Storyboard when a property value changes. You can use a Trigger inside a Style, ControlTemplate, or DataTemplate.

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 Triggers to Control an Animation 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 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.

System.Object
   System.Windows.Threading.DispatcherObject
     System.Windows.DependencyObject
       System.Windows.Freezable
         System.Windows.Media.Animation.Animatable
           System.Windows.Media.Animation.Timeline
             System.Windows.Media.Animation.TimelineGroup
               System.Windows.Media.Animation.ParallelTimeline
                System.Windows.Media.Animation.Storyboard

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

Windows 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

.NET Framework

Supported in: 3.0

Community Additions

ADD
Show:
© 2014 Microsoft