Applications

WPF 標準コントロールデモアプリ › DockPanel

DockPanel Layout

DockPanel は、子を順に自分の端に沿って置き、既定では最後の子に残りの領域を与えるパネルです。

子は書いた順に端を取る

DockPanel の子は、添付プロパティ DockPanel.Dock で置く端を決めます。設定しない子は Left に置かれます。子は書いた順に、それまでの子が残した領域から自分の端を取ります。300 × 100 のパネルに上・下・左・内容の順で子を置くと、左の子は上と下の間の高さ 44.08 になりました。同じ左の子を最初に書くと、高さ 100 をすべて使いました。そのため、子は領域を取らせたい順に書きます。上下のバーより先に書いた横のペインは、ウィンドウの高さいっぱいに伸びます。

どの端に置くかで、子が自分の大きさを保つ向きが決まります。300 × 100 のパネルでは、Left と Right でラベルは自分の幅と全体の高さになり、x=0 と x=257.66 に置かれました。Top と Bottom では全体の幅と自分の高さ 27.96 になり、y=0 と y=72.04 に置かれました。

LastChildFill が最後の子に与える影響

LastChildFill の既定値は True です。このとき最後の子は残りを埋め、その子の Dock は無視されます。Dock="Top" を設定した最後の子も、1 つ目の子の横の残り 257.66 × 100 を埋めました。この場合、最後の子に Dock を書いても効きません。

すべての子を端に置くなら LastChildFill="False" にします。残りの領域は空いたままになります。幅 300 のパネルに 2 つのラベルを置くと、False では 2 つ目のラベルは自分の幅の 42.34 のままで、True では 257.66 に伸びて残りを埋めました。デモアプリはチェックの外れたチェックボックスにバインドしているので、既定値の True ではなく False で始まります。

重なりと空いた場所

LastChildFill="False" で左に子を 1 つ置いたとき、空いた場所のヒットテストでは、Background が既定値の null なら何も当たらず、色を設定するとパネルが当たりました。空いた場所でクリックを受けるなら、パネルに Background を設定します。

子が重なったときは、Panel.ZIndex でどれを上にするかが決まります。デモアプリでは 2 つ目のラベルの左余白が -30 で、1 つ目に重なっています。ZIndex が 1 と 2 では重なった部分で 2 つ目が、3 と 2 では 1 つ目が上になりました。

条件 計測値
既定値: LastChildFill / 子の Dock True / Left
デモの 2 つの Label、LastChildFill=False: Item1 / Item2 x=0 y=0 w=42.34 h=100 / x=42.34 y=0 w=42.34 h=100
デモの 2 つの Label、LastChildFill=True: Item1 / Item2 x=0 y=0 w=42.34 h=100 / x=42.34 y=0 w=257.66 h=100
LastChildFill=True、最後の Label に Dock=Top: その位置と大きさ x=42.34 y=0 w=257.66 h=100
デモの 1 つの Label、LastChildFill=False、Dock=Left x=0 y=0 w=42.34 h=100
デモの 1 つの Label、LastChildFill=False、Dock=Top x=0 y=0 w=300 h=27.96
デモの 1 つの Label、LastChildFill=False、Dock=Right x=257.66 y=0 w=42.34 h=100
デモの 1 つの Label、LastChildFill=False、Dock=Bottom x=0 y=72.04 w=300 h=27.96
Top、Bottom、Left、内容 の順: Left / 内容 x=0 y=27.96 w=31.75 h=44.08 / x=31.75 y=27.96 w=268.25 h=44.08
Left、Top、Bottom、内容 の順: Left / 内容 x=0 y=0 w=31.75 h=100 / x=31.75 y=27.96 w=268.25 h=44.08
LastChildFill=False、Background=null: 空いた部分のヒットテスト （なし）
LastChildFill=False、Background=AliceBlue: 空いた部分のヒットテスト Panel
デモの ZIndex の Label（Item2 の Margin -30）、ZIndex 1 と 2: 重なった部分で上にあるもの Item2
デモの ZIndex の Label（Item2 の Margin -30）、ZIndex 3 と 2: 重なった部分で上にあるもの Item1

端への配置、LastChildFill、子の順序、背景、ZIndex。.NET 10 / Windows 11 で計測。

デモアプリで試す

デモアプリの DockPanel のページ。左にコントロールの一覧、右に最初の節の LastChildFill

デモアプリの DockPanel のページには、LastChildFill、Dock、Background、ZIndex の欄があります。各欄の下の「Show Code」リンクで、その欄の XAML を表示できます。
次の XAML は、Dock の欄（DockPanelUsageControl.xaml）から、スタイルと周囲の GroupBox を省き、名前空間の宣言を加えたものです。markupextensions はデモアプリ独自のマークアップ拡張の接頭辞です。

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:markupextensions="clr-namespace:WPFStandardControlDemoApp.Common.MarkupExtensions">
  <ComboBox x:Name="DockComboBox"
            DisplayMemberPath="Name"
            ItemsSource="{markupextensions:EnumBindingSource EnumType=Dock}"
            SelectedValuePath="Value"
            SelectedIndex="0" />

  <DockPanel x:Name="DockUsageDockPanel" Height="100" LastChildFill="False">
    <Label Background="LightBlue" BorderBrush="Black" BorderThickness="1"
           Content="Item1"
           DockPanel.Dock="{Binding SelectedValue, ElementName=DockComboBox}" />
  </DockPanel>
</StackPanel>

関連するコントロールと記事

ソースコードと計測の方法

このページの挙動の記述は、すべて .NET 10 / Windows 11 で実際に動かして確かめたものです。計測には、このサイトのスクリーンショット生成ツールの DockPanelDemoScene を使い、デモアプリと同じラベル（枠 1）を 300 × 100 のパネルに置いて試しました。パネルは Measure と Arrange でレイアウトしました。大きさは、計測したマシンでの値です。

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