The Grid - Kéo dài một control sang một ô khác (Span)

Grid mặc định là mỗi control sẽ chiếm một ô, nhưng đôi khi bạn muốn một control nhất định sẽ chiếm nhiều hàng hoặc cột hơn. May mắn thay, Grid làm điều này rất dễ dàng, với các thuộc tính Đính kèm ColumnSpan và RowSpan. Giá trị mặc định cho thuộc tính này rõ ràng là 1, nhưng bạn có thể chỉ định một số lớn hơn để làm cho control kéo dài nhiều hàng hoặc cột hơn.

Đây là một ví dụ rất đơn giản, trong đó chúng tôi sử dụng thuộc tính ColumnSpan:

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

Chúng tôi chỉ xác định hai cột và hai hàng, tất cả chúng đều chiếm phần bằng nhau. Hai nút đầu tiên chỉ sử dụng các cột thông thường, nhưng với nút thứ ba, chúng tôi làm cho nó chiếm không gian của hai cột trên hàng thứ hai bằng cách sử dụng thuộc tính CộtSpan.

Điều này đơn giản đến mức chúng ta có thể chỉ cần sử dụng kết hợp các panel với nhau để đạt được hiệu quả tương tự, nhưng đối với các trường hợp nâng cao hơn một chút, điều này thực sự hữu ích. Hãy thử một cái gì đó tốt hơn cho thấy mức độ mạnh mẽ của nó:

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpanAdvanced" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button Grid.ColumnSpan="2">Button 1</Button>
		<Button Grid.Column="3">Button 2</Button>
		<Button Grid.Row="1">Button 3</Button>
		<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
		<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
	</Grid>
</Window>

Với ba cột và ba hàng, thông thường chúng ta sẽ có 9 ô, nhưng trong ví dụ này, chúng tôi sử dụng kết hợp giữa hàng và cột kéo dài để lấp đầy tất cả không gian có sẵn chỉ bằng năm nút. Như bạn có thể thấy, một control có thể kéo dài cả cột bổ sung, hàng bổ sung hoặc trong trường hợp nút số 4: là cả hai.

Vì vậy, như bạn có thể thấy, việc kéo dài nhiều cột và/hoặc hàng trong Grid rất dễ dàng. Trong bài viết sau, chúng tôi sẽ sử dụng kéo dài, cùng với tất cả các kỹ thuật khác của Grid trong một ví dụ thực tế hơn.