Применение анимации в стиле

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

Дополнительные сведения о синтаксисе раскадровки см. в Обзоре раскадровки. Дополнительные сведения об анимации см. в разделе Общие сведения об эффектах анимации. Дополнительные сведения о стилях см. в статье Стили и шаблоны.