YKSoftware - for WPF Developers

Standard Controls - Grid

　コントロールを格子状に並べるためのコントロールです。 RowDefinitions プロパティと ColumnDefintions プロパティで行と列の定義をおこない、 Row 添付プロパティと Column 添付プロパティによって各コントロールの配置を決定します。

ページ内リンク

RowDefinitions プロパティと ColumnDefinitions プロパティ
Row 添付プロパティと Column 添付プロパティ
RowSpan 添付プロパティと ColumnSpan 添付プロパティ
GridSplitter による高さまたは幅の動的変更

RowDefinitions プロパティと ColumnDefinitions プロパティ

RowDefinitions プロパティには定義したい行数分だけ RowDefinition を並べることで Grid コントロールの行に関する定義をおこないます。例えば 3 行の行を定義する場合は次のようになります。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="200" Width="250">
    <Grid Background="Cornsilk">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    </Grid>
</Window>

Code 1 : RowDefinitions プロパティに 3 行分の定義を指定する

上記のように記述すると、XAML デザイナー上の表示が次のように 3 行分の領域として認識します。

行の高さは Height プロパティで変更できますが、特に指定しない場合は残っている領域を等分した高さになります。この比率を変更したい場合は "*" を使って表現します。例えば 2 行目を他の行の 2 倍の高さにしたい場合は "2*" と表記します。

<Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition Height="2*" />
    <RowDefinition />
</Grid.RowDefinitions>

Code 2 : 2 行目の高さを他の行の 2 倍にする

もちろん絶対値で指定することもできます。

<Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="2*" />
    <RowDefinition />
</Grid.RowDefinitions>

Code 3 : 1 行目を絶対値で指定する

ここで、ウィンドウの高さを 200 から 300 に変更してみます。すると、絶対値で指定されている 1 行目は高さが変わらず、その他の行はウィンドウの高さに応じて高さが変わっていますが、 2 行目が 3 行目の 2 倍の高さを持っていることに変わりはありません。

試しに Button コントロールを置いてみます。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="300" Width="250">
    <Grid Background="Cornsilk">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="2*" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Button Content="Click me!"/>
    </Grid>
</Window>

Code 4 : Button コントロールを配置する

Grid コントロール内でコントロールを配置した場合、特に指定しない限りそのコントロールは 1 行 1 列の位置に配置されます。

　この状態では、Button コントロールが Grid コントロールに合わせてサイズが自動調整されています。これを、Grid コントロールが Button コントロールに合わせてサイズが自動調整されるようにするには、 RowDefinitions の Height プロパティに "Auto" を指定します。

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition />
</Grid.RowDefinitions>

Code 5 : Height に Auto を指定する

Fig.6 : 行の高さが Button コントロールに合わせて自動調整されている

　また、MinHeight プロパティや MaxHeight プロパティによって行の高さの最小値または最大値を指定することもできます。ウィンドウサイズが変更されたときにレイアウトを崩したくないときなどに使用します。

<Grid.RowDefinitions>
    <RowDefinition MaxHeight="40" />
    <RowDefinition Height="2*" />
    <RowDefinition />
</Grid.RowDefinitions>

Code 6 : 行の高さの最大値を指定している

Fig.7 : 1 行目の高さが最大値となっているため 3 行目の高さより小さい

このように、Height プロパティを指定していないので本来は 3 行目と同じ高さとなるはずですが、 MaxHeight プロパティによって高さを制限されているため、ウィンドウサイズによっては 3 行目の高さと異なるようになります。

　以上が行に関する定義方法です。列に関しては "Row" の部分が "Column" に変わり、 "Height" の部分が "Width" に変わるだけで、後はすべて同じなのでここでは説明を省略します。

Row 添付プロパティと Column 添付プロパティ

　Grid 内のコントロールの配置を変更するには、 Grid コントロールの Row 添付プロパティおよび Column 添付プロパティを使用します。添付プロパティとは、任意のオブジェクトに対して設定できるプロパティで、ここでは配置を指定したいコントロールに対して設定します。

　サンプルとして次のような 3 行 3 列の Grid コントロールを対象とします。この Grid コントロールには既に Button コントロールを配置して言いますが、その位置は特に指定していません。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="200" Width="250">
    <Grid Background="Cornsilk">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Button Content="(2, 3)" />
    </Grid>
</Window>

Code 7 : 3 行 3 列の Grid コントロール

Button コントロールの配置を特に指定していないため、既定値である 1 行 1 列に表示されています。例えばこの Button コントロールを 3 行 2 列に表示させたい場合、 Button コントロールに対して Grid の Row 添付プロパティおよび Column 添付プロパティを次のように指定します。

<Button Grid.Row="2" Grid.Column="1" Content="(3, 2)" />

Code 8 : 添付プロパティを指定する

行番号および列番号は 0 始まりとなるので、3 行 2 列を指定する場合は XAML 上では Row に 2、Column に 1 を指定します。

RowSpan 添付プロパティと ColumnSpan 添付プロパティ

　Grid の中で行または列を結合させることもできます。例えば Fig.9 のように 3 行 2 列に表示されている Button コントロールを、右隣の行と結合させて配置したいときは次のように ColumnSpan 添付プロパティを指定します。

<Button Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Content="(3, 2)" />

Code 9 : ColumnSpan 添付プロパティを指定する

2 列を結合したいので ColumnSpan 添付プロパティに 2 を指定しています。行に関する結合は RowSpan 添付プロパティを使用して同様に指定します。

GridSplitter による高さまたは幅の動的変更

　GridSplitter コントロールによって、Grid コントロールの行の高さまたは列の幅をマウス操作で変更できるようになります。次のコードは 3 行の Grid コントロールの 2 行目に GridSplitter コントロールを配置することで、 1 行目と 3 行目の境界線を動かすような UI を実現しています。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="200" Width="250">
    <Grid Background="Cornsilk">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <GridSplitter Grid.Row="1" Height="5" ResizeDirection="Rows" HorizontalAlignment="Stretch" />
    </Grid>
</Window>

Code 10 : GridSplitter コントロールの配置

　次のコードは 3 列の Grid コントロールで 1 列目と 3 列目に境界線を作るコードです。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="200" Width="250">
    <Grid Background="Cornsilk">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <GridSplitter Grid.Column="1" Width="5" ResizeDirection="Columns" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    </Grid>
</Window>

Code 11 : GridSplitter コントロールの配置

ここで注意しなければならないのは、HorizontalAlignment プロパティに Center を指定しているところです。もし HorizontalAlignment プロパティを指定しない場合、 GridSplitter をドラッグ操作しようとしても、なぜか左に動きません。また、右に動かすと左のコンテンツと GridSplitter の間に変な余白ができてしまいます。下図は 1 列目に "ひだり" ボタン、3 列目に "みぎ" ボタンを配置し、 GridSplitter の HorizontalAlignment プロパティを指定せずに起動した結果です。

Fig.13 : HorizontalAlignment を指定せずに起動して右にドラッグしてみた