Как создавать анимацию в определенном стиле

В этом примере показано, как анимировать свойства в стиле. При анимации в стиле только элемент структуры, для которого определен стиль, может быть непосредственно нацелен. Чтобы нацелить на объект 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 для задания фонового свойства кнопки, но в какой-то момент стиль переопределяется, и фон кнопки устанавливается с LinearGradientBrush. Попытка анимации SolidColorBrush не вызовет исключения; Анимация просто завершится сбоем автоматически.

Дополнительные сведения о синтаксисе нацеливания раскадровки см. в разделе Обзор раскадровок. Дополнительные сведения об анимации см. в обзоре анимации. Дополнительные сведения о стилях см. в разделе Styling and Templating.