ASP.Net  »  Articoli  »  Silverlight 

I controlli utili per creare il layout di base di una applicazione Silverlight sono 3: Grid, StackPanel e Canvas. Possiamo definirli elementi container perché servono a contenere e posizionare gli altri controlli dell'interfaccia (textblock, checkbox, immagini etc.). Se utilizziamo Visual Studio o Visual Web Developer Express, li ritroviamo nella toolbox insieme agli altri.

Iniziamo con il creare una nuova applicazione. Facciamo partire l'ambiente di sviluppo e creiamo un nuovo progetto (File > New > Project). Scegliamo tra i template Silverlight application.

A questo punto, il wizard ci mostra una piccola finestra dove poter scegliere il tipo di applicazione Silverlight. Le scelte sono:

• creare due progetti di cui uno contenente la nostra applicazione Silverlight e uno separato che fa riferimento e ospita la nostra applicazione
• creare un unico progetto contenente la nostra applicazione Silverlight con una semplice pagina html che ospiterà la nostra applicazione (visualizzerà cioè il plug-in di Silverlight che caricherà l'applicazione compilata) utile per i test

Per le finalità di questo articolo, ci basta creare un unico progetto con dentro una semplice pagina html di test quindi selezioniamo la seconda opzione.

Figura 1. Creare un'applicazione con pagina di prova

Disegnare l'interfaccia utente di una applicazione Silverlight significa capire e saper scrivere il linguaggio XAML, che utilizza dei marcatori (tag) in maniera simile a XHTML. Abbiamo a che fare principalmente con elementi e attributi che identificano i controlli e le relative opzioni.

Una volta creata un'applicazione Silverlight, l'ambiente di sviluppo mostra il pannello di design, con l'anteprima dell'interfaccia, e il pannello del codice, che ci mostra il markup XAML. È qui che inseriamo il codice del nostro layout.

Per default, l'interfaccia utente di base presenta un controllo Grid come container. Soffermiamoci ad esaminare questo elemento.

Grid

Il controllo Grid è un container molto versatile, può essere paragonato ad una tabella HTML e, come tutte le tabelle, è costituito di righe (rows) e colonne (columns), possiamo quindi inziare stabilendo il numero di righe e di colonne del nostro Grid, in questo modo creiamo le celle che ospiteranno tutti i controlli dell'interfaccia.

Aggiungiamo tre righe: per farlo inseriamo l'elemento <Grid.RowDefinitions>, che è contenitore delle le righe, ed inseriamo al suo interno 3 tag <RowDefinition> che definiscono le righe vere e proprie.

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    <RowDefinition />
  </Grid.RowDefinitions>
</Grid>

Per facilitare il design, possiamo visualizzare un bordo per le righe e colonne presenti nella Grid aggiungendo l'attributo ShowGridLines="True"

Figura 2. Dividere il layout in tre righe

Altri articoli

Altre guide

Altre newsletter