ASP.Net  »  Articoli  »  Silverlight 

È possibile pensare ad un'animazione Silverlight come alla modifica delle caratteristiche di un elemento di una pagina. Ad esempio, immaginiamo un testo che appaia in una determinata posizione in un certo momento, o che segua un percorso lungo la pagina, o cambi colore. Le stesse trasformazioni possiamo applicarle alle immagini o a forme geometriche.

Per realizzare l'animazione ci serviamo di elementi grafici XAML e di metodi e proprietà che ci permettono di gestire gli eventi con JavaScript.

Supponiamo, ad esempio, di voler animare un blocco di testo, facendo sì che scorra in orizzontale, per un tempo prefissato,da una posizione a un'altra.

Anzitutto creiamo l'elemento da animare:

<TextBlock x:Name="Animazione" Text="Animazione orizzontale" 
           Canvas.Left="10" Canvas.Top="10"
           FontFamily="Times New Roman" FontSize="24" Foreground="Black">

</TextBlock>

Il blocco di testo, che abbiamo nominato "Animazione" (attributo x:Name), si trova inizialmente alla posizione (10,10) rispetto all'angolo in alto a sinistra del suo contenitore. Ne abbiamo impostato font e dimensioni del carattere e colore.

Il nome è molto importante, perché offre un riferimento all'elemento nel codice (un po' come l'id nell'XHTML)

Una volta definito il blocco di testo, possiamo impostare alcune azioni che l'oggetto effettuerà allo scatenarsi di alcuni eventi.

L'idea è che ciascun oggetto può reagire ad alcuni "stimoli" (trigger). Gli stimoli sono eventi elencati in un elemento particolare: l'elemento <TextBlock.Triggers>. Nella collezione dei trigger possiamo definire gli eventi come altrettanti elementi <Event Trigger>.

Ad esempio vediamo come assegnare un'azione al blocco di testo che si scatena quando è completo il caricamento.

<TextBlock x:Name="Animazione" Text="Animazione orizzontale" 
           Canvas.Left="10" Canvas.Top="10"
           FontFamily="Times New Roman" FontSize="24" Foreground="Black">

  <TextBlock.Triggers>
    <Event Trigger RoutedEvent="TextBlock.Loaded">

    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

L'evento destinato ad avviare l'animazione è TextBlock.Loaded.

Altri articoli

Altre guide

Altre newsletter