Elementi base per il layout di una applicazione 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

Tra le altre cose, l'elemento <RowDefinition> consente di specificare la proprietà Height. Questa proprietà consente di specificare l'altezza di una riga in 4 modi diversi:

Figura 3. Impostare l'altezza delle righe

Una volta presa confidenza con Height possiamo controllare la dimensione delle righe utilizzando altre due proprietà: MinHeight e MaxHeight, consentono di impostare rispettivamente la dimensione minima e massima che le righe potranno assumere.

Per le colonne seguiamo la stessa procedura: le colonne sono contenute in un elemento chiamato <Grid.ColumnDefinitions>. Procediamo ad aggiungerne 3.

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
  ...
  <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>
</Grid>

Le colonne si dimensionano utilizzando l'attributo Width. Il principio è lo stesso già visto per l'attributo Height delle righe. È possibile quindi specificare il valore, specificare il valore seguito dal simbolo '*', solo il simbolo '*', oppure Auto. Se necessario, la dimensione delle colonne può essere controllata anche aggiungendo gli attributi MinWidht e MaxWidth.

Ecco un esempio di una griglia con 3 righe e 3 colonne opportunamente dimensionate per ottenere una cella centrale correttamente distanziata dai margini.

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
  <Grid.RowDefinitions>
    <RowDefinition Height="10" />
    <RowDefinition Height="*" />
    <RowDefinition Height="10" />
    </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="10" />
  </Grid.ColumnDefinitions>
</Grid>

Figura 4. Layout con magini

Posizionare i controlli sulla griglia

Abbiamo definito finora una Grid di nome LayoutRoot, che ci è servita per creare il layout principale, utile anche per avere uno spazio tra i bordi esterni dell'applicazione Silverlight, che è un plug-in inserito nella pagina HTML, e i controlli all'interno del plug-in stesso.

In questa Grid abbiamo a disposizione una cella al centro che useremo per i contenuti. Quando il layout è complesso, possiamo pensare di innestare un'altra Grid che chiamiamo ContentGrid nella cella centrale che conterrà i singoli controlli necessari all'aplicazione.

Definiamo così la nuova Grid di nome ContentGrid all'interno della prima LayoutRoot

Una Grid è container di altri controlli. Ogni container (padre), che in questo esempio è una Grid, permette di definire il posizionamento dei controlli children (figli) specificando riga e colonna in cui inserirli. Vedremo che i container più semplici, Canvas e StackPanel, utilizzano sistemi diversi per posizionare i controlli.

