操作說明：使用分鏡腳本建立屬性的動畫

此範例示範如何使用 Storyboard 來建立屬性的動畫效果。 若要使用 Storyboard 建立屬性的動畫效果，請為您要建立動畫的每個屬性建立動畫，並建立 Storyboard 以包含動畫。

屬性類型會決定要使用的動畫類型。 例如，若要為使用 Double 值的屬性建立動畫，請使用 DoubleAnimation。 TargetName 和 TargetProperty 附加屬性會指定套用動畫的物件和屬性。

若要在 Extensible Application Markup Language (XAML) 中啟動分鏡腳本，請使用 BeginStoryboard 動作和 EventTrigger。 當發生由其 RoutedEvent 屬性指定的事件時，EventTrigger 會開始 BeginStoryboard 動作。 BeginStoryboard 動作會啟動 Storyboard。

下列範例會使用 Storyboard 物件，來建立兩個 Button 控制項的動畫效果。 若要變更第一個按鈕的大小，其 Width 會以動畫顯示。 若要變更第二個按鈕的色彩，會使用 SolidColorBrush 的 Color 屬性來設定動畫按鈕的 Background。

範例

<!-- 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 屬性。 若要將名稱指派給 Freezable，讓它可以成為動畫目標，請使用 X:name 指示詞，如先前範例所示。

如果使用程式碼，您必須建立 FrameworkElement 的 NameScope，以及登錄該物件的名稱，以使用該 FrameworkElement 產生動畫效果。 若要在程式碼中開始動畫，請使用 BeginStoryboard 動作搭配 EventTrigger。 您可以選擇性地使用事件處理常式和 Storyboard 的 Begin 方法。 下列範例會示範如何使用 Begin 方法。

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

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

如需動畫和分鏡腳本的詳細資訊，請參閱動畫概觀。

如果您使用程式碼，就不會受限於使用 Storyboard 物件來建立屬性的動畫效果。 如需詳細資訊和範例，請參閱不使用分鏡腳本而建立屬性的動畫和使用 AnimationClock 建立屬性的動畫。