Использование панели Grid: форма контакта

В последних нескольких главах мы познакомились с большим объемом теоретической информации, и в каждой из глав были некоторые довольно абстрактные примеры. В данной главе мы объединим все что мы выучили о панели Grid в примере, который можно использовать на практике. Простая форма контакта.

Форма контакта удобна тем, что она является примером часто используемого диалогового окна. Соответственно вы можете взять используемые методики и применить их почти ко всем типам диалогов, которые вам понадобиться создать.

Вначале задача совсем простая – создаем основу контактной формы. Она состоит из трех рядов, два из которых имеют высоту типа Auto, а последний – типа «*», т.е. подразумевается, что он займет оставшееся пространство.

<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 занимают столько места, сколько необходимо, а последний текстовый блок занимает все оставшееся пространство. Попробуйте изменить размеры окна и вы увидите, что размеры блока комментариев “Comment” также будут изменяться.

В этом очень простом примере нет меток для обозначения того, для чего нужно то или иное поле. Вместо этого поясняющий текст помещен прямо в текстовый блок 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 является очень полезной панелью. Надеюсь, вы сможете использовать все ее возможности при создании собственных диалоговых окон.