Trigger-Animationen

Eines der Dinge, die mit WPF im Vergleich zu früheren Frameworks wie WinForms viel einfacher wurden, ist die Animation. Trigger haben direkte Unterstützung für die Verwendung von Animationen als Reaktion auf den ausgelösten Trigger, anstatt nur zwischen zwei statischen Werten zu wechseln.

Dazu verwenden wir die Eigenschaften EnterActions und ExitActions, die in allen bereits diskutierten Triggertypen (außer dem EventTrigger) vorhanden sind, sowohl einzeln als auch mehrfach. Hier ist ein Beispiel:

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

In diesem Beispiel haben wir ein grünes Quadrat. Es hat einen Trigger, der ausgelöst wird, sobald die Maus darüber fährt, in diesem Fall werden mehrere Animationen ausgelöst, die alle im EnterActions-Teil des Triggers definiert sind. Dort animieren wir die Dicke des Randes von standardmäßig 0 bis zu einer Dicke von 3, und dann animieren wir die Breite und Höhe von 100 bis 125. Dies alles geschieht gleichzeitig, da sie Teil desselben StoryBoards sind, und sogar mit leicht unterschiedlichen Geschwindigkeiten, da wir die volle Kontrolle darüber haben, wie lange jede Animation laufen soll.

Wir verwenden die ExitActions, um die von uns vorgenommenen Änderungen rückgängig zu machen, mit Animationen, die auf die Standardwerte zurücksetzen. Wir lassen die umgekehrten Animationen etwas schneller ablaufen, weil wir es können und weil es cool aussieht.

Die beiden Zustände sind auf den beiden Screenshots dargestellt, aber um den Effekt vollständig zu verstehen, sollten Sie das Beispiel auf Ihrem eigenen Rechner mit dem obigen Quellcode ausführen.

Zusammenfassung

Die Verwendung von Animationen mit Style-Triggern ist sehr einfach, und obwohl wir noch nicht alles erforscht haben, was Sie mit WPF-Animationen machen können, sollte Ihnen das oben verwendete Beispiel eine Vorstellung davon vermitteln, wie flexibel sowohl Animationen als auch Styles sind.