Riutilizzare un'animazione di Silverlight 3.0 con i Behavior di Expression Blend

di Marco Leoncini, in Silverlight 3.0,

Expression Blend 3.0 introduce un nuovo modello di condivisione e riutilizzo del codice: i Behavior.
Il significato letterale della parola Behavior è "comportamento", ed è infatti questo il compito dei Behavior: aggiungere un comportamento ad un elemento, attraverso un frammento di codice che è possibile riutilizzabile più e più volte.

Apriamo Expression Blend e creiamo un nuovo progetto Silverlight; su quest'ultimo facciamo click con il tasto sinistro del mouse. Dal menù contestuale, selezioniamo la voce "Add New Item". Nella successiva finestra di dialogo, scegliamo la voce "Action", assegniamo un nome a questo nuovo elemento e premiamo "OK".

Come prima cosa, Blend aggiunge un riferimento all'assebly System.Windows.Interactivity, quindi una nuova classe che estende il tipo TriggerAction<T>.

Eseguiamo l'override del metodo Invoke, che rappresenta l'entry point per l'esecuzione del Behavior.

C#
protected override void Invoke(object o)
{
  if (AssociatedObject == null) return;
  CreateAndPlayAnimation(AssociatedObject);
}

Nel metodo Invoke controlliamo come prima cosa la proprietà AssociatedObject, che rappresenta l'elemento associato al Behavior e che deve puntare ad un riferimento non nullo. In seguito, richiamiamo il metodo CreateAndPlayAnimation passando AssociatedObject come argomento.

C#
 private static void CreateAndPlayAnimation(FrameworkElement element)
{
  Storyboard stroryboard = new Storyboard();
  stroryboard.BeginTime = TimeSpan.FromMilliseconds(0);
  DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();
  animation.KeyFrames.Add(new LinearDoubleKeyFrame { KeyTime = TimeSpan.FromMilliseconds(80), Value = -50 });
  animation.KeyFrames.Add(new LinearDoubleKeyFrame { KeyTime = TimeSpan.FromMilliseconds(600), Value = 0 });
  Storyboard.SetTargetProperty(animation, new PropertyPath(PlaneProjection.RotationYProperty));
  Storyboard.SetTarget(animation, RetrivePlaneProjection(element));
  stroryboard.Children.Add(animation);
  stroryboard.Begin();
}

Il metodo CreateAndPlayAnimation fa esattamente quanto descritto dal nome: crea una nuova animazione e la esegue. Creiamo quindi un nuovo Storyboard e due KeyFrame del tipo LinearDoubleKeyFrame. Questi ultimi serviranno per animare la proprietà RotationY, esposta dal tipo PlaneProjection, che utilizzeremo per creare un semplicissimo effetto tridimensionale.

Con le restanti righe di codice impostiamo la proprietà da animare ed il tipo che la espone; infine eseguiamo l'animazione.

L'utilizzo del Behavior è semplicissimo: possiamo trovarlo nell'Assets panel di Blend. È sufficiente quindi selezionarlo e rilascialo direttamente sull'elemento al quale vogliamo associare il comportamento.


Infine, nel "Properties panel", utilizziamo la proprietà EventName per impostare a quale evento il comportamento deve essere eseguito. Non ci rimane che premere il tasto F5 e verificarne il funzionamento.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi