TOC

This article is currently in the process of being translated into Japanese (~91% done).

Panels:

The GridSplitter

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

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

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

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

水平 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 プロパティを使うことが出来ます。

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!