The GridSplitter

これまでの記事で見たように、グリッドパネルは有効な空間を個々のセルに分割することが簡単にできます。カラムとロウの定義を使って、カラムとロウそれぞれがそれだけのスペースを占めるのかを簡単に決めることが出来ます。しかし、もし、ユーザーにこれを変更することができるようにするにはどうでしょうか？これは GridSplitter コントロールで行えます。

GridSplitter はグリッドのカラムまたはロウに単純に加えて使います。これはふさわしい空間、例えば５ピクセルを占めます。これはユーザーに端から端までまたは上から下までドラッグできるようにし、カラムまたはロウのそれぞれの側のサイズを変更します。これが例です。

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterSample" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>
</Window>

見てわかるように、２つの等しい幅のカラムの中央に５ピクセルのカラムを作りました。それぞれの側には要点を説明するためテキストブロックコントロール置いています。スクリーンショットでは、GridSplitter は２つのカラムを分割する線として描かれており、マウスを乗せるとすぐにカーソルがリサイズカーソルに変わります。

水平 GridSplitter

GridSplitter は大変簡単に使えて、もちろん水平分割も同様に備えています。実際、垂直を水平に変えるのに、次の例のようにほとんど何もする必要がありません。

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>

見ればわかるように、GridSplitter のカラムをロウに変えて、幅の代わりに高さを定義しただけです。GridSplitter は自動で自身の動作を決めますが、そうでない場合は、ロウかカラムかを指定するために ResizeDirection プロパティを使うことが出来ます。