Trigger animations

Une des choses qui devient BEAUCOUP plus simple avec le WPF, comparé aux anciens frameworks comme WinForms, est l'animation. Les déclencheurs sont directement compatibles pour utiliser les animations lorsque le déclencheur est activé plutôt que d'osciller entre deux valeurs statiques.

Pour cela, nous utilisons les paramètres EnterActions et ExitActions qui sont présents dans tous les types de déclencheurs déjà discutés (à l'exception du EventTrigger), qu'ils soient simples ou multiples. En voici un exemple :

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

Dans cet exemple, nous avons un carré vert. Il possède un déclencheur qui se déclenche une fois la souris dessus, auquel cas il déclenche plusieurs animations, toutes définies dans la partie EnterActions du déclencheur. Ici, nous animons l'épaisseur de la bordure depuis sa valeur par défaut 0 vers une épaisseur de 3, puis nous animons la largeur et la hauteur de 100 à 125. Tout cela s'exécute simultanément car ils font partie du même StoryBoard, et même à différentes vitesse car nous avons le contrôle total de la durée de chaque animation.

Nous utilisons ExitActions pour inverser les changements que nous avons fait avec les animations qui retournent à leur valeurs par défaut. Nous exécutons l'inversion des animations un peu plus vite, parce qu'on le peut et parce que cela rend bien.

Les deux états sont représentés sur les deux captures d'écran, mais pour apprécier pleinement l'effet, vous devriez essayer d'exécuter l'exemple sur votre propre machine en utilisant le code source ci-dessus.

Résumé

Utiliser les animations avec des déclencheurs de style est très facile, et même si nous n'avons pas explorer complétement tout ce qui vous pouvez faire avec les animations WPF, l'exemple utilisé plus haut devrait vous donner une idée de la flexibilité des animations et des styles.