GridSplitter Resizer

GridSplitter は Grid の中に配置して行・列のサイズをドラッグで変更できるコントロールです。リサイズ可能なペインレイアウトの実装に使用されます。

概要

WPF の GridSplitter は Grid 内のセルに配置することで、ユーザーがドラッグして隣接する行や列のサイズを変更できるようにするコントロールです。ファイルエクスプローラーのナビゲーションペインとコンテンツペインの境界線のような UI を実現します。

ResizeDirection が Auto（デフォルト）の場合、GridSplitter の配置と HorizontalAlignment/VerticalAlignment から自動的にリサイズ方向を判断します。列を分割する垂直スプリッターには HorizontalAlignment="Center"、行を分割する水平スプリッターには VerticalAlignment="Center" を設定するのが一般的です。

ShowsPreview を True にすると、ドラッグ中に半透明のプレビューが表示され、マウスボタンを離すまでリサイズが確定しません。False（デフォルト）ではドラッグ中にリアルタイムでサイズが変化します。

GridSplitter は Control を継承しているため、Background、BorderBrush、Template などをカスタマイズして見た目を変更できます。ドラッグハンドルを示すドットパターンやグラデーションなどのカスタムスプリッターを作成できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`ResizeDirection`	`Auto / Columns / Rows`	ユーザーが実行時にペイン幅や高さを自由に調整できるようにしたい場合（ファイルエクスプローラー・コードエディター・IDE 風 UI など）に使います。ユーザーがドラッグすると対象の Grid 列幅または行高さがリアルタイムに変化します。GridSplitter は必ず変更対象の Grid 行・列の中に配置する必要があり、Grid の外や別のパネル内に置いてもリサイズは機能しません。手動でサイズ変更不要なレイアウトには GridSplitter ではなく ColumnDefinition/RowDefinition の固定値を使うほうがシンプルです。
`ResizeBehavior`	`BasedOnAlignment / CurrentAndNext / PreviousAndCurrent / PreviousAndNext`	リサイズ対象のペアを明示的に指定したい場合に設定します。BasedOnAlignment（デフォルト）は HorizontalAlignment/VerticalAlignment から自動的にリサイズするペアを決定し、通常はこれで十分です。複雑なレイアウトで自動判定が意図と異なる場合に CurrentAndNext（現在と次）や PreviousAndCurrent（前と現在）などを明示指定します。設定を誤ると期待しない行・列がリサイズされるため、自動判定がうまくいかないときだけ変更を検討してください。
`ShowsPreview`	`bool`	誤操作によるサイズ変更ミスを防ぎたい場合や、ドラッグ確定前に結果を確認させたい UX が必要なときに True に設定します。True にすると半透明のプレビューが表示され、マウスボタンを離したときにリサイズが確定します。False（デフォルト）はドラッグ中にリアルタイムでサイズが変化します。ShowsPreview=True の場合は PreviewStyle プロパティでプレビューの見た目をカスタマイズできます。
`KeyboardIncrement`	`double`	アクセシビリティ要件や細かいサイズ調整が必要な場面で、キーボード操作によるリサイズのステップ幅を調整したいときに設定します。矢印キーを押すたびにこの値（device-independent unit）分だけサイズが変化します。デフォルトは 10 です。大きな値を設定するとキーボードでの操作が粗くなり、小さい値では細かく調整できます。キーボードリサイズを完全に無効化する方法はないため、必要なら MinWidth/MinHeight で最小値を設定してサイズが 0 になることを防いでください。
`DragIncrement`	`double`	ドラッグ時のサイズ変化をグリッド状にスナップさせたい場合（例：10px 単位で吸い付かせる）に使います。デフォルトは 1 で、1 device-independent unit 単位で連続的にリサイズできます。値を大きくするとドラッグがスナップし、特定の間隔にしか止まれなくなります。スナップが不自然な操作感につながる場合があるため、特別な要件がなければデフォルトの 1 のままにしてください。

XAML 使用例

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="200" MinWidth="100" />
    <ColumnDefinition Width="5" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <!-- 左ペイン -->
  <TreeView Grid.Column="0"
            ItemsSource="{Binding FileTree}" />

  <!-- 垂直スプリッター -->
  <GridSplitter Grid.Column="1"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                ShowsPreview="False"
                Background="LightGray" />

  <!-- 右ペイン（残り全スペース） -->
  <ContentControl Grid.Column="2"
                  Content="{Binding SelectedContent}" />
</Grid>

主な使用例

ファイルエクスプローラー — ナビゲーションツリーとコンテンツビューの間に垂直スプリッターを配置します。
コードエディター — エディターペインとプレビューペインを水平スプリッターで上下に分割します。
ログビューアー — ログリストと詳細パネルを分割してユーザーが比率を調整できるようにします。
開発ツール — プロパティパネル、デザインサーフェス、出力パネルを複数の GridSplitter で分割した IDE 風 UI を作成します。
比較ビュー — 2 つのデータセットや文書を左右に並べてスプリッターで比率調整できる比較画面に使用します。

ヒントとベストプラクティス

スプリッターの幅/高さを十分に確保する — スプリッターが細すぎるとドラッグしにくくなります。Width（垂直）や Height（水平）を最低 5px 程度に設定します。
MinWidth/MinHeight でペインの最小サイズを設定 — ColumnDefinition/RowDefinition に MinWidth/MinHeight を設定して、ペインが消えてしまわないようにします。
HorizontalAlignment=Stretch を設定する — GridSplitter の幅が Column の幅全体に広がるよう Stretch を設定します。そうしないとスプリッターが期待通りに機能しない場合があります。
ShowsPreview でリサイズ体験を向上 — ShowsPreview=True にするとドラッグ中のプレビューが表示され、誤操作を防げます。
キーボードでもリサイズ可能 — GridSplitter はキーボードフォーカスを受け取り、矢印キーでリサイズできます。KeyboardIncrement でステップ幅を調整します。
GridSplitter は正しい Grid セルに配置する — GridSplitter は変更したい列・行の境界となる専用列（または行）に Grid.Column（または Grid.Row）を設定して配置します。誤った列・行に置くと隣接するペインのサイズが変わらず動作しません。垂直スプリッターの場合は HorizontalAlignment=Stretch、水平スプリッターは VerticalAlignment=Stretch を必ず設定してください。
GridSplitter vs 手動リサイズ — ユーザーが実行時にペイン幅を自由に調整できる必要がある場合に GridSplitter を使います。デザイン時に決まった固定レイアウトや、コードで動的にサイズを変えるだけの場合は GridSplitter ではなく ColumnDefinition/RowDefinition の Width/Height をバインディングで変更する方法がシンプルで保守しやすいです。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

GitHub で GridSplitter のソースコードを見る →