Как анимация с использованием стилей

В этом примере показано, как анимировать свойства в стиле. При анимации в стиле, элемент структуры, для которой определяется стиль можно сделать целью напрямую. Чтобы обратиться к фиксируемому объекту, вам необходимо «поставить точку» из свойства элемента со стилем.

В следующем примере определяются внутри стиля и применяются для нескольких анимаций 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 не создается исключение; анимация завершатся сбоем без уведомления.

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