Questo testo fa parte del capitolo 27 del libro “Visual Basic 2010 spiegato a mia nonna” che sarà pubblicato fra poche settimane. Trovate l’esempio di codice tra gli esempi liberamente scaricabili al seguente indirizzo: https://deghetto.wordpress.com/2011/02/05/libro-visual-basic-2010-spiegato-a-mia-nonna/
Un controllo Grid è utile per la creazione di interfacce utente complesse, quando si vogliono creare delle aree di riferimento distinte in cui inserire dei controlli e si vuole che al ridimensionamento della Grid corrisponda un ridimensionamento dei controlli.
La definizione XAML predefinita è la seguente:
1: <Grid
2: Height="100"
3: HorizontalAlignment="Left"
4: Margin="10,10,0,0"
5: Name="Grid1"
6: VerticalAlignment="Top"
7: Width="200" />
Le righe e le colonne, e quindi le celle della griglia, possono essere definite per mezzo del codice XAML o anche in modo visuale (ved. figura seguente).
Per creare una nuova suddivisione di riga o di colonna è sufficiente spostare il puntatore del mouse sul bordo laterale e precisamente sul lato sinistro o sul lato superiore. Con un clic del mouse sarà così possibile inserire direttamente il separatore. I separatori possono essere spostati con un semplice drag and drop del mouse e possono essere eliminati attraverso il menu contestuale (voce Elimina, cliccando con il tasto destro del mouse sul separatore).
Ogni controllo inserito nella finestra può essere spostato e inserito nella cella desiderata. Rilasciando il controllo in una cella, questo prenderà il riferimento alle coordinate della cella “padre”: l’angolo superiore sinistro della cella corrisponde alle coordinate (0, 0).
Se fissiamo i controlli su tutti i quattro lati (come per la proprietà Anchor di Windows Forms), ridimensionando la Grid, otterremo il proporzionale ridimensionamento anche di tutti i controlli ancorati.
Ovviamente per poter ridimensionare la Grid insieme alla finestra, è necessario ancorare anche la Grid stessa nello stesso modo.
L’esempio 27.06 vi mostra in pratica la possibilità di inserire i controlli e di ancorarli ai lati della Grid, anch’essa ancorata alla finestra (ved. figura seguente).
Vediamo come è fatta l’applicazione. Create una nuova applicazione WPF e sostituite il codice XAML con il seguente:
1: <!-- Esempio 27.06 -->
2: <Window x:Class="MainWindow"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: Title="MainWindow"
6: mc:Ignorable="d"
7: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9: Height="264" Width="389">
10: <Grid Margin="0,0,12,12" Name="Grid1" ClipToBounds="True">
11: <Grid.RowDefinitions>
12: <RowDefinition Height="137*" />
13: <RowDefinition Height="95*" />
14: </Grid.RowDefinitions>
15: <Grid.ColumnDefinitions>
16: <ColumnDefinition Width="58*" />
17: <ColumnDefinition Width="142*" />
18: </Grid.ColumnDefinitions>
19: <Button
20: Content="Button"
21: Margin="18,28,14,24"
22: Name="Button1" />
23: <Button
24: Content="Button"
25: Margin="27,28,49,24"
26: Name="Button2"
27: Grid.Column="1" />
28: <TextBox
29: Margin="28,20,21,18"
30: Name="TextBox1"
31: Grid.Column="1"
32: Grid.Row="1" />
33: </Grid>
34: </Window>
In questo caso non abbiamo codice Visual Basic, perché abbiamo più che altro voluto mostrarvi l’utilità della Grid nel ridimensionamento automatico dei controlli.
L'Angolo di SuperMario 