Como: Animar em um estilo

Este exemplo mostra como animar propriedades em um estilo. Quando animando em um estilo, apenas o elemento de framework para o qual o estilo é definido pode ser almejado diretamente. Para almejar um objeto congelável, você precisa "dot down" de uma propriedade do elemento com estilo.

No exemplo a seguir, diversas animações são definidas em um estilo e aplicadas a um Button. Quando o usuário move o mouse sobre o botão, ele esmaece de opaco a parcialmente translúcido e de volta, repetidamente. Quando o usuário move o mouse para fora do botão, ele se torna completamente opaco. Quando o botão é clicado, sua cor de fundo muda de laranja para branco e de volta. Por que o SolidColorBrush utilizado para pintar o botão não pode ser almejado diretamente, é acessado por "dotting down" a partir da propriedade Background do botão.

Exemplo

<!-- 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>

Observe que enquanto animando em um estilo, é possível almejar objetos que não existem. Por exemplo, suponha que seu estilo utilize um SolidColorBrush para definir a propriedade de fundo de um botão, mas que em algum momento o estilo é sobreposto e o fundo do botão é definido com um LinearGradientBrush. Tentar animar o SolidColorBrush não vai lançar uma exceção; a animação simplesmente falhará silenciosamente.

Para mais informações sobre a sintaxe de storyboard, veja Visão geral sobre Storyboards. Para mais informações sobre animação, veja Revisão de Animação. Para mais informações sobre estilos, veja Styling and Templating.