Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1909, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Silverlight: creare una galleria di immagini con Deep Zoom Composer e VS 2008

In questo precedente post vi ho mostrato il risultato di un'applicazione Silverlight creata con Deep Zoom Composer. Nel post odierno, invece, vedremo come creare un'applicazione di questo tipo secondo lo stile step-by-step; a mio avviso, infatti, se non avete mai avuto modo di sviluppare per Microsoft Silverlight, utilizzare Deep Zoom Composer è un buon modo per avvicinarsi alla tecnologia. Infine, vedremo come utilizzare Visual Studio 2008 per elaborare la nostra applicazione.

Cosa occorre:

  1. Microsoft Visual Studio 2008;
  2. Microsoft Deep Zoom Composer;

Dopo aver installato tutto, aprite Deep Zoom Composer. La prima cosa che otterrete sarà una finestra che vi richiede di creare un nuovo progetto o di aprirne uno esistente. Ne vogliamo creare uno nuovo utilizzando il comando New project. Apparirà una finestra nella quale andrà specificato il nome del nuovo progetto, come in figura seguente:

Fatto questo, viene generato un nuovo progetto vuoto. Quando Deep Zoom Composer è pronto, in alto potete osservare i tre pulsanti che rappresentano i vari momenti sequenziali della creazione del progetto (Import/Compose/Export). La fase Import riguarda l'importazione di immagini nella galleria. Utilizzando il comando Add Image, in alto a destra, potete aggiungere tutte le immagini che volete, come in figura seguente:

Dopo di questo, si passa alla seconda fase, ossia la composizione della gallery, quindi clic sul pulsante Compose. E' sufficiente fare il drag'n'drop delle foto dalla toolbar a destra sull'area di lavoro. Potete ridimensionare, spostare, affiancare come meglio credete le vostre immagini e noterete, in basso a sinistra, un riquadro che fa una preview della disposizione delle foto nella gallery:

L'ultimo passaggio è l'esportazione, quindi clic sul pulsante Export. Deep Zoom Composer permette l'esportazione sul servizio PhotoZoom di Microsoft oppure, come nel nostro caso, in formato Silverlight. E' sufficiente specificare il nome per l'output del progetto (nel mio caso ho specificato il nome della località cui le foto si riferiscono, ma va bene un qualunque identificatore). La figura seguente mostra quanto asserito:

Notate come venga richiesto il formato per l'esportazione delle immagini; l'importante è che venga lasciata attiva l'opzione di pubblicazione delle immagini e del progetto Silverlight. Una volta fatto clic su Export, viene generato il tutto: un'applicazione basata su Microsoft Silverlight 2.0 che fa uso del controllo MultiScaleImage, nonchè una soluzione .sln riutilizzabile in Visual Studio 2008 ed Expression Blend. Al termine dell'esportazione, viene mostrata la seguente finestra:

Tra le varie opzioni disponibili, scegliamo quella relativa all'anteprima dell'applicazione nel browser web, che si presenta così:

Complimenti, avete realizzato la vostra prima applicazione per Microsoft Silverlight! Ora potete ingrandire e rimpicciolire le foto con la rotellina del mouse, sfruttando le potenzialità del controllo MultiScaleImage che offre incredibili possibilità di zoom. L'applicazione è perfettamente funzionante e sarebbe già predisposta per la pubblicazione. Tuttavia, riteniamo che il suo aspetto può essere decisamente migliorabile.

Come detto, Deep Zoom Composer crea una soluzione .sln riutilizzabile in Visual Studio 2008, composta da due progetti C#; da quella è in grado di generare l'applicazione. Sfruttiamo quindi questa soluzione così generata, riaprendola in Visual Studio. La cartella dove risiede la soluzione è un percorso simile a questo: C:\Users\NomeUser\Documenti\Expression\Deep Zoom Composer Projects\NomeProgetto\Source images\OutputSdi\NomeApplicazione. Una volta che avete trovato la soluzione, apritela in Visual Studio 2008.

Fatto questo, vi sarà molto facile osservare come il lato design dell'applicazione Silverlight sia gestito tramite XAML, in maniera simile a WPF. Innanzitutto notiamo la presenza di un file chiamato MouseWheelHelper.cs, una classe che permette di gestire la rotellina del mouse in fase di zoom sulle gallery. In secondo luogo, proviamo a fare qualche modifica alla nostra applicazione. Per esempio, potremmo modificare lo sfondo della griglia da bianco a uno con gradiente. Dal codice XAML, eliminate l'attributo Background dall'elemento Grid. Poi, all'interno di quest'ultimo, aggiuntete il seguente XAML:

        <Grid.Background>

            <LinearGradientBrush>

                <GradientStop Color="Black" Offset="0"/>

                <GradientStop Color="Red" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

Come potete osservare, immediatamente il colore di sfondo della Grid cambia con quello nostro a gradiente. Ora, ipotizziamo di voler aggiungere un pulsante che mostri un messaggio quando premuto. In primo luogo, dobbiamo suddividere la Grid in due righe:

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition Height="40"/>

        </Grid.RowDefinitions>

Poi, immediatamente prima del tag di chiusura dell'elemento Grid, digitate quanto segue:

        <StackPanel Grid.Row="1" Orientation="Horizontal">

            <Button Height="30" Width="100" Content="Click me!" Click="ButtonClick" Margin="30,0,0,0"/>

 

            <TextBlock Margin="30,0,0,0" FontFamily="Verdana" FontSize="18"

                       FontWeight="Bold" FontStyle="Italic"

                       x:Name="WelcomeText">

                <TextBlock.Foreground>

                    <RadialGradientBrush>

                        <GradientStop Color="Blue" Offset="0"/>

                        <GradientStop Color="Violet" Offset="0.5"/>

                        <GradientStop Color="Yellow" Offset="1"/>

                    </RadialGradientBrush>

                </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>

Il contenitore StackPanel ci occorre per affiancare sulla stessa riga un pulsante e un TextBlock in cui visualizzeremo un messaggio. L'evento Click del pulsante deve essere gestito da codice C#, specificando, da XAML, il nome del gestore di evento da richiamare. Questo potrebbe semplicemente mostrare un messaggio di benvenuto nel TextBlock, come segue:

        private void ButtonClick(object sender, RoutedEventArgs e)

        {

            WelcomeText.Text = "Benvenuti a Tor Caldara!";

        }

Prima di avviare l'applicazione, nella finestra Esplora soluzioni, ricordate di fare clic destro sul nome della pagina Html di test che viene generata per il progetto e di selezionare il comando Set as Start Page del menu contestuale. Se ora provate ad avviare l'applicazione, oltre a vedere il consueto risultato sulla gallery di immagini, potete osservare il risultato del lavoro fatto con Visual Studio 2008, come in figura:

Ovviamente Silverlight non è sempre così semplice, questo era un esempio di creazione di un progetto sfruttando molti servizi offerti da Microsoft, proprio come Deep Zoom Composer. Unico neo di quest'applicazione: non esporta in Visual Basic 2008. Il team di sviluppo riceverà presto una mia mail a riguardo, proverò a segnalare questa pecca.... ;-)

Spero che questo mini tutorial vi sia utile se volete avvicinarvi a Silverlight.

Alessandro

 

 

Print | posted on sabato 9 agosto 2008 18:15 | Filed Under [ Silverlight e Windows Phone ]

Powered by:
Powered By Subtext Powered By ASP.NET