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.