Il controllo Grid

Grid è probabilmente il più complesso dei tipi di pannelli. Un Grid può contenere molteplici righe e colonne. Si definisce un'altezza per ognuna delle righe a una larghezza per ognuna delle colonne, in modo assoluto con il numero di pixel, in percentuale dello spazio disponibile o in automatico, dove la riga o la colonna automaticamente aggiusteranno la loro dimensione a seconda della grandezza della finestra. Si utilizza la Grid quando gli altri pannelli non fanno il loro lavoro, ad esempio quando hai bisogno di più colonne o spesso in combinazione con gli altri tipi di pannelli.

Nella sua forma più semplice, la Grid semplicemente prenderà tutti i controlli che ci metti dentro e li allargherà fino ad usare il massimo spazio disponibile e li posizionerà sopra quelli precedenti:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Come puoi vedere, l'ultimo controllo prende la posizione superiore, non potendo vedere il primo bottone. Non è molto utile nella maggior parte delle situazioni, così proviamo a dividere lo spazio, che è la cosa che la Grid sa fare meglio. lo facciamo utilizzando ColumnDefinitions e RowDefinitions. Nel primo esempio, divideremo per colonne:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

In questo esempio, abbiamo semplicemente diviso lo spazio disponibile in due colonne, che condivideranno lo spazio equalmente, usando uno "star" di larghezza (questo lo spiegheremo dopo). Nel secondo bottone, ho usato la cosiddetta proprietà "Attached" per posizionare il bottone nella seconda colonna (0 è la prima colonna, 1 è la seconda, e così via). Avrei dovuto utilizzare la proprietà anche sul primo bottone per completezza, ma automaticamente quelle che non hanno la proprietà valorizzata, verrà posizionata nella prima colonna, che è esattamente dove la volevamo.

Come puoi vedere, il controllo prende tutto lo spazio disponibile, che è il comportamento predefinito quando la griglia arrangia i suoi controlli figli. Lo fa impostando HorizontalAlignment e VerticalAlignment sui suoi controlli figli su Stretch.

In alcune situazioni potresti desiderare che occupino solo lo spazio di cui hanno bisogno e/o controllino il modo in cui sono posizionati nella griglia. Il modo più semplice per farlo è impostare HorizontalAlignment e VerticalAlignment direttamente sui controlli che si desidera manipolare. Ecco una versione modificata dell'esempio sopra:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Come puoi vedere dallo screenshot risultante, il primo pulsante è ora posizionato in alto e al centro. Il secondo pulsante è posizionato al centro, allineato a destra.

Sommario

Grid è un panel molto versatile con molte più possibilità di quelle viste in questo articolo. Andremo molto più in profondità del resto in molti dei prossimi articoli.