mercoledì 2 novembre 2011

Silverlight creazione di una gallery

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_silverlight-creazione-di-una-gallery_1099.aspx







Introduzione
Uno dei tanti usi che si fanno in Silverlight è la gestione delle gallery photo, ossia quelle gallerie fotografiche per presentare un determinato numero di foto, in maniera accattivante.
Nell’articolo, vedremo come creare uno, che fa scorrere l’immagine in maniera rotatoria da destra a sinistra, il tutto come mostrato in figura 1.










Figura 1




Si crea un nuovo progetto, nel progetto si aggiungo n immagini, per esempio ben 6, denominate tutte con il nome foto, seguite da un numero progressivo, per esempio foto1.jpg, foto2.jpg e via continuando.
Dopo averle aggiunto nel progetto, impostare per ogni immagini, la proprietà “Build Action” con il valore “Resource”, in questo modo, faranno parte del progetto.
Nel progetto aggiungiamo lo spazio dei nomi relativo alle immagini, ossia immaging, il tutto come mostrato nel seguente esempio di codice.




VB.Net




Imports System.Windows.Media.Imaging







C#




using System.Windows.Media.Imaging;







A questo punto, iniziamo a definire un metodo, con il quale caricare le immagine.
Il metodo, denominato EseguiCarrouse, fa uso delle classi image per la gestione dell’ immagini, mentre le classi PlaneProjection, permettono di gestire la rotazione delle immagini, mentre la classe doubleanimation, permette la gestione dell’animazione in forma temporale, ossia della tempistica, infine la classe StoryBoard, permette la gestione dell’animazione, definendo il tutto.
Riportiamo il codice completo del metodo, che verrà eseguito nel costruttore, dopo aver inizializzato i vari controlli









VB.net




Private Sub EseguiCarrousel()







Dim NomImmagini() As String = {"foto1", "foto2", "foto3", "foto4", "foto5"}




Dim Immagini() As Image




Dim stb As Storyboard = New Storyboard




Dim TotaleImg As Integer = NomImmagini.Length




Immagini = New Image((TotaleImg) - 1) {}




Dim ContaElemento As Integer = 0




For ContaElemento = 0 To TotaleImg - 1




'imposto l'oggetto relativo all'immagine




Immagini(ContaElemento) = New Image




Immagini(ContaElemento).Width = 150




Immagini(ContaElemento).Height = 150




'carico dinamicamente l'immagine




Immagini(ContaElemento).Source = New BitmapImage(New Uri((NomImmagini(ContaElemento) + ".jpg"), UriKind.Relative))




'Elabora le singole immagini




Dim img As Image = New Image




img.Height = 150




img.Width = 150




img.Source = Immagini(ContaElemento).Source




img.Stretch = Stretch.Fill




'gestione dell'angolazione, imposto la rotazione ed imposto la propriet projection




Dim ppAngolazione As PlaneProjection = New PlaneProjection




ppAngolazione.CenterOfRotationZ = -250




img.Projection = ppAngolazione




'gestione dell'animazione, tempo ogni 30 secondi




Dim daAnimazione As DoubleAnimation = New DoubleAnimation




daAnimazione.From = (ContaElemento * (360 / TotaleImg))




daAnimazione.By = 360




daAnimazione.Duration = TimeSpan.FromSeconds(30)




daAnimazione.RepeatBehavior = RepeatBehavior.Forever




Storyboard.SetTarget(daAnimazione, ppAngolazione)




Storyboard.SetTargetProperty(daAnimazione, New PropertyPath("RotationY"))




stb.Children.Add(daAnimazione)




'aggiungo l'immagine modificata




contenitoreImmagini.Children.Add(img)




'ContaElemento = (ContaElemento + 1)




Next
















Me.Resources.Add("stb", stb)




stb.Begin()







End Sub







C#




private void EseguiCarrousel()




{




string[] NomImmagini = { "foto1", "foto2", "foto3", "foto4", "foto5" };




Image[] Immagini;




//oggetto per la determinazione del tempo e movimento




Storyboard stb = new Storyboard();




//verifico il numero delle immagini permettendo in questo modo di fare un ciclo sulle immagini




int TotaleImg = NomImmagini.Length;




Immagini = new Image[TotaleImg];







for (int ContaElemento = 0; ContaElemento < TotaleImg; ContaElemento++)




{




//imposto l'oggetto relativo all'immagine




Immagini[ContaElemento] = new Image();




Immagini[ContaElemento].Width = 150; Immagini[ContaElemento].Height = 150;




//carico dinamicamente l'immagine




Immagini[ContaElemento].Source = new BitmapImage(new Uri(NomImmagini[ContaElemento] + ".jpg", UriKind.Relative));




//Elabora le singole immagini




Image img = new Image();




img.Width = img.Height = 150;




img.Source = Immagini[ContaElemento].Source;




img.Stretch = Stretch.Fill;




//gestione dell'angolazione, imposto la rotazione ed imposto la proprietà projection




PlaneProjection ppAngolazione = new PlaneProjection();




ppAngolazione.CenterOfRotationZ = -250;




img.Projection = ppAngolazione;




//gestione dell'animazione, tempo ogni 30 secondi




DoubleAnimation daAnimazione = new DoubleAnimation();




daAnimazione.From = ContaElemento * 360 / TotaleImg;




daAnimazione.By = 360;




daAnimazione.Duration = TimeSpan.FromSeconds(30);




daAnimazione.RepeatBehavior = RepeatBehavior.Forever;




Storyboard.SetTarget(daAnimazione, ppAngolazione);




Storyboard.SetTargetProperty(daAnimazione, new PropertyPath("RotationY"));




stb.Children.Add(daAnimazione);







//aggiungo l'immagine modificata




contenitoreImmagini.Children.Add(img);




}




this.Resources.Add("stb", stb);




stb.Begin();




}










Conclusioni
L’articolo ha voluto fornire una tecnica di come creare un album fotografico, per la gestione delle immagini.
Le potenzialità offerte da questa tecnologia, sono moltissime, permettendo al programmatore di creare delle spettacolari e performanti applicazioni in ambito web e non solo.

Nessun commento: