The Grid - Spanning

グリッドのデフォルト動作では各コントロールは１個のセルを占めますが、ある１つのコントロールを複数のロウやカラムに置きたくなることがあります。幸運にもグリッドは添付プロパティの ColumnSpan と RowSpan でこれを簡単に行えます。このプロパティのデフォルト値は１ですが、ここに大きな値を設定して、コントロールを複数のロウやカラムにまたがって置くことが出来ます。

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 属性を使って２番目のロウの二つのカラムを占めています。

これは、パネルの組み合わせを使って同じ効果を得ることができるぐらい簡単ですが、少し発展したケースでは本当に有用です。これがどれだけパワフルなのかを見てみましょう。

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

３つのカラムと３つのロウで普通は９個のセルになりますが、この例では、有効なスペースをちょうど５個のボタンで埋めるように、ロウとカラムのスパニングの組み合わせを使っています。見ればわかりますが、コントロールは、余分のカラムや余分のロウ、そしてボタン４のように両方をスパン出来ます。

このように、グリッドのカラムまたは/とロウの複数のスパニングは大変簡単です。後の記事では、もっと具体的な例で、他のグリッドのテクニックと一緒にスパニングを使います。