Grid použitie: Kontaktný formulár

V posledných dvoch kapitolách sme prešli mnohými teoretickými informáciami, z ktorých každá obsahuje niekoľko teoretických príkladov. V tejto kapitole budeme kombinovať to, čo sme sa doteraz prebrali o Gride na príklade, ktorý sa dá použiť v reálnom svete: jednoduchý kontaktný formulár.

Dobrá vec na kontaktnom formulári je to, že je to príklad bežne používaného dialógu - tieto techniky môžete použiť a aplikovať ich na takmer akýkoľvek typ dialógu, ktorý potrebujete vytvoriť.

Prvá z týchto úloh je veľmi jednoduchá a ukáže vám celkom základný kontaktný formulár. Používa tri riadky, dva z nich s výškou Auto a posledný s výškou *, takže spotrebuje zvyšok priestoru:

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

Ako vidíte, posledný Textbox jednoducho zaberá zostávajúci priestor, zatiaľ čo prvé dva zaberajú len priestor, ktorý potrebujú. Skúste zmeniť veľkosť okna a uvidíte, že aj TextBox zmenil veľkosť.

V tomto veľmi jednoduchom príklade neexistujú žiadne prvky Label, ktoré by označovali, na čo sú všetky polia určené. Namiesto toho je vysvetľujúci text vo vnútri textového poľa, ale to nie je všeobecne to, ako vyzerá dialógové okno vo Windows. Pokúsme sa trochu vylepšiť vzhľad a použiteľnosť:

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

Ale možno ste v situácii, keď je pole s poznámkami dosť jasné? V takom prípade vynecháme Label a použijeme ColumnSpan na získanie ešte väčšieho priestoru pre komentár TextBox:

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

Tak ako vidíte, Grid je veľmi výkonný panel. Dúfame, že pri navrhovaní vlastných dialógov použijete všetky tieto techniky.