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 ikke kun er et eksempel på en almindelig brugt dialog - du kan tage de anvendte teknikkerne og bruge dem på stort set enhver type dialog, du vil 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 etiketter til at angive hvad hvert felt skal bruges til. I stedet er der en forklarende tekst inde i TextBox kontrollerne, men det er generelt ikke sådan, en Windows dialog ser ud. Lad os forbedre udseende og brugbarhed en smule:

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