如何在样式中进行动画处理

此示例演示如何对样式中的属性进行动画处理。 在样式中进行动画处理时,只能直接面向定义了样式的框架元素。 若要定位可冻结对象,则必须从样式元素的属性“向下点”。

在以下示例中,在一个样式中定义了多个动画并将动画应用于 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 来设置按钮的背景属性,但在某些时候样式被替代,并使用 LinearGradientBrush 设置按钮的背景。 尝试对 SolidColorBrush 进行动画处理不会引发异常;动画会直接失败且不发出提示。

有关情节提要定位语法的详细信息,请参阅情节提要概述。 有关动画的详细信息,请参阅动画概述。 有关样式的详细信息,请参阅样式设置和模板化