Era da un po' di tempo che non parlavamo di Windows Presentation Foundation :-) Sebbene abbiamo parlato diverse volte di animazioni, in questo post vediamo come animare un oggetto a livello di codice Visual Basic. Utilizzeremo un oggetto di tipo AnimationClock, appartenente al namespace System.Windows.Media.Animation.
Lo scopo della dimostrazione è quello di animare la proprietà relativa alla larghezza di un rettangolo in modo che questa aumenti nell'ambito dell'animazione stessa, per poi tornare indietro alle dimensioni originali. Poichè è possibile controllare la riproduzione dell'animazione, oltre a disegnare il rettangolo poniamo nell'interfaccia anche tre pulsanti: uno per l'avvio, uno per la pausa e uno per la ripresa dell'animazione.
Questo semplice XAML disegna un rettangolo con sfondo a gradiente e bordo rosso e i tre pulsanti succitati:
<Grid>
<Rectangle Name="Rectangle1" Width="100" Height="50" RadiusX="20" RadiusY="10" Stroke="Red">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Gainsboro" Offset="0.7"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Button Height="24" HorizontalAlignment="Left" Margin="10,0,0,10" Name="Button1" VerticalAlignment="Bottom" Width="81" Click="startAnimation">Avvia</Button>
<Button Height="24" HorizontalAlignment="Left" Margin="100,0,0,10" Name="Button2" VerticalAlignment="Bottom" Width="85">Pausa</Button>
<Button Height="24" HorizontalAlignment="Left" Margin="200,0,0,10" Name="Button3" VerticalAlignment="Bottom" Width="81">Riprendi</Button>
</Grid>
A livello di code-behind, in primo luogo si dichiara un oggetto di tipo AnimationClock. Quindi, si scrive il codice per la gestione dell'avvio dell'animazione. Per rendere più facile la comprensione ho inserito dei commenti nel codice:
Private clock As AnimationClock
Private Sub startAnimation(ByVal sender As Object, ByVal e As RoutedEventArgs)
'Istanzia l'animazione
Dim animazione As New DoubleAnimation
'Il valore max dei pixel da raggiungere
animazione.To = 250
'La durata dell'animazione
animazione.Duration = New Duration(TimeSpan.FromSeconds(6))
'Torna indietro
animazione.AutoReverse = True
'Animazione perpetua
animazione.RepeatBehavior = RepeatBehavior.Forever
'Crea l'oggetto Clock
clock = animazione.CreateClock
'Applica l'animazione di tipo Clock alla Dependency Property
'relativa alla larghezza dell'oggetto
Rectangle1.ApplyAnimationClock(FrameworkElement.WidthProperty, clock)
End Sub
I due seguenti gestori, che si riferiscono agli altri due pulsanti, mostrano come, tramite i metodi Pause e Resume della proprietà Controller della classe AnimationClock, sia possibile controllare l'animazione:
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click
clock.Controller.Pause()
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button3.Click
clock.Controller.Resume()
End Sub
Poichè il risultato è animato, è preferibile che lo vediate direttamente sul vostro display piuttosto che in uno screen-shot statico :-)
Alessandro