Trigger sulle animazioni

Una delle cose che è diventata molto più semplice con WPF, rispetto ai framework precedenti come WinForms, è l'animazione. I trigger hanno il supporto diretto per l'utilizzo delle animazioni in risposta al trigger attivato, cosi come passare da un valore statico all'altro.

Per questo usiamo le proprietà EnterActions e ExitActions che sono presenti in tutti i tipi di trigger già discussi (tranne EventTrigger), sia singoli che multipli. Ecco un esempio:

<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 questo esempio, abbiamo un quadrato verde. Ha un trigger che si attiva una volta che il mouse ci finisce sopra. In tal caso si attivano diverse animazioni, tutte definite nella parte EnterActions del trigger. Lì, animiamo lo spessore del bordo dal suo valore predefinito 0 a uno spessore di 3, la larghezza e l'altezza da 100 a 125. Tutto ciò accade simultaneamente, perché fanno parte dello stesso StoryBoard e anche a velocità leggermente diverse, poiché abbiamo il pieno controllo della durata di ogni animazione.

Usiamo ExitActions per annullare le modifiche apportate, con animazioni che ci riporano ai valori predefiniti. Eseguiamo le animazioni di retromarcia leggermente più velocemente

I due stati sono rappresentati sui due screenshot, ma per apprezzare appieno l'effetto, dovresti provare a eseguire l'esempio sul tuo computer, usando il codice sorgente sopra.

Riassunto

L'uso delle animazioni con i trigger di stile è molto semplice e, sebbene non abbiamo ancora esplorato completamente tutto ciò che puoi fare con le animazioni WPF, l'esempio usato sopra dovrebbe darti un'idea di quanto siano flessibili sia le animazioni che gli stili.