Silverlight utilizzo di deepzoom

Si riporta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_utilizzare-deepzoom-di-silverlight-4_949.aspx

In questo articolo vedremo come utilizzare l’utility deepzoom per creare dei progetti Silverlight per la gestione delle immagini.
In particolare vedremo come poter effettuare lo zoom su una determinata immagine.

Dopo aver scaricato ed aver installato il programma gratuito Deep Zoom Composer dal sito di Microsoft http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en , aprite il programma.
Nella finestra di avvio vi verrà chiesto se creare un nuovo progetto o aprire uno già creato in precedenza (figura 1)

Figura 1

Selezionate la voce “New Project…”, verrà visualizzata una finestra, in cui ci chiede il nome del progetto e la posizione nel nostro pc (figura 2).

Figura 2

A questo punto, impostiamo i vari parametri, secondo le nostre esigenze.

Tramite il pulsante Ok, confermate le scelte impostate.

Il programma verrà avviato (figura 3) mostrandoci nella parte superiore, tre pulsanti, import, compose ed export,.

Questi tre pulsanti, riguardante rispettivamente tre fase, la fase di importazioni delle immagini, la seconda fase quella relativa alla composizione, e la terza quella relativa alla esportazione.

Figura 3

Nella fase di importazione, dobbiamo aggiungere le immagini, che vogliamo manipolare nel nostro sito Silverlight.
Nella parte destra, troviamo un pulsante “Add image…” che permette di importare le immagini che vogliamo manipolare.
Dopo aver importato le immagini di nostro gradimento, facciamo click sul pulsante “Compose” situato nella parte superiore.
In questa schermata (figura 4), dobbiamo trascinare al centro, le immagini a cui vogliamo effettuare lo zoom.
Trasciniamo le immagini o immagine, situata nella parte inferiore della finestra nella parte centrale della finestra, il tutto come mostrato in figura 4.
Nella parte inferiore destra, possiamo impostare le dimensioni della nostra immagine.

Figura 4

Terminata la fase relativa alla composizione delle nostre immagini, ci spostiamo alla terza e conclusiva fase, quella relativa alla esportazione.
Tramite la pulsantiera superiore, facciamo click sul pulsante con la dicitura “Export” .
In questa schermata viene visualizzata l’anteprima dell’immagine che verrà visualizzata.
Nella parte a destra, selezioniamo la linguetta con la dicitura “Custom” (figura 5), nella sezione “output type” selezioniamo l’opzione Silverlight Deep Zoom, impostiamo un nome per la casella “Name” ed il relativo percorso”.
A seconda del tipo di immagine, possiamo esportare a single immagine o più immagini.
Se viene selezionata l’opzione “multiple image” possiamo esportare tramite diversi modelli.

Figura 5

Terminato ciò, se facciamo click sul pulsante “Export” verrà esportato il progetto, in formato Silverlight.

Inoltre saranno creati i relativi sorgenti, da utilizzare in Visual Studio 2008 o versione successiva, in questo modo possiamo personalizzarlo tramite l’ambiente di sviluppo.

Dopo aver fatto click sul pulsante di esportazione, verrà visualizzata una finestra (figura 6), in cui è possibile vedere un’anteprima tramite il browser, aprire la cartella delle immagini, oppure aprire la cartella dei sorgenti.

Figura 6

Conclusioni.
In questo semplice articolo, si è visto come iniziare ad utilizzare il programma gratuito Deep Zoom composer.
Naturalmente tramite l’apposita guida ed i numerosi tutorial, si possono creare delle applicazioni Silverlight più accattivanti.