Como animar em um estilo

Este exemplo mostra como animar propriedades dentro de um estilo. Ao animar dentro de um estilo, somente o elemento de estrutura para o qual o estilo é definido pode ser direcionado diretamente. Para direcionar um objeto freezable, você deve "pontilhar para baixo" de uma propriedade do elemento com estilo.

No exemplo a seguir, várias 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 transita de opaco para parcialmente translúcido e volta ao estado opaco repetidamente. Quando o usuário move o mouse para fora do botão, ele se torna completamente opaco. Quando o botão é clicado, a cor de fundo muda de laranja para branco e volta novamente. Como a SolidColorBrush usada para pintar o botão não pode ser direcionada diretamente, ela é acessada por meio da pontilhação para baixo da propriedade Background do botão.

Exemplo

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

Observe que, ao animar dentro de um estilo, é possível direcionar objetos que não existem. Por exemplo, suponha que seu estilo use um SolidColorBrush para definir a propriedade de plano de fundo de um Botão, mas em algum momento o estilo é substituído e o plano de fundo do botão é definido com um LinearGradientBrush. Tentar animar o SolidColorBrush não gerará uma exceção; a animação simplesmente falhará sem aviso.

Para obter mais informações sobre a sintaxe de direcionamento do storyboard, consulte a visão geral do Storyboards. Para obter mais informações sobre animação, consulte a visão geral da animação . Para obter mais informações sobre estilos, consulte o de Estilo e Modelagem.