Użycie Grid'a: formularz kontaktowy

W kilku ostatnich rozdziałach przeszliśmy przez dużą ilość teorii wraz z czysto teoretycznymi przykładami. W tym rozdziale połączymy to, czego nauczyliśmy się dotychczas o siatce i użyjemy w przykłądzie z prawdziwego zdarzenia: prosty formularz kontaktowy.

Zaletą formularza kontaktowego jest to, że prezentuje on powszechnie wykorzystywane okno dialogowe – zawsze możesz wrócić do zastosowanych w nim technik i użyć ich w każdym innym typie okna.

Pierwsze podejście do tego zadania jest mocno uproszczone i pokazuje prosty formularz kontaktowy. Wykorzystuje on trzy rzędy: dwa pierwsze z automatyczną wysokością i ostatni z wysokością „gwiazdkową“, która ma wypełnić pozostałą dostępną przestrzeń:

<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 widzisz, ostatni TextBox zajął całą pozostałą przestrzeń, podczas gdy pierwsze dwa zajmują tylko tyle miejsca ile potrzebują. Zmieniając rozmiar okna zobaczysz również jak pole komentarza zmienia się wraz z nim.

W tym bardzo prostym przykładzie brakuje etykiet do opisu pól. Zamiast nich jest tekst wewnątrz TextBox'ów, jednak nie tak powinno wyglądać okienko dialogowe. Spróbujmy trochę poprawić jego wygląd i użyteczność:

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

Może jednak uważasz, że pole komentarza jest całkowicie intuicyjne i nie wymaga dodatkowego wyjaśnienia. W takim przypadku usuńmy etykietę i użyjmy właściwości ColumnSpan, aby uzyskać jeszcze więcej miejsca dla naszego TextBox'a:

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

Więc, jak widzisz, siatka jest niezwykle użytecznym panelem. Mam nadzieję, że wykorzystasz poznane tu techniki podczas projektowania swoich własnych okien.