Grid - Spanning

Grid의 기본 동작은 각 컨트롤이 하나의 셀을 차지하지만, 때때로 특정 컨트롤이 더 많은 행이나 열을 차지하도록 만들어야 하는 경우가 있습니다. 다행히 Grid 내부의 ColumnSpan 및 RowSpan 속성을 사용하여 이를 매우 쉽게 지정할 수 있습니다. 이 속성의 기본값은 분명히 1이지만, 더 많은 행이나 열에 컨트롤을 적용 할 수 있도록 더 큰 숫자를 지정할 수 있습니다.

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>

우리는 단지 두 개의 열과 두 개의 행을 정의했고, 이들 모두는 해당 위치의 동등한 공간을 차지합니다. 처음의 두 버튼은 정상적으로 열을 사용하지만 세 번째 버튼은 ColumnSpan 속성을 사용하여 두 번째 행에 두 개의 열을 차지하게 됩니다.

이것은 매우 간단해서 같은 효과를 내기 위해 다른 패널 조합을 사용할 수 있겠지만, 좀 더 고급의 레이아웃인 경우에는 정말 유용합니다. 다음 예제는 Grid가 얼마나 강력한 지 보여줍니다.

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

3개의 열과 3개의 행을 사용하면 일반적으로 9개의 셀을 갖지만, 위 예제에서는 행과 열의 span 조합을 사용하여 5 개의 버튼으로 공간을 채웁니다. 보시다시피 버튼4 컨트롤은 열과 행 둘 다에 다른 남는 영역에 걸쳐있을 수 있습니다.

보시다시피, Grid는 여러 열과 행을 spanning하는 것은 매우 쉽습니다. 다음 챕터에서는 보다 spanning을 사용한 실용적인 그리드 기술을 예제로 들 것입니다.