Per posizionare la nuova Grid specifichiamo dunque gli attributi Row e Column in modo da inserirla nella cella centrale. La sintassi per la riga sarà Grid.Row="1", che fa riferimento alla seconda riga del container (l'indice è a base 0).

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
  <Grid.RowDefinitions><RowDefinition Height="10" /><RowDefinition Height="*"><RowDefinition Height="10" /></Grid.RowDefinitions>
  <Grid.ColumnDefinitions><ColumnDefinition Width="10" /><ColumnDefinition Width="*" /><ColumnDefinition Width="10" /></Grid.ColumnDefinitions>

  <Grid x:Name="ContentGrid" Grid.Row="1" Grid.Column="1" Background="White" ShowGridLines="True">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/><ColumnDefinition />
  </Grid.ColumnDefinitions>
  </Grid>

</Grid>

Vediamo ora un esempio in cui inseriamo due stringhe di testo, due textbox e un button. Per la stringa di testo ci serviremo del controllo TextBlock mentre per l'input dell'utente ricorreremo al tradizionale controllo TextBox. Apriamo una parentesi sul controllo TextBlock per dire che si usa quando è necessario rappresentare una piccola quantità di testo. L'elemento TextBlock è semplice da usare e svolge la funzione di una label.

<TextBlock>Hello world</TextBlock>

Dichiariamo i controlli all'interno del container ContentGrid e provvediamo a scegliere il posizionamento anche qui con l'utilizzo di Grid.Row e Grid.Column.

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
  ...
  <Grid x:Name="ContentGrid" Background="White" ShowGridLines="True" Grid.Row="1" Grid.Column="1" >
  ...
    <TextBlock x:Name="lblTitolo" Grid.Row="0" Grid.Column="0">Form dati</TextBlock>
    <TextBlock x:Name="lblNome" Grid.Row="1" Grid.Column="0">Nome</TextBlock>
    <TextBlock x:Name="lblCognome" Grid.Row="2" Grid.Column="0">Cognome</TextBlock>
    
    <TextBox x:Name="txtNome" Grid.Row="1" Grid.Column="1"></TextBox>
    <TextBox x:Name="txtCognome" Grid.Row="2" Grid.Column="1"></TextBox>
    
    <Button x:Name="btnEsegui" Grid.Row="3" Grid.Column="1" Height="30" Content="Esegui" Margin="5" />
  </Grid>
</Grid>

Figura 5. Disposizione degli elementi nella griglia

Abbiamo aggiunto l'attributo Margin al bottone per definire uno spessore in pixel tra il controllo e la cella che lo contiene e gli attributi. Potremmo utilizzare HorizontalAlignment e VerticalAlignment per modificare il posizionamento orizzontale e verticale.

Infine l'attributo Grid.ColumnSpan può essere utile quando vogliamo unire due o pià celle sulla stessa riga, ad esempio per definire un titolo nella prima riga e al centro delle due colonne (Grid.ColumnSpan="2").

Lo StackPanel

Lo StackPanel è uno dei controlli che derivano da Panel e che rappresentano i container di una applicazione Silverlight. StackPanel è molto semplice: i controlli al suo interno sono rappresentati uno di seguito all'altro in senso verticale oppure in senso orizzontale. È necessario quindi impostare l'attributo Orientation per definire l'orientamento verticale o orizzontale. Il valore di default è Vertical.

Possiamo anche impostare l'attributo Margin, per definire la quantità di spazio tra lo StackPanel e il suo eventuale container. Ogni elemento contenuto al suo interno potrà singolarmente definire l'attributo Margin e impostare lo spazio rispetto agli altri children.

In questo esempio, impostiamo come contenitore uno StackPanel con all'interno dei rettangoli colorati disposti orizzontalmente.

<StackPanel Background="White" Orientation="Horizontal">
  <Rectangle Fill="Red" Margin="10" Width="70" Height="70" />
  <Rectangle Fill="Green" Margin="10" Width="70" Height="70" />
  <Rectangle Fill="Blue" Margin="10" Width="70" Height="70" />
  <Rectangle Fill="Black" Margin="10" Width="70" Height="70" />
</StackPanel>

Figura 6. StackPanel orizontale

In quest'altro esempio usiamo lo StackPanel per visualizzare dei controlli in verticale:

<StackPanel Background="White" Orientation="Vertical">
  <TextBlock HorizontalAlignment="Left" Margin="10" >Form dati</TextBlock>
  <TextBox x:Name="txtLabel" Width="150" HorizontalAlignment="Left" Margin="10"></TextBox>
  <Button x:Name="btnVai" Height="30" Width="150" Content="Esegui" HorizontalAlignment="Left" Margin="10" />
</StackPanel>

Figura 7. Esempio di form con StackPanel

Un approfondimento merita l'attributo Margin. Quando impostiamo questo attributo con un unico valore, esprimiamo in pixel lo spazio valido su tutti i lati che separano il nostro controllo dal suo container. È possibile specificare singolarmente i valori Left, Top, Right, Bottom

Margin = "10, 5, 10, 5"

Oppure solo due valori. In questo caso definiremmo i due valori Top e Bottom e i due valori Left e Right Per ottenere in questo secondo modo il margine destro e sinistro pari a 10 e superiore e inferiore pari a 5, impostiamo l'attributo così:

Margin="20, 10"

Per dimensionare automaticamente lo UserControl che rappresenta la nostra pagina alle dimensioni dello StackPanel può essere utile impostare l'attributo Width="Auto".

Canvas

Il Canvas è un container che permette di indicare la posizione dei controlli con un sistema di coordinate centrato nell'angolo in alto a sinistra dell'elemento. Per stabilire la posizione di un controllo dobbiamo indicare la distanza in pixel dal bordo sinistro (Canvas.Left) e da quello superiore (Canvas.Top). Essendo un posizionamento assoluto, potrebbe dare problemi quando effettuiamo il ridimensionamento automatico dei controlli in base alla risoluzione sullo schermo.

Ecco un esempio di Canvas contenente due figure sovrapposti

<Canvas Background="White">
  <Rectangle Fill="Black" Canvas.Left="80" Canvas.Top="80" Canvas.ZIndex="1" Opacity="0.5" Width="150" Height="150"/>
  <Ellipse Fill="red" Canvas.Left="50" Canvas.Top="50" Canvas.ZIndex="0" Width="150" Height="150" />
</Canvas>

Figura 8. Elementi grafici in Canvas

Attributi interessanti sono ZIndex, che permette di gestire la sovrapposizione delle figure, e Opacity, che può essere combinato con quello dei controlli dello stesso Canvas e usato per creare effetti di trasparenza rispetto agli altri elementi sulla pagina.

Link utili

• Silverlight Layout System
• Silverlight User Interface Controls