La Grid - Unità

Fino ad ora noi abbiamo usato soprattutto le star per impostare larghezze e altezze, che specificano che una riga o una colonna dovrebbe occupare una certa percentuale di spazio combinato. Ma ci sono altre 2 modi di specificare larghezza e altezza in una riga: unità assolute e auto. Proviamo a creare una griglia con un mix di queste:

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

In questo esempio, il primo bottone ha una larghezza star, il secondo una larghezza automatica e la terza ha una larghezza statica di 100 pixel.

Il risultato come puoi vedere dall'immagine, è il seguente. Il secondo bottone prende l'esatta quantità di spazio che gli serve per renderizzare il suo largo testo. Il terzo bottone prende esattamente i 100 pixel di spazio che gli è stato assegnato e il primo bottone, che ha una larghezza variabile, prende il resto.

In una griglia dove una o più colonne (o righe) hanno una larghezza variabile (star), automaticamente avranno la larghezza o altezza che non viene usata dalle colonne o righe che hanno una larghezza o altezza assoluta o automatica. Questo diventa più ovvio se ridimensioniamo la finestra:

Nella prima immagine, tu vedrai la griglia che riserva lo spazio per gli ultimi 2 bottoni, anche se questo significa che la prima non avrà abbastanza spazio libero di cui avrebbe bisogno per essere renderizzato correttamente. Nella seconda immagine, tu vedrai gli ultimi 2 bottoni mantenere l'esatta quantità di spazio, lasciando lo spazio in avanzo al primo bottone.

Questa tecnica può essere molto utile se stai progettando una window con tanti input. Immagina per esempio una pagina di contatto dove l'utente inserisce un nome, un indirizzo email e un commento. I primi 2 campi avranno un'altezza fissa, mentre l'ultima dovrebbe prendere quanto più spazio possibile, lasciando all'utente la possibilità di inserire un lungo commento. Nel prossimo capitolo, proveremo a costruire una pagina di contatto, usando griglie con righe e colonne con differenti altezze e larghezze.