ASP.Net  »  Articoli  »  Silverlight 

Il primo progetto

Una volta installati gli strumenti è possibile procedere alla creazione del primo progetto. Questa CTP offre la possibilità di creare applicazioni per le due tipologie di runtime, Silverlight e XNA, come si può notare dall'immagine seguente.

Figura 1. Tipologie di ambiente: Silverlight e XNA
(clic per ingrandire)

Per ogni tipologia di ambiente, dovremo poi effettuare la classica scelta sul tipo di progetto. L'ambiente Silverlight mette a disposizione i seguenti template:

Dedicheremo ai template XNA un articolo apposito in quanto richiedono una introduzione alla piattaforma prima di procedere con la descrizione dei template.

Diamo un nome al progetto e alla solution (nel mio caso ThinkAhead.HelloWorld) e confermiamo la creazione del progetto, che, grazie al template presenterà una schermata MainPage.xaml predisposta per accogliere i controlli.

Figura 2.
(clic per ingrandire)

La prima cosa da notare è la presenza di una Page di default al posto della classica Window o per chi arriva da .NET Compact Framework, Windows Form. Le applicazioni su Windows Phone 7 si basano infatti sul concetto, già presente sia in WPF che in Silverlight, di navigazione: ogni "maschera" è una pagina che compone il flusso con cui l'utente si muove sull'applicazione stessa.

• Introduzione: installare l'SDK
• Creare la User Interface
• L'emulatore
• Note sull'autore

La finestra di design mostra l'interfaccia del telefono dove appare il pulsante Back (il primo in basso a sinistra), tramite il quale è possibile tornare indietro di un passo.

La seconda cosa da notare è la presenza di un titolo e un sottotitolo all'interno della pagina: modifichiamo subito queste informazioni per fornire il nome dell'applicazione e dell'azienda che produce: per eseguire questa operazione si può agire dalla finestra delle proprietà oppure direttamente nel codice XAML; questa procedura è scontata per chi lavora con WPF o Silverlight, ma non lo è assolutamente per chi arriva da Windows Forms.

Modificato il titolo, il codice XAML si presenta così:

Figura 3. Codice XAML
(clic per ingrandire)

Prima di aggiungere i controlli diamo una occhiata al codice attuale: il template di progetto ci propone di gestire le informazioni all'interno di una Grid composta da due righe (RowDefinition), la prima delle quali ospita i due TextBlock del titolo che abbiamo appena modificato, mentre la seconda ospita il vero contenuto della pagina (ContentGrid, per adessa giustamente vuota).

Da notare come qualunque elemento della user interface faccia riferimento al suo style tramite una risorsa esterna (espressione StaticResource): queste risorse sono definite nel file App.xaml che compone la nostra applicazione insieme a due immagini che rappresentano rispettivamente l'icona per l'applicazione stessa e lo sfondo.

Ancora una volta chi lavora con WPF/Silverlight dovrebbe essere abituato a centralizzare gli stili, così come chi lavora sul web può fare un parallelo con i CSS (cascading style sheet).

Per chi arriva dall'ambiente mobile precedente è sufficiente pensare a come strutturiamo il codice per capire il beneficio di centralizzare gli stili in risorse: "mai scrivere la stessa riga di codice in due posti diversi" è la regola che seguiamo come sviluppatori. Progettando la user interface la regola è altrettanto valida: "mettiamo il font, la relativa dimensione e il colore del titolo in una risorsa esterna così quando lo modificheremo agiremo su qualunque elemento video punti tale risorsa".

Ad esempio il motivo per cui la scritta ThinkAhead del titolo appaia in font Segoe WP a dimensione 20, mentre il titolo dell'applicazione appaia in Segoe WP Light a dimensione 32 è dichiarato centralmente nell'applicazione (App.xaml): una modifica alla definizione centrale aggiorna tutte le pagine dell'applicazione senza richiedere un intervento su ciascuna.

Altri articoli

Altre guide

Altre newsletter