如何在樣式中設定動畫

此範例會示範如何為樣式中的屬性設定動畫。 在樣式內製作動畫效果時，只有已定義樣式的架構元素可以直接設為目標。 若要以 freezable 物件為目標，您必須從樣式元素的屬性進行 "dot down" 語法。

在下列範例中，在樣式中已定義數個動畫，並將其套用至 Button。 當使用者將滑鼠移至按鈕上方時，它會從不透明漸變為部分半透明，然後恢復，這會一再重複。 當使用者將滑鼠從按鈕上移開時，它就會變成完全不透明。 按一下按鈕時，其背景色彩會從橙色變更為白色，然後再次恢復。 因為用於繪製按鈕的 SolidColorBrush 無法直接設為目標，因此可透過從按鈕的 Background 屬性進行 "dotting down" 的方式來存取。

範例

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 來設定 Button 的背景屬性，但在某些時候會覆寫樣式，且按鈕的背景會以 LinearGradientBrush 設定。 嘗試設定 SolidColorBrush 的動畫不會擲回例外狀況；動畫只會以無訊息模式失敗。

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