Застосування контейнера Grid. Створення контактної форми

В попередніх статтях ми пройшли через значний об'єм теоретичного матеріалу. При його вивченні ми використовували зовсім не практичні прикалади. Але у цій статті ми поєднаємо всі набуті знання, щоб створити зразок, який можна використовувати в реальномі житті: просту контактну форму.

Хорошою рисою контактною форми є те, що вона являє собою поширене діалогове вікно. Отже знанні набуті при її створенні можна використати для створення будь-якого діалогового вікна.

Перша заготовка цього завдання дуже просто і являє собою основу контактної форми. Вона містить 3 рядки. 2 із них мають автоматичну висоту, а третій - відносну (виражену в зірках). Тож він займає решту доступнго простору:

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

Як ви бачите, останній TextBox займає весь доступний простір, а решта - лише необхідний. Змініть розмір вікна, і ви побачите, як TextBox для коментарів змінить свій розмір слідом за ним.

В цьому елементарному пррикладі немає підписів, які показують призначення полів. Цю роль виконє текст всередині самих елементів TextBox. Однак, зазвичай, діалогові вікна у Windows так не виглядають. Тож давайте трохи покращимо зовнішній вигляд:

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

Однак, можливо, вам здається, шо поле для коментарів зрозуміле і без підпису. Тож заберімо його та використаймо властивість ColumnSpan, щоб виділити ще більше місця для поля:

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

Тож, як ви бачите, Grid - це дуже ефективний контейнер. Сподіваюся: ви зможете використати ці навички при верстанні власних діалогових вікон.