The DockPanel control

ドックパネルは、コンテンツを４つの辺（上、下、左、右）全てに簡単にドッキング出来ます。これはウィンドウを特定のエリアに分割したいような場合の多くでは、最適の選択になります。デフォルトではこの機能が特に無効になっていない限り、ドックパネルの最後の要素は自動的に残った余白を埋めます。

WPFの他の多くのパネルによくあるように、パネルの添付プロパティを使ってパネルの能力を活用することから始めます。この場合はドックパネルです。Dock プロパティはどの方向に子コントロールをドッキングするか決めます。これを使わない場合は、最初のコントロールは左側に、最後のコントロールは残った空間を占めます。この例でどの様に使うかを見てみます。

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Left">Left</Button>
		<Button DockPanel.Dock="Top">Top</Button>
		<Button DockPanel.Dock="Right">Right</Button>
		<Button DockPanel.Dock="Bottom">Bottom</Button>
		<Button>Center</Button>
	</DockPanel>
</Window>

既に述べたように、最後の子コントロールのドッキング位置は指定していません。なので、コントロールは自動的に中央に配置され、空いたスペースを埋めます。中央の周りのコントロールはコントロールが必要なスペースしか占めていないことに気付くでしょう。他の全ては中央のために残しています。これは何故、右ボタンが左ボタンよりも少しだけ多くのスペースを占めているかの理由です。テキストの文字が多いので単純に多くの画素が必要なだけです。

おそらく、最後に空間の分割について気付くと思います。例えば、上のボタンは、左のボタンに一部分が占められているため、上を全部を占めていません。ドックパネルはどのコントロールを優先するかをマークアップの位置を見て決めています。この場合、左のボタンはマークアップの最初に書かれているため優先されます。幸運なことに、次の例のように優先順位は簡単に変更できます。ここでは、子コントロールの幅・高さを設定してスペースを揃えてもいます。

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

今度は上と下のコントロールが左と右のコントロールより優先順位が高く、全てのコントロールは幅か高さが５０ピクセルになっています。ウインドウを拡大・縮小しても固定の幅と高さは変わりません。中央のエリアだけがウインドウのサイズに伴って拡大・縮小します。

LastChildFill プロパティ

既に述べたように、ドックパネルの最後の子コントロールが残りの余白を占めるのがデフォルトの動作ですが、LastChildFillを使ってこれを無効にできます。次の例はそれを無効にしています。と同時に、同じ辺に一つ以上のコントロールをドッキングできることを示しています。

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

この例では、左右それぞれに二つのコントロールをドッキングしています。同時に、LastChildFill プロパティをオフにしています。これで中央に空きスペースが出来ています。状況によってはこれは有用です。