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.