Ứng dụng grid: Tạo 1 biểu mẩu

Trong vài chương vừa rồi, chúng tôi đã đưa ra rất nhiều thông tin lý thuyết, mỗi chương có một số ví dụ nhưng nó cũng chỉ mang tính lý thuyết. Trong chương này, chúng ta sẽ kết hợp những gì chúng ta đã học về Grid từ trước cho đến nay, thành một ví dụ có thể được sử dụng trong thế giới thực: Một form contact đơn giản.

Điểm hay của contact form là nó chỉ là một ví dụ về hộp thoại thường được sử dụng - bạn có thể sử dụng các kỹ thuật được sử dụng và áp dụng chúng cho hầu hết mọi loại hộp thoại mà bạn cần tạo.

Việc đầu tiên trong nhiệm vụ này rất đơn giản và sẽ cho bạn thấy một contact form rất cơ bản. Nó sử dụng ba hàng, hai trong số chúng có chiều cao tự động và hàng cuối cùng có chiều cao *, vì vậy nó lấp đầy phần còn lại của không gian:

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

Như bạn có thể thấy, TextBox cuối cùng chiếm không gian còn lại, trong khi hai cái đầu tiên chỉ chiếm không gian mà chúng yêu cầu. Hãy thử thay đổi kích thước cửa sổ và bạn sẽ thấy TextBox về bình luận tự thay đổi kích thước.

Trong ví dụ rất đơn giản này, không có bất cứ nhãn nào dùng để chỉ định mỗi trường dùng để làm gì. Thay vào đó, văn bản chú thích nằm trong TextBox, nhưng đây thường không phải là hộp thoại Windows chúng ta thường thấy. Hãy thử cải thiện giao diện và khả năng sử dụng một chút:

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

Nhưng có lẽ bạn đang ở trong một tình huống mà trường bình luận tự giải thích? Trong trường hợp đó, hãy bỏ qua nhãn và sử dụng ColumnSpan để có thêm không gian cho TextBox bình luận:

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

Vì vậy, như bạn có thể thấy, Grid là một panel rất mạnh mẽ. Hy vọng bạn có thể sử dụng tất cả các kỹ thuật này khi thiết kế các hộp thoại của riêng bạn.