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: Silverlight