Animare un oggetto
Un canvas è uno dei contenitori che possiamo usare in Silverlight.
Il Canvas è un contenitore non consigliato da Microsoft nelle WPF, perchè non
si autoridimensiona ed ha una posizione fissa all’interno dell’area, quindi il
suo utilizzo ritorna utile solo in casi particolari.
Purtroppo, attualmente è anche l’unico contenitore disponibile nella
versione 1.1, quindi lavoreremo con questo.
Seguendo la logica WPF immagino che in futuro avremo a disposizione
degli oggetti più carini.
 
Progetto
Una volta creato il nostro progetto i file disponibili saranno:
·         TestPage.html
·         Silverlight.js
·         Page.xaml
·         Page.xaml.cs
La TestPage.html e il file Silverlight.js sono i file di riferimento affinchè
l’applicazione possa caricare il plugin di Silverlight.
Il file su cui lavoreremo è Page.xaml e il relativo file managed
(useremo C#).
Il file Page.xaml si presenterà così:
 
<Canvasx:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Page_Loaded"
        x:Class="SilverlightContest.Page;assembly=ClientBin/SilverlightContest.dll"
        Width="640"
        Height="480"
        Background="White">
</Canvas>
 
Queste poche righe di XAML definiscono un Canvas di larghezza
uguale a Width e altezza Height e con un colore di fondo uguale a Background.
Niente di più facile immagino!
All’interno del nostro Canvas ne aggiungeremo un’altro che ci servirà
per indetificare un’area che useremo come pulsante.
 <Canvasx:Name="CanvasButtonCustomer"Background="Orange" Canvas.Left="0"
   Canvas.Top="10"Width="100"Height="40">
    <TextBlockFontFamily="Tahoma"FontSize="18"Text="Customers"/>
</Canvas>
 
L’elemento TextBlock all’interno del Canvas viene usato per scrivere in
un’area, in questo caso il canvas.
In pratica non abbiamo fatto altro che crea un’area denominata
CanvasButtonCustomer e gli abbiamo associato, posizione, colore,
grandezza e un testo al suo interno.
Ricordatevi che la proprietà x:Name è importante se avete intenzione
di far riferimento all’oggetto XAML tramite codice managed.
Definisce il nome della variabile da usare.
Una volta compilato il progetto nella directory obj/Debug
(se siamo in debug) troverete un file del tipo Page.g.cs dove al suo
interno troverete l’elenco delle variabili definite nell’XAML.
Storyboard
L’elemento Storyboard è fondamentale quando vogliamo creare
un’animazione di un oggetto.
Esistono vari tipi di animazioni:
·         ColorAnimation
·         ColorAnimationUsingKeyFrames
·         DoubleAnimation
·         DoubleAnimationUsingKeyFrames
·         PointAnimation
·         PointAnimationUsingKeyFrames
Oggi useremo una DoubleAnimation utile a cambiare le proprietà numeriche.
Lo Storyboard può partire o quando un oggetto viene caricato (esempio per
un’animazione che va in loop) o quando si determina un evento.
Noi utilizzeremo quest’ultimo caso.
Per far ciò bisogna definere un StoryBoard come Risorsa.
 <Canvas.Resources>
      <Storyboardx:Name="StoryBoardMenuOut"
                  Storyboard.TargetName="CanvasButtonCustomer"
                  Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimationTo="0"Duration="0:0:1"/>
    </Storyboard>
</Canvas.Resources>
 
Questo tipo di risorsa così definite varierà il valore di
 Canvas.Left in un secondo, portandolo al valore assoluto
in pixel uguale a 0.
Per delle animazioni e/o oggetti così semplici è utile
svilupparli a mano in modo da capir bene come lo
XAML funziona.
Per qualcosa di più complicato si consiglia l’uso di Blend 2,
attualmente in fase di sviluppo.
A questo punto il nostro file Page.xaml apparirà così:
<Canvasx:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Page_Loaded"
        x:Class="SilverlightContest.Page;assembly=
                        ClientBin/SilverlightContest.dll"
        Width="640"
        Height="480"
        Background="White"
        >
 
<Canvas.Resources>
      <Storyboardx:Name="StoryBoardMenuOut"
        Storyboard.TargetName="CanvasButtonCustomer"
                  Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimationTo="0"Duration="0:0:1"/>
    </Storyboard>
</Canvas.Resources>
 
<Canvasx:Name="CanvasButtonCustomer"Background="Orange"
          Canvas.Left="-90"Canvas.Top="10"
          Width="100"Height="40">
    <TextBlockFontFamily="Tahoma"FontSize="18"
Text="Customers"/>
</Canvas>
 
</Canvas>
 
Definizione di un evento
Tramite questa sezione si inizia ad intravedere una parte di ciò
che Silverlight 2 offrirà agli sviluppatori.
Mentre con la prima release eravamo sempre e comunque legati
a Javascript (cosa che noi odiamo), nella seconda release,
Javascript, verrà confinato in un angolino.
Ecco, ad esempio, come gestiremo un evento sul nostro canvas
usando codice managed.
File Page.xaml.cs:
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
 
CanvasButtonCustomer.MouseEnter += new MouseEventHandler(CanvasButton_MouseEnter);
}
 
void CanvasButton_MouseEnter(object sender, MouseEventArgs e)
{
StoryBoardMenuOut.Begin();
}
 
Chiunque di noi ha avuto a che fare con codice managed almeno
una volta, non avrà alcuna difficoltà a capire le righe di codice riportate su.
Con queste semplici righe di codice di XAML e di C#, abbiamo creato il nostro primo,
brutto, bottone animato.
Nei prossimi articoli proverò a spiegare gli altri elementi del, sin’ora, piccolo
Silverlight SDK, con la speranza di arrivare tutti pronti all’evento del rilascio.

 

Tags: