The Grid Control

グリッドはおそらく、一番複雑なパネルです。グリッドは複数のロウとカラムを持つことが出来ます。各ローの高さ、各カラムの幅をピクセル数の絶対値でも、または有効なスペースに対する割合で、すなわち自動で指定できます。自動の場合はロウまたはカラムは依存するコンテンツの大きさに自動的に調整されます。グリッドは他のパネルが使えないときに使います。例えば複数のカラムで他のパネルとの組み合わせが必要な場合などです。

最も簡単なフォームでは、グリッドは単純に置かれた全てのコントロールを受け取り、それらを有効なスペースいっぱいに引き伸ばして、重ねて置きます。

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

このように、最後のコントロールが最上位のポジションを占めていて、最初のボタンは見えさえしません。ほとんどの状況では使いやすいとは言えませんが、スペースを分割してみましょう。これはグリッドでうまく行えます。ColumnDefinitions と RowDefinitions を使ってこれを行います。最初の例ではカラムをくっつけます。

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

この例では、有効な空間を単純に二つのカラムに分けています。これらは「スター幅」を使ってちょうど半分になっています（これについては後で説明します）。２番目のボタンはいわゆる添付プロパティを使って２番目のカラムに貼り付けています（０が最初のカラム、１が二番目のカラムです）。このプロパティを使って最初のボタンも同様に貼り付けることが出来ましたが、それは自動的に最初のカラムで最初のロウに割り当てられました。これはここで実行したかったことでした。

見ればわかりますが、コントロールは有効なスペース全体を占めています。これはグリッドが子コントロールを配置するデフォルト動作です。グリッドは HorizontalAlignment と VerticalAlignment の設定で子コントロールを引き伸ばします。

ある状況では、コントロールに必要なスペースだけを占めるようにして、または・さらに、グリッドの中にどの様に配置するかコントロールしたい場合も有るでしょう。これを行う最も簡単な方法は操作したいコントロールの HorizontalAlignment と VerticalAlignment を直接設定することです。これが上の例を変更した例です。

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

結果のスクリーンショットでは、最初のボタンは上の中央に配置されています。二番目のボタンは中央で、右に寄せられています。

まとめ

Gridはこの記事に収まりきらないほどいろいろな用途に使えるパネルです。次からの記事ではもっと深くまで掘り下げていきたいと思います。