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

更新:2007 年 11 月

本主题中的示例演示如何对样式中的属性进行动画处理。在样式中进行动画处理时,只能直接以定义了样式的框架元素作为目标。若要以可冻结的对象为目标,必须从带样式元素的属性“暂且记下”。

在下面的示例中,在样式中定义了几个动画,并将这些动画应用于 Button。当用户将鼠标移到按钮上时,它会反复从不透明淡化为半透明并从半透明淡化为不透明。当用户将鼠标移出按钮时,按钮会变得完全不透明。当按钮被单击时,它的背景色会再次从橙色改为黑白色。由于不能直接以用来绘制按钮的 SolidColorBrush 作为目标,因此该 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 来设置 Button 的背景属性,但是在某个点,该样式被重写,用 LinearGradientBrush 设置了该按钮的背景。 尝试对 SolidColorBrush 进行动画处理将不会引发异常;动画将只是自行失败。

有关演示图板目标设定语法的更多信息,请参见演示图板概述。有关动画的更多信息,请参见动画概述。有关样式的更多信息,请参见样式设置和模板化