The Grid - Units

Cho đến nay chúng ta chủ yếu sử dụng chiều rộng / chiều cao của sao, trong đó chỉ định rằng một hàng hoặc một cột sẽ chiếm một tỷ lệ nhất định của không gian kết hợp. Tuy nhiên, có hai cách khác để chỉ định chiều rộng hoặc chiều cao của cột hoặc hàng: Đơn vị tuyệt đối và Chiều rộng / chiều cao tự động. Hãy thử tạo một Grid nơi chúng ta có các kiểu này:

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

Trong ví dụ này, nút đầu tiên có chiều rộng sao, nút thứ hai có chiều rộng được đặt thành Tự động và nút cuối cùng có chiều rộng tĩnh là 100 pixel.

Kết quả có thể được nhìn thấy trên ảnh chụp màn hình, trong đó nút thứ hai chỉ chiếm chính xác dung lượng cần thiết để hiển thị văn bản của nó, nút thứ ba lấy chính xác 100 pixel mà nó đã hứa và nút đầu tiên, với chiều rộng thay đổi, phần còn lại là núi thứ nhất

Trong Grid nơi một hoặc một số cột (hoặc hàng) có chiều rộng (sao) thay đổi, chúng sẽ tự động chia sẻ chiều rộng / chiều cao chưa được sử dụng bởi các cột / hàng sử dụng chiều rộng / chiều cao tuyệt đối hoặc Tự động. Điều này trở nên rõ ràng hơn khi chúng ta thay đổi kích thước cửa sổ:

Trên ảnh chụp màn hình đầu tiên, bạn sẽ thấy Grid giữ khoảng trống cho hai nút cuối cùng, mặc dù điều đó có nghĩa là nút đầu tiên không có đủ không gian cần thiết để hiển thị đúng. Trên ảnh chụp màn hình thứ hai, bạn sẽ thấy hai nút cuối cùng giữ cùng một không gian chính xác, để lại không gian dư thừa cho nút đầu tiên.

Đây có thể là một kỹ thuật rất hữu ích khi thiết kế một loạt các hộp thoại. Ví dụ, hãy xem xét một form contact đơn giản trong đó người dùng nhập tên, địa chỉ email và nhận xét. Hai trường đầu tiên thường sẽ có chiều cao cố định, trong khi trường cuối cùng cũng có thể chiếm nhiều không gian nhất có thể, để lại chỗ để nhập bình luận dài hơn. Trong chương tiếp theo, chúng tôi sẽ thử xây dựng một form contact, sử dụng Grid và các hàng và cột có chiều cao và chiều rộng khác nhau.