Použití Gridu: Kontaktní formulář

V posledních několika kapitolách jsme prošli mnoho teoretických informací, každá s několika velmi teoretickými příklady. V této kapitole spojíme to, co jsme se dosud naučili o Gridu, do příkladu, který lze použít v reálném světě: Jednoduchý kontaktní formulář.

Dobrá věc na kontaktním formuláři je, že je to jen příklad běžně používaného dialogu - techniky použité můžete vzít a aplikovat téměř na jakýkoliv typ dialogu, který potřebujete vytvořit.

První pokus je velmi jednoduchý a ukáže vám velmi základní kontaktní formulář. Používá tři řádky, dva z nich s automatickými výškami a poslední s výškou hvězdy (*), takže spotřebuje zbytek dostupného prostoru:

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

Jak vidíte, poslední TextBox jednoduše zabírá zbývající prostor, zatímco první dva zabírají pouze prostor, který potřebují. Zkuste změnit velikost okna a uvidíte, že TextBox s komentářem se přizpůsobí.

V tomto velmi jednoduchém příkladu nejsou žádné popisky, které by označovaly, k čemu jednotlivá pole slouží. Místo toho je vysvětlující text uvnitř TextBoxu, ale to obecně není způsob, jak vypadá dialog Windows. Pojďme trochu vylepšit vzhled a použitelnost:

<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žná jste v situaci, kdy je pole pro komentář poměrně samovysvětlující? V takovém případě nechme popisek stranou a použijme ColumnSpan, abychom získali ještě více místa pro TextBox s komentářem:

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

Jak vidíte, Grid je velmi mocný panel. Doufám, že všechny tyto techniky použijete při návrhu vašich vlastních dialogů.