Utilizzare la Grid: Un form di contatto

Nei precedenti capitoli abbiamo introdotto molte informazioni teoriche, ognuna fornita con esempi altrettanto teorici. Nel presente capitolo combineremo quanto finora imparato riguardo al componente Grid in un esempio realmente applicabile: un semplice Contact Form

Il vantaggio offerto da un Contact Form è che rappreseta una finestra di dialogo comunemente usata - puoi estrapolare le tecniche qui introdotte e applicarle a quasi ogni altro tipo di finestra di dialogo avrai bisogno di creare.

Il primo passo è molto semplice, e mostra come risultato un contact form in forma essenziale. Utilizza tre righe, due delle quali impostate con altezza automatica e la terza con altezza "*", facendo sì che la stessa riga occupi il resto dello spazio disponibile:

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>		
		<TextBox>Name</TextBox>
		<TextBox Grid.Row="1">E-mail</TextBox>
		<TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>		
	</Grid>
</Window>

Come puoi vedere, l'ultimo TextBox semplicemente riempe lo spazio rimanente, mentre i primi due occupano solo lo spazio necessario. Prova a ridimensionare la finestra e vedrai come il TextBox "Comment" si riadatta alle nuove dimensioni.

In questo esempio molto semplificato non sono presenti labels ("etichette") atte ad indicare il tipo di informazione richiesta in ogni campo, ma è il testo stesso all'interno dei TextBox ad essere come indicazione. In generale, non è così che una finestra di dialogo di Windows viene gestita. Proviamo a apportare qualche miglioria in termini di visualizzazione e utilizzabilità:

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
	<Grid Margin="10">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Label>Name: </Label>
		<TextBox Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="1">E-mail: </Label>
		<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="2">Comment: </Label>
		<TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
	</Grid>
</Window>

Cosa fare nel caso in cui il campo per i commenti sia tanto palese nel suo utilizzo da non doverlo specificare? Una possibilità è non introdurre alcuna label ("etichetta") ed utilizzare "ColumnSpan" per ottenere ancora più spazio per i commenti:

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />

Come puoi vedere, lo strumento Grid ("griglia") è un pannello molto potente. Ora puoi sbizzarrirti ed utilizzare tutte queste tecniche nel design delle tue finestre di dialogo.