DockPanel Layout

DockPanel は子要素をパネルの各辺（上・下・左・右）にドッキングして配置するレイアウトパネルです。最後の子要素はデフォルトで残りの空間を埋めます。アプリのメインウィンドウレイアウトによく使われます。

概要

WPF の DockPanel は、子要素を上・下・左・右の辺に沿って配置するレイアウトパネルです。メニューバーを上端に、ステータスバーを下端に、ナビゲーションパネルを左端に配置し、残りの中央領域をコンテンツエリアにするといった典型的なアプリレイアウトに最適です。

各子要素には DockPanel.Dock 添付プロパティで配置する辺を指定します。要素は XAML に記述した順番にドッキングされ、先にドッキングされた要素が優先的にスペースを確保します。

LastChildFill が True（デフォルト）の場合、最後の子要素はドッキングされず、残りのすべての空間を埋めます。メインコンテンツエリアはこの最後の子要素として配置するのが一般的なパターンです。

DockPanel と Grid の使い分けのポイントは柔軟性です。アプリの枠組みとなるシンプルな 4 辺レイアウトには DockPanel が簡潔で使いやすく、複雑な内部レイアウトには Grid が適しています。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。アプリ上でリアルタイムに各プロパティを変更してその動作を確認できます。

プロパティ	設定値	説明
`LastChildFill`	`bool`	最後の子要素をコンテンツエリアとして残りの空間を埋めさせたい（典型的なアプリレイアウト）場合は True（デフォルト）のままにします。False にすると最後の子要素も Dock 設定に従った通常のドッキング配置になり、残りのスペースが空白のまま残ります。LastChildFill=True はその子要素の DockPanel.Dock 設定を無視して強制的に残スペースを埋めるため、最後の子に Dock 設定をしていても効果がなく混乱しやすい点に注意してください。
`Dock (DockPanel attached)`	`Left / Top / Right / Bottom`	メニューを Top、ステータスバーを Bottom、ナビゲーションツリーを Left など、各 UI パーツをウィンドウの辺に沿って配置したいときに設定します。同じ辺に複数の要素をドッキングすると、XAML の記述順（先の要素ほど外側）にスタックされます。ドッキング順序はスペース確保の優先順に直結するため、先に大きな要素をドッキングすると後の要素が使えるスペースが少なくなります。メニュー・ツールバーなど小さいものから先に書くのが鉄則です。
`Background (Panel)`	`Brush`	パネルの背景色を設定します。Background が null の場合（デフォルト）はパネル自体のヒットテストが無効になり、空き領域でのマウスイベントが子要素を素通りします。クリックやホバーをパネル全体で受け取りたいときは `Transparent` を設定してください。
`ZIndex (Panel attached)`	`int`	DockPanel 内で子要素が重なり合うケース（負の Margin や絶対位置で意図的に重ねる場合）に描画順序を制御したいときに使います。値が大きいほど手前（上層）に描画されます。ZIndex は同一 DockPanel 内の兄弟要素間でのみ有効で、別のパネルの子要素に対して効果を及ぼすことはできません。

XAML 使用例

<DockPanel LastChildFill="True">
  <!-- メニューバーを上端に -->
  <Menu DockPanel.Dock="Top">
    <MenuItem Header="ファイル(_F)" />
    <MenuItem Header="編集(_E)" />
  </Menu>

  <!-- ツールバーをメニューの下に -->
  <ToolBarTray DockPanel.Dock="Top">
    <ToolBar><Button Content="保存" /></ToolBar>
  </ToolBarTray>

  <!-- ステータスバーを下端に -->
  <StatusBar DockPanel.Dock="Bottom">
    <StatusBarItem Content="{Binding StatusMessage}" />
  </StatusBar>

  <!-- 左サイドパネル -->
  <TreeView DockPanel.Dock="Left" Width="200"
            ItemsSource="{Binding TreeNodes}" />

  <!-- 残りの空間がメインコンテンツエリア -->
  <ContentControl Content="{Binding MainContent}" />
</DockPanel>

主な使用例

アプリのメインレイアウト — メニュー・ツールバー・ステータスバー・サイドパネルを持つ典型的なウィンドウ構造を実装します。
サイドナビゲーション — 左右どちらかにナビゲーションツリーやパネルを配置し、残り空間をコンテンツエリアにします。
ヘッダー・フッター付きレイアウト — 上部にタイトルバー、下部にフッター情報を配置した基本的なページレイアウトに使用します。
スプリット表示 — 左右に分割したビューで、片方にリスト、もう片方に詳細を表示する 2 ペインレイアウトに使用します。
ウィザード UI — 上部にステップインジケーター、下部に前へ/次へボタン、中央にコンテンツを配置するウィザード型 UI に使用します。

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

LastChildFill は必ず意識する — 最後の要素が意図せず全領域を埋めてしまうのを防ぐため、LastChildFill を明示的に設定します。
ドッキング順序に注意 — 要素は XAML の記述順にスペースを確保するため、メニュー・ツールバーなど先に必要なものから順に書きます。
複雑な内部レイアウトは Grid を使う — DockPanel はアプリの枠組みに使い、内部の詳細なレイアウトには Grid を使うのが一般的なアプローチです。
SplitterGridSplitter との組み合わせ — サイドパネルとメインエリアの境界に GridSplitter を配置することでリサイズ可能なレイアウトにできます。
GridSplitter との組み合わせ — 外枠は DockPanel、内部の分割可能なペインには Grid+GridSplitter を使うハイブリッドアプローチが効果的です。
ウィンドウフレームレイアウトパターン — DockPanel の典型的な使い方として「メニュー Top → ツールバー Top → ステータスバー Bottom → 残りをコンテンツ（LastChildFill=True）」という構成があります。この 4 辺レイアウトパターンを最初に覚えておくと、ほとんどのアプリの骨格を DockPanel だけで素早く組めます。

ソースコード

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

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