Brug Grid kontrollen: En kontaktformular

I de sidste par afsnit har vi gennemgået en hel del teoretisk information, hver med nogle meget teoretiske eksempler. I dette afsnit vil vi kombinere det, vi har lært indtil nu omkring Grid kontrollen i et eksempel, der kan bruges i den virkelige verden: En simpel kontaktformular.

Det gode med kontaktformularer er, at det er en almindeligt brugt dialog - du kan tage de anvendte teknikker og bruge den på stort set enhver type af dialog, du ønsker at oprette.

Det første trin i opgaven er meget simpelt og vil vise dig en meget elementær kontaktformular. Den bruger tre rækker - to med Auto højder og den sidste med en stjernehøjde, så den optager resten af den tilgængelige plads.

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

Som du kan se, optager den sidste TextBox resten af pladsen, men de to første kun tager den plads, de behøver. Prøv at ændre størrelse på vinduet, og du vil se, at kommentar TextBox kontrollen ændrer størrelse med det.

I dette meget simple eksempel, er der ingen Label-kontroller, der fortæller hvad hvert af felterne skal bruges til. I stedet er den forklarende tekst placeret indeni TextBox-kontrollerne. Sådan ser en Windows dialog dog normalt ikke ud. Lad os prøve at forbedre udseendet og brugbarheden lidt:

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

Men måske er du i en situation, hvor kommentarfeltet er rimelig selvforklarende? I det tilfælde kan vi skippe etiketten og bruge ColumnSpan til at få endnu mere plads til kommentar TextBox kontrollen:

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

Så som du kan se, er Grid kontrollen et meget effektivt panel. Jeg håber, du kan bruge alle disse teknikker ved design af dine egne dialoger.