Практическое руководство. Применение анимации в стиле

Обновлен: Ноябрь 2007

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

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

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