Animaciones basadas en "trigger"

Una de las cosas que se hicieron MUY fáciles con WPF, comparado con los frameworks anteriores como WinForms, es la animación. Los desencadenadores (triggers) tienen un soporte directo para usar animaciones en respuesta al desencadenador que está siendo disparado, en lugar de simplemente conmutar entre dos valores estáticos.

Para esto, usamos las propiedades EnterActions y ExitActions, las cuales estan presentes en todos los tipos de "trigger" que ya se han discutido (excepto para "EvenTrigger"), ambos simples y multiples. He aqui un ejemplo:

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggerEnterExitActions"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggerEnterExitActions" Height="200" Width="200" UseLayoutRounding="True">
    <Grid>
        <Border Background="LightGreen" Width="100" Height="100" BorderBrush="Green">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.400" To="3" Storyboard.TargetProperty="BorderThickness" />
                                        <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Width" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />
                                        <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Width" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>
</Window>

En este ejemplo, tenemos un cuadrado verde. Él tiene un desencadenador que se activa cuando el mouse está encima, en cuyo caso se disparan varias animaciones, todas definidas en la parte EnterActions del disparador. Allí, animamos el grosor del borde desde su valor predeterminado 0 hasta un grosor de 3, y entonces animamos el ancho y alto desde 100 a 125. Todo esto ocurre simultáneamente, porque son parte del mismo Storyboard (guión), e incluso a velocidades un poco distintas, porque tenermos el control de cuánto debe durar cada animación.

Usamos ExitActions para revertir los cambios que hicimos, con animaciones que regresan a los valores predeterminados. Ejecutamos la animación de reverso un poco más rápido, porque podemos y porque se ve bien.

Los dos estados son representados en las dos capturas de pantalla, pero para apreciar completamente el efecto, deberías tratar de ejecutarlo en tu propia máquina, usando el código fuente anterior.

Resumen:

Usar animaciones con disparadores de estilos es muy fácil, y aunque todavía no hemos explorado completamente todo lo que puedes hacer con las animaciones WPF, el ejemplo anterior debería darte una idea de cuán flexible son tanto las animaciones como los estilos.