Storyboard 类 (System.Windows.Media.Animation)

.NET Framework 类库

Storyboard 类

更新： 2008 年 7 月

为容器的子动画提供对象和属性目标信息的容器时间线。

命名空间： System.Windows.Media.Animation
程序集： PresentationFramework（在 PresentationFramework.dll 中）
用于 XAML 的 XMLNS：http://schemas.microsoft.com/winfx/xaml/presentation

语法

Visual Basic（声明）

Public Class Storyboard _
    Inherits ParallelTimeline

Visual Basic (用法)

Dim instance As Storyboard

public class Storyboard : ParallelTimeline

Visual C++

public ref class Storyboard : public ParallelTimeline

public class Storyboard extends ParallelTimeline

JScript

public class Storyboard extends ParallelTimeline

XAML 对象元素用法

<Storyboard>
  Children
</Storyboard>

备注

以交互方式控制演示图板

可以对可控演示图板执行暂停、继续、定位、停止和移除操作。若要使演示图板在标记中可以控制，请指定创建它的 BeginStoryboard 对象的 Name 属性；有关示例，请参见如何：在演示图板启动之后使用事件触发器来控制演示图板。若要使演示图板在代码中可以控制，必须使用该演示图板的 Begin 方法的适当重载并指定 true 使之可以控制。有关示例，请参见如何：在演示图板启动后对其进行控制。

对时间线进行数据绑定和动画处理

大多数时间线属性都已进行数据绑定或动画处理；但由于计时系统的工作方式，经过数据绑定或动画处理的时间线的行为并不像其他经过数据绑定或动画处理的对象。了解激活时间线有何作用有助于了解它们的行为。

激活时间线时，将制作时间线及其子时间线的副本。系统将冻结这些副本（使它们成为只读副本），并从这些副本创建 Clock 对象。这些时钟执行对目标属性进行动画处理的实际工作。如果时间线已进行数据绑定或动画处理，则在创建其时钟时会制作其当前值的一个快照。即使原始时间线可能会继续变化，它的时钟也不会发生变化。

若要使时间线反映数据绑定或动画更改，必须重新创建其时钟。系统不会为您自动重新创建时钟。以下是应用时间线更改的几种方法：

如果时间线为 Storyboard 或属于它，您可以通过使用 BeginStoryboard 或 Begin 方法重新应用其演示图板，使它反映更改。这会带来副作用，即还会重新启动动画。在代码中，可以使用 Seek 方法将演示图板向前移回其上一位置。
如果使用 BeginAnimation 方法将动画直接应用于属性，请再次调用 BeginAnimation 方法并将修改后的动画传递给此方法。
如果直接在时钟级别操作，请创建并应用一组新的时钟，然后用它们来替换前面创建的一组时钟。

有关绑定有数据的动画的示例，请参见关键样条动画示例。

示例

此示例演示如何使用 Storyboard 对属性进行动画处理。若要使用 Storyboard 对属性进行动画处理，请为要进行动画处理的每个属性创建一个动画，另外创建一个 Storyboard 以包含动画。

属性的类型决定了要使用的动画的类型。例如，若要对采用 Double 值的属性进行动画处理，请使用 DoubleAnimation。TargetName 和 TargetProperty附加属性指定要对其应用动画的对象和属性。

若要启动可扩展应用程序标记语言 (XAML) 格式的演示图板，请使用 BeginStoryboard 操作和 EventTrigger。当 RoutedEvent 属性所指定的事件发生时，EventTrigger 将开始 BeginStoryboard 操作。BeginStoryboard 操作将启动 Storyboard。

下面的示例使用 Storyboard 对象对两个 Button 控件进行动画处理。为了使第一个按钮的大小发生变化，将对其 Width 进行动画处理。为了使第二个按钮的颜色发生变化，将使用 SolidColorBrush 的 Color 属性来设置动画处理的按钮的 Background。

XAML

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

说明：
虽然动画能够将 FrameworkElement 对象（如 Control 或 Panel）和 Freezable 对象（如 Brush 或 Transform）作为处理目标，但只有框架元素才具有 Name 属性。如上面的示例所示，若要为可冻结的对象指定一个名称以便动画能够将此对象作为处理目标，请使用 x:Name 属性。

如果使用代码，则必须为 FrameworkElement 创建 NameScope，并向该 FrameworkElement 注册要进行动画处理的对象的名称。若要在代码中启动动画，请将 BeginStoryboard 操作和 EventTrigger 一起使用。（可选）您可以使用事件处理程序和 Storyboard 的 Begin 方法。下面的示例演示如何使用 Begin 方法。

