Cómo animar en un estilo

En este ejemplo se muestra cómo animar las propiedades en un estilo. Al animar dentro de un estilo, solo el elemento de marco para el que se define el estilo se puede apuntar directamente. Para establecer como destino un objeto inmovilizable, debe "puntear" desde una propiedad del elemento con estilo.

En el ejemplo siguiente, varias animaciones se definen dentro de un estilo y se aplican a Button. Cuando el usuario mueve el mouse sobre el botón, se atenúa de opaco a parcialmente translúcido y viceversa, repetidamente. Cuando el usuario mueve el mouse fuera del botón, se vuelve completamente opaco. Cuando se hace clic en el botón, su color de fondo cambia de naranja a blanco y viceversa. Dado que el elemento SolidColorBrush usado para pintar el botón no se puede apuntar directamente, se accede a él punteando desde la propiedad Background del botón.

Ejemplo

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

Tenga en cuenta que, al animar dentro de un estilo, es posible establecer como destino objetos que no existen. Por ejemplo, supongamos que el estilo usa SolidColorBrush para establecer la propiedad de fondo de un botón, pero que en algún momento el estilo se invalida y el fondo del botón se establece con LinearGradientBrush. Al intentar animar SolidColorBrush no se generará una excepción; la animación simplemente producirá un error en silencio.

Para obtener más información sobre la sintaxis de destino del guión gráfico, consulte Información general sobre guiones gráficos. Para obtener más información sobre la animación, consulte Información general sobre animaciones. Para obtener más información acerca de los estilos, consulte Aplicar estilos y plantillas.