Control Grid

Grid có lẽ là phức tạp nhất trong các loại panel. Một lưới có thể chứa nhiều hàng và cột. Bạn xác định chiều cao cho mỗi hàng và chiều rộng cho mỗi cột, theo số lượng pixel tuyệt đối, theo tỷ lệ phần trăm của không gian có sẵn hoặc dưới dạng tự động, trong đó hàng hoặc cột sẽ tự động điều chỉnh kích thước của nó tùy thuộc vào Nội dung. Sử dụng Grid khi các panel khác không thực hiện việc nào đó, ví dụ: khi bạn cần nhiều cột và thường kết hợp với các bảng khác.

Ở dạng cơ bản nhất, Grid sẽ chỉ cần lấy tất cả các control bạn đặt vào nó, kéo dài chúng để sử dụng không gian có sẵn tối đa và chồng lên nhau:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Như bạn có thể thấy, control cuối cùng có được vị trí trên cùng, trong trường hợp này có nghĩa là bạn thậm chí không thể nhìn thấy nút đầu tiên. Nó không hữu ích lắm cho hầu hết các tình huống, vì vậy, hãy thử phân chia không gian, đó là những gì Grid làm rất tốt. Chúng tôi thực hiện điều đó bằng cách sử dụng ColumnDefinitions và RowDefinitions. Trong ví dụ đầu tiên, chúng tôi sẽ bám vào các cột:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

Trong ví dụ này, chúng tôi chỉ đơn giản chia không gian có sẵn thành hai cột, có không gian bằng nhau, sử dụng "chiều rộng sao" (điều này sẽ được giải thích sau). Trên nút thứ hai, tôi sử dụng một thuộc tính được gọi là Đính kèm để đặt nút vào cột thứ hai (0 là cột đầu tiên, 1 là cột thứ hai và cứ như thế). Tôi cũng có thể đã sử dụng thuộc tính này trên nút đầu tiên, nhưng nó tự động được gán cho cột đầu tiên và hàng đầu tiên, đó chính xác là những gì chúng tôi muốn ở đây.

Như bạn có thể thấy, các control chiếm tất cả không gian có sẵn, bởi đây là thứ được thiết lập sẵn khi Grid sắp xếp các child control của nó. Nó thực hiện điều này bằng cách đặt HorizontalAlignment và VerticalAlignment trên các child control của nó thành Stretch.

Trong một số trường hợp, bạn có thể muốn chúng chỉ chiếm không gian mà chúng cần và / hoặc kiểm soát cách chúng được đặt trong Grid. Cách dễ nhất để làm điều này là đặt HorizontalAlignment và VerticalAlignment trực tiếp trên các control mà bạn muốn thao tác. Đây là phiên bản sửa đổi của ví dụ trên:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Như bạn có thể thấy từ ảnh chụp màn hình kết quả, nút đầu tiên hiện được đặt ở trên cùng và ở giữa. Nút thứ hai được đặt ở giữa, căn chỉnh bên phải.

Sơ lược

Grid là một panel linh hoạt, vơi rất nhiều khả năng mà chưa được nhắc đến trong bài viết này. Chúng ta sẽ tìm hiểu sâu hơn về phần còn lại của chúng trong vài bài viết tiếp theo