Visual Basic

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample


    ' Uses a storyboard to animate the properties
    ' of two buttons.
    Public Class StoryboardExample
        Inherits Page

        Private Dim WithEvents myWidthAnimatedButton As Button
        Private Dim WithEvents myColorAnimatedButton As Button        
        Private Dim myWidthAnimatedButtonStoryboard As Storyboard
        Private Dim myColorAnimatedButtonStoryboard As Storyboard


        Public Sub New()
            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Animate Properties using Storyboards"
            Dim myStackPanel As New StackPanel()
            myStackPanel.MinWidth = 500
            myStackPanel.Margin = New Thickness(30)
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Left
            Dim myTextBlock As New TextBlock()
            myTextBlock.Text = "Storyboard Animation Example"
            myStackPanel.Children.Add(myTextBlock)

            '
            ' Create and animate the first button.
            '

            ' Create a 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.
            Me.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton)

            ' Create a DoubleAnimation to animate the width of the button.
            Dim myDoubleAnimation As 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.
            myWidthAnimatedButtonStoryboard = New Storyboard()
            myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation)

            myStackPanel.Children.Add(myWidthAnimatedButton)

            '
            ' Create and animate the second button.
            '

            ' Create a second 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.
            Dim myBackgroundBrush As 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.
            Me.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.
            Dim myColorAnimation As 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.
            myColorAnimatedButtonStoryboard = New Storyboard()
            myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation)

            myStackPanel.Children.Add(myColorAnimatedButton)
            Me.Content = myStackPanel

        End Sub

        ' Start the animation when the button is clicked.
        Private Sub myWidthAnimatedButton_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myWidthAnimatedButton.Click

            myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton)

        End Sub        

        ' Start the animation when the button is clicked.
        Private Sub myColorAnimatedButton_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myColorAnimatedButton.Click

            myColorAnimatedButtonStoryboard.Begin(myColorAnimatedButton)

        End Sub           

    End Class
End Namespace

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;

        }
    }
}

有关完整示例，请参见属性动画示例。有关动画和演示图板的更多信息，请参见动画概述。

如果使用代码，则并非只能使用 Storyboard 对象对属性进行动画处理。有关更多信息和示例，请参见如何：在不使用演示图板的情况下对属性进行动画处理和如何：使用 AnimationClock 对属性进行动画处理。

.NET Framework

受以下版本支持：3.5、3.0

另请参见

参考

Storyboard 成员

System.Windows.Media.Animation 命名空间

其他资源

修订记录

日期	历史记录	原因
2008 年 7 月	增加了新成员：TargetProperty、Begin()()()、GetTarget(DependencyObject)、Pause()()()、Resume()()()、Seek(TimeSpan)、Seek(TimeSpan, TimeSeekOrigin)、SetSpeedRatio(Double)、SetTarget(DependencyObject, DependencyObject)、SkipToFill()()()、Stop()()()、SeekAlignedToLastTick(TimeSpan)、SeekAlignedToLastTick(TimeSpan, TimeSeekOrigin)、GetCurrentTime()()()、GetCurrentState()()()、GetCurrentProgress()()()、GetCurrentIteration()()()、GetCurrentGlobalSpeed()()()、GetIsPaused()()()、Remove()()() 和 Target	SP1 功能更改。

日期

历史记录

原因

2008 年 7 月

增加了新成员：TargetProperty、Begin()()()、GetTarget(DependencyObject)、Pause()()()、Resume()()()、Seek(TimeSpan)、Seek(TimeSpan, TimeSeekOrigin)、SetSpeedRatio(Double)、SetTarget(DependencyObject, DependencyObject)、SkipToFill()()()、Stop()()()、SeekAlignedToLastTick(TimeSpan)、SeekAlignedToLastTick(TimeSpan, TimeSeekOrigin)、GetCurrentTime()()()、GetCurrentState()()()、GetCurrentProgress()()()、GetCurrentIteration()()()、GetCurrentGlobalSpeed()()()、GetIsPaused()()()、Remove()()() 和 Target

SP1 功能更改。

如何：在属性值更改时触发动画	本示例演示属性值更改时如何使用 Trigger 来启动 Storyboard。您可以在 Style、ControlTemplate 或 DataTemplate 中使用 Trigger。
如何：在演示图板启动后对其进行控制	本示例演示如何使用代码在 Storyboard 启动后对其进行控制。若要通过 XAML 控制演示图板，请使用 Trigger 和 TriggerAction 对象；有关示例，请参见如何：在演示图板启动之后使用事件触发器来控制演示图板。
如何：在演示图板启动之后使用事件触发器来控制演示图板	此示例演示如何在 Storyboard 启动后对它进行控制。若要使用 XAML 启动 Storyboard，请使用 BeginStoryboard，它可以将动画分发到要进行动画处理的对象和属性，然后启动 Storyboard。如果通过指定 BeginStoryboard 的 Name 属性为它提供一个名称，则它将成为可控制的 Storyboard。然后，可以在 Storyboard 启动后以交互方式对它进行控制。

以交互方式控制演示图板

对时间线进行数据绑定和动画处理

更多代码

.NET Framework

参考

其他资源