方法 : ユーザーによるサイズ変更が可能なアプリケーションを GridSplitter で作成する

[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]

Grid コンテナー コントロールと共に GridSplitter コントロールを使用することにより、実行時にユーザーによってサイズを変更できるウィンドウ レイアウトを作成できます。 たとえば、領域に分割されている UI を持つアプリケーションで、ユーザーが分割線をドラッグすることにより、より多くの内容を見る必要がある領域を大きくすることができます。

GridSplitter コントロールを Grid に追加すると、このコントロールはグリッド コントロールの子になり、他の子コントロールと同じように、行と列内に配置する必要があります。 GridSplitter は、実行時にユーザーがグラブしてドラッグできるように、幅と高さをゼロ以外にする必要があります。

GridSplitter には次のベスト プラクティスがあります。

• GridSplitter は他のコントロールが含まれない専用行または専用列に配置します。

• GridSplitter が配置される行の高さまたは列の幅を Auto に設定します。

• 1 つの Grid を GridSplitter 専用にします。 コンテナー パネルを Grid に追加して、レイアウトを完成させます。

垂直の GridSplitter を作成するには

1. デザイン ビューで、Grid を選択します。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

2. GridSplitter を表示する列を追加します。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

   注意

   デザイナーでの行と列の配置が難しい場合があります。その場合は、XAML エディターを使用して Grid を構成できます。サンプル XAML マークアップの詳細については、このトピックの「使用例」を参照してください。

3. ツールボックスから、追加した列に GridSplitter コントロールをドラッグします。

4. [プロパティ] ウィンドウで、GridSplitter に対して次のプロパティを設定します。

   プロパティ	値	使用される値
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	列	Auto [列] Rows
   Grid.Column	GridSplitter を配置する列。 列番号は 0 から始まります。
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	Grid 内の行の総数。
   幅	ゼロ以外の数字。 10 など。
   高さ	Auto
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. デザイン ビューで、Grid を選択します。

6. GridSplitter が含まれる ColumnDefinition の Width を Auto に設定します。

水平の GridSplitter を作成するには

1. デザイン ビューで、Grid を選択します。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

2. GridSplitter を表示する行を追加します。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

   注意

   デザイナーでの行と列の配置が難しい場合があります。その場合は、XAML エディターを使用して Grid を構成できます。サンプル XAML マークアップの詳細については、このトピックの「使用例」を参照してください。

3. ツールボックスから、追加した行に GridSplitter コントロールをドラッグします。

4. [プロパティ] ウィンドウで、GridSplitter に対して次のプロパティを設定します。

   プロパティ	値	使用される値
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto [列] Rows
   Grid.Column	0
   Grid.ColumnSpan	Grid 内の列の総数。
   Grid.Row	GridSplitter を配置する行。 行番号は 0 から始まります。
   Grid.RowSpan	1
   幅	Auto
   高さ	ゼロ以外の数字。 10 など。
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. デザイン ビューで、Grid を選択します。

6. GridSplitter が含まれる RowDefinition の Height を Auto に設定します。

使用例

次の XAML で、水平の GridSplitter が作成されます。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

参照

処理手順

チュートリアル : WPF デザイナーによるサイズ変更可能なアプリケーションの作成

Reference

GridSplitter

その他の技術情報

WPF デザイナーのレイアウト

GridSplitter