Cómo: Animar en un estilo

En este ejemplo se muestra cómo animar propiedades en un estilo. Al animar dentro de un estilo, únicamente se puede establecer como destino directo el elemento marco cuyo estilo se define. Para establecer el destino en un objeto freezable, debe "establecer una relación" desde una propiedad del elemento al que se aplica el estilo.

En el ejemplo siguiente, se definen varias animaciones dentro de un estilo y se aplican a un control Button. Cuando el usuario mueve el mouse sobre el botón, se desvanece de opaco a parcialmente translúcido y viceversa, repetidamente. Cuando el usuario retira el mouse y del botón, se vuelve completamente opaco. Cuando se hace clic en el botón, su color de fondo cambia de la naranja al blanco y de nuevo al naranja. Dado que el objeto SolidColorBrush puede utilizado para pintar el botón no se puede establecer directamente como destino, se tiene acceso a él estableciendo una relación desde la propiedad Background del botón.

Ejemplo

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

Tenga en cuenta que al animar dentro de un estilo, es posible establecer como destinos objetos que no existen. Por ejemplo, suponga que el estilo utiliza un objeto SolidColorBrush para establecer la propiedad del fondo de un botón, pero que en algún punto se invalida el estilo y se establece el fondo del botón en un objeto LinearGradientBrush. Si intenta animar SolidColorBrush, no se iniciará ninguna excepción; simplemente se producirá un error en la animación, que no se comunicará.

Para obtener más información sobre la sintaxis de establecimiento de destinos en guiones gráficos, vea Información general sobre objetos Storyboard. Para obtener más información acerca de la animación, vea Información general sobre animaciones. Para obtener más información acerca de los estilos, vea Aplicar estilos y plantillas.