YKSoftware - for WPF Developers

Standard Controls - DockPanel

　コントロールを上下左右に張り付くように配置するコントロールです。

ページ内リンク

Dock 添付プロパティ

Dock 添付プロパティ

　DockPanel コントロールでは、XAML で上から書いた順にコントロールの配置を決定していきます。そのとき、各コントロールに指定された Dock 添付プロパティを参照して、指定された方向にそのコントロールを張り付けるように配置します。サンプルとして 4 つの Button コントロールを DockPanel に表示する例を示します。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="200" Width="250">
    <DockPanel>
        <Button DockPanel.Dock="Top" Content="上に張り付くよ！" />
        <Button DockPanel.Dock="Left" Content="左！" />
        <Button DockPanel.Dock="Bottom" Content="下に張り付くよ！" />
        <Button Content="残りの領域を占有するよ！" />
    </DockPanel>
</Window>

Code 1 : DockPanel に Button コントロールを 4 個配置する

この例では、まず上に張り付くボタンを配置した後に、左に張り付くボタンを配置しているため、上に張り付いたボタンはウィンドウの左端から幅めいっぱいに配置されています。これを、左に張り付くボタンを先に記述すると少し結果が変わります。

<Button DockPanel.Dock="Left" Content="左！" />
<Button DockPanel.Dock="Top" Content="上に張り付くよ！" />

Code 2 : 左に張り付けるボタンを先に記述する

このように、配置する順序を入れ替えることによって得られるレイアウト結果が異なるため、 XAML を記述するときには注意が必要です。

　このような DockPanel はよくメニューとステータスバーを持つ UI を実現するときに使用されます。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainView" Height="200" Width="250">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="ファイル (_F)" />
            <MenuItem Header="ヘルプ (_H)" />
        </Menu>

        <StatusBar DockPanel.Dock="Bottom">
            <StatusBarItem Content="準備完了" />
        </StatusBar>

        <Grid Background="Cornsilk">
            <TextBlock Text="メインコンテンツ" />
        </Grid>
    </DockPanel>
</Window>

Code 3 : Menu コントロールと StatusBar コントロールを配置する