HOW TO：在樣式中建立動畫

更新：2007 年 11 月

本範例示範如何建立樣式內屬性的動畫。當您在樣式內建立動畫時，只能直接以該樣式定義的架構項目做為目標。若要以可凍結的物件當做目標，您必須從樣式化項目的屬性「向下延伸」。

下列範例在樣式內定義了幾個動畫效果，並將這些效果套用至 Button。當使用者將滑鼠移到按鈕上方時，按鈕便會產生從不透明變成半透明再變回不透明的重複淡出效果。當使用者將滑鼠從按鈕上移開時，按鈕就會變成完全不透明。按一下按鈕時，按鈕的背景色彩會從橙色成白色再變回橙色。因為用來繪製按鈕的 SolidColorBrush 不能做為直接目標，所以它是從按鈕的 Background 屬性向下延伸加以存取。

範例

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Storyboards in Styles Example" Background="White">
  <Page.Resources>

    <!-- Defines a Button style. -->
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
      <Setter Property="Button.Background">
        <Setter.Value>
          <SolidColorBrush Color="Orange" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>

        <!-- Animates the button's opacity on mouse over. -->
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
                  RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  

        <!-- Returns the button's opacity to 1 when the mouse leaves. -->
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  To="1" Duration="0:0:0.1" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>   

        <!-- Changes the button's color when clicked. 
             Notice that the animation can't target the
             SolidColorBrush used to paint the button's background
             directly. The brush must be accessed through the button's
             Background property. -->
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                  From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
      </Style.Triggers>
    </Style>
  </Page.Resources>

  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}">Click Me</Button>
  </StackPanel>
</Page>

請注意，在樣式內建立動畫時，可以指定不存在的物件做為目標。例如，假設您的樣式使用 SolidColorBrush 設定按鈕的背景屬性，但是您在某一點覆寫了該樣式，並以 LinearGradientBrush 設定按鈕的背景。嘗試建立 SolidColorBrush 的動畫不會擲回例外狀況；動畫會自動失效。

如需腳本目標語法的詳細資訊，請參閱腳本概觀。如需動畫的詳細資訊，請參閱動畫概觀。如需樣式的詳細資訊，請參閱設定樣式和範本。