[XAML/C#] Utilizzare una ItemsPage

Guida introduttiva all’uso del template ItemsPage di Visual Studio 2012:

image

1. Aprire Visual Studio e creare un nuovo progetto Visual C# di tipo Windows Store – Blank App(XAML) chiamato “ItemsPageDemo” :

image

2. Aggiungere una ItemsPage al progetto chiamata “ItemsPage”:

image

image

accettando l’aggiunta di tutti gli elementi da cui dipende il funzionamento della pagina:

image

3. Ricompilare il progetto con F6

4. Modificare il codice sorgente di App.xaml.cs per impostare ItemsPage come pagina iniziale al posto di MainPage:

image

5. Cancellare dal progetto la pagina MainPage:

image

Fatto questo, prima di proseguire, cerchiamo di spiegare brevemente il funzionamento della pagina:

Il Layout della ItemsPage fa uso di due controlli che utilizza mediante i VisualState: la GridView e la ListView. La prima viene utilizzata per le modalità Landscape, Portrait e Fill, mentre la ListView viene visualizzata nella modalità Snapped. Entrambi questi controlli hanno la loro proprietà ItemsSource in binding con la risorsa statica CollectionViewSource:

image

Poiché ItemsPage deriva dalla classe LayoutAwarePage (il cui sorgente si trova nella cartella Common), contiene un DefaultViewModel che viene utilizzato come contenitore della lista di item che dà origine alla catena di binding, secondo il seguente schema:

image

Vediamo ora quali proprietà devono contenere gli oggetti item della lista.

Poiché il DataTemplate utilizzato da GridView è lo Standard250x250Itemtemplate, contenuto nel file StandardStyles.xaml (che si trova sempre nella cartella Common):

image

dalle dichiarazioni di binding possiamo dedurre che le proprietà richieste sono: un'immagine e due stringhe per il titolo e sottotitolo dell'item, di cui una possibile implementazione minimale è:

image

Proseguiamo quindi con la realizzazione del progetto:

6. Aggiungere la classe Item al progetto:

image

image

7. Aggiungere una nuova cartella “Images” dentro la cartella “Assets”:

image

8. Trascinare (o più semplicemente copiare) dentro la cartella appena creata 5 immagini (jpeg o png) a piacere:

image

9. Modificare il codice sorgente di ItemsPage.xaml.cs :

image

image

10. Avviare il progetto.

Il file zippato della Solution è scaricabile qui: http://sdrv.ms/SRAarp

Happy coding!

posted @ sabato 6 ottobre 2012 20:16

Print
Comments have been closed on this topic.
«novembre»
domlunmarmergiovensab
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345