Het Grid Gebruiken: Een Contactformulier

In de laatste paar hoofdstukken hebben we veel theoretische informatie doorgenomen, elk met enkele zeer theoretische voorbeelden. In dit hoofdstuk zullen we wat we tot nu toe over het Grid hebben geleerd, samen voegen tot een voorbeeld dat in de echte wereld kan worden gebruikt: een eenvoudig contactformulier.

Het goede aan het contact formulier is dat het gewoon een voorbeeld is van een veelgebruikte dialoog. Je kunt de gebruikte technieken toepassen op vrijwel elk type dialoog die je wenst te maken.

De eerste stap is heel eenvoudig en zal jou een basis contact formulier tonen. Het gebruikt drie rijen, waarvan met Auto hoogte en de laatste rij heeft als hoogte 'star', zodat de laatste rij de overgebleven ruimte inneemt:

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

Zoals je ziet, neemt de laatste Textbox de overgebleven ruimte in, terwijl de eerste twee Textboxen alleen die ruimte innemen die ze nodig hebben. Probeer het venster maar eens van formaat te wijzigen en je zult zien dat de Textbox 'Comment' ook van formaat wijzigt.

In dit heel eenvoudige voorbeeld zijn er geen labels aanwezig die duidelijk maken waar de velden voor bedoeld zijn. In plaats daarvan is de verduidelijkende tekst in de TextBox zelf opgenomen. Dit is echter niet conform hoe normaliter een Windows dialoog venster er uit ziet. Laten we proberen om de look en bruikbaarheid een beetje te verbeteren:

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

Maar misschien zit jij in de situatie dat het commentaar veld zeer voor zichzelf spreekt? Als dat het geval is, laten we dan het label 'Comment' dan weglaten en ColumnSpan gebruiken om meer ruimte te maken voor de comment TextBox.

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

Zoals je ziet, is Grid een zeer krachtig panel. Hopelijk kun jij al deze technieken gebruiken als jij je eigen dialogen ontwerpt.