WPF – Il controllo Grid

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.

27.12

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).

27.13

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).

27.14

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.

Pubblicato il 14 febbraio 2011 su Novità. Aggiungi ai preferiti il collegamento . Lascia un commento.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: