#61 - Cambiare la posizione alle immagini di Deep Zoom in Silverlight 3.0
di Alessio Leoncini, in Silverlight 3.0, Deep Zoom, 8 ottobre 2009
Archiviato in: Deep Zoom, Silverlight, Silverlight - animazioni, Silverlight 2.0, Silverlight 3.0, Silverlight 3.0 Guida Completa, XAML
Nello script #60 abbiamo parlato della generazione dinamica delle tessere, per sfruttare le caratteristiche di Deep Zoom in Silverlight.
Una volta associato il file XML alla proprietà Source del MultiScaleImage, il controllo valorizza la proprietà SubImages con una collezione di oggetti MultiScaleSubImage, i quali rappresentano materialmente le immagini visualizzate.
Agendo sulla collezione possiamo manipolare posizione e grandezza delle singole immagini e sfruttare la nostra composizione, esportata come collezione.
Come possiamo vedere nell'esempio, per spostare un'immagine è sufficiente agire sulla proprietà ViewportOrigin; aggiungere anche una animazione sarà, di conseguenza, molto semplice.
VB.NET
For Each item As MultiScaleSubImage In SubImages Dim i As Integer = SubImages.IndexOf(item) Dim n As Integer = (i + 1) Mod SubImages.Count Dim storyboard As New Storyboard() Dim el As New ElasticEase() el.EasingMode = EasingMode.EaseOut Dim easy As New EasingPointKeyFrame() easy.EasingFunction = el easy.KeyTime = New TimeSpan(0, 0, 2) 'recupero il ViewportOrigin dell'immagine successiva 'e lo imposto come punto di destinazione dell'animazione easy.Value = SubImages(n).ViewportOrigin Dim k As New PointAnimationUsingKeyFrames() k.KeyFrames.Add(easy) storyboard.SetTarget(k, item) storyboard.SetTargetProperty(k, New PropertyPath("ViewportOrigin")) storyboard.Children.Add(k) storyboard.Begin() Next
C#
foreach (MultiScaleSubImage item in SubImages) { int i = SubImages.IndexOf(item); int n = (i + 1) % SubImages.Count; Storyboard storyboard = new Storyboard(); ElasticEase el = new ElasticEase(); el.EasingMode = EasingMode.EaseOut; EasingPointKeyFrame easy = new EasingPointKeyFrame(); easy.EasingFunction = el; easy.KeyTime = new TimeSpan(0, 0, 2); //recupero il ViewportOrigin dell'immagine successiva //e lo imposto come punto di destinazione dell'animazione easy.Value = SubImages[n].ViewportOrigin; PointAnimationUsingKeyFrames k = new PointAnimationUsingKeyFrames(); k.KeyFrames.Add(easy); Storyboard.SetTarget(k, item); Storyboard.SetTargetProperty(k, new PropertyPath("ViewportOrigin")); storyboard.Children.Add(k); storyboard.Begin(); }
Nell'esempio ogni immagine inizia un'animazione verso la posizione della successiva, per creare una sorta di ordinamento dinamico.
Deep Zoom per Silverlight è stato trattato nel capitolo 12 del libro "Silverlight 3.0 - Guida Completa"
di Daniele Bochicchio, Cristian Civera, Alessio Leoncini e Marco Leoncini.
http://books.aspitalia.com/Silverlight-3.0/
E' possibile leggere un'anteprima del capitolo 10 all'indirizzo:
http://www.silverlightitalia.com/articoli/silverlight/effetti-speciali-immagini-silverlight-3.0.aspx
Approfondimenti
-
#54 - Blue Style ScrollBar per Silverlight 2.0
-
#silverlight4 all'orizzonte: focus sul supporto a media e streaming http://u.aspitalia.com/ai
-
RT @aspitalia Partecipa al nostro evento #RCD4, fai un RT e sarai estratto per 1 copia di #sl3guidacompleta! http://u.aspitalia.com/bw
-
Speciale jQuery: Javascript con una marcia in più
-
Silverlight, HTML 5 e quello che i designer non dicono
-
#51 - Blue Style ComboBox per Silverlight 2.0
-
MetadataDiffViewer: differenze tra i framework
-
Le novità di Silverlight 3.0 beta 1
-
#46 - Permettere il Drag-and-drop solo su zone predefinite con Silverlight 2.0
-
rilasciato l'aggiornamento per #silverlight 3.0.50160.0 http://u.aspitalia.com/eb - non ci sono dettagli sul contenuto.
-
#44 - Definire la grandezza design-time di un oggetto in Blend 2.0
-
Effetti speciali sulle immagini in Silverlight 3.0

















Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.