如何在樣式中產生動畫效果

此範例示範如何在樣式中建立屬性的動畫效果。 在樣式內產生動畫效果時,只有定義樣式的架構專案可以直接設為目標。 若要以 freezable 物件為目標,您必須從樣式專案的 屬性「點向下」。

在下列範例中,在樣式中定義數個動畫,並套用至 Button 。 當使用者將滑鼠移至按鈕上方時,它會從不透明淡出到部分半透明,並重複返回。 當使用者將滑鼠從按鈕上移開時,它就會完全不透明。 按一下按鈕時,其背景色彩會從橙色變更為白色,然後再返回一次。 SolidColorBrush因為用來繪製按鈕的 無法直接設為目標,所以從按鈕的 Background 屬性向下註定即可存取它。

範例

<!-- 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 不會擲回例外狀況;動畫只會以無訊息模式失敗。

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