C#WPFの道#29！DockPanelの書き方と使い方をわかりやすく解説！

DockPanelとは？
DockPanelの使い方
- DockPanel.Dock
- LastChildFill
サンプルコード全体

DockPanelとは？

枠内の上下左右に整列して配置させるためのコントロールです。

DockPanelの使い方

DockPanel.Dock

DockPanelはDockPanel.Dockを指定して，上下左右のどこに張り付けるかを決めます。

Top　上に張り付きます
Left　左に張り付きます
Right　右に張り付きます
Bottom　下にはりつきます

LastChildFill

LastChildFillは枠内の最後の要素が，残りのスペースを埋めるかどうかを決定します。先の画面イメージの左側は，Bottomが下に張り付いていますが，右側は，Bottomが残りのスペースをすべて埋める形で張り付いているのがわかると思います。この場合，右側の例がLastChildFillをTrueにしたときの例となります。最後のコントロールが，残りのスペースを埋める形で張り付きます。デフォルトはTrueなので残りのスペースを埋めようとします。だから，DockPanelを作って，コントロールを１つしか貼り付けない場合は，Topと指定していても，Topではなく全体に伸びるような感じで張り付きます。コントロール１つでTopに張り付けたい場合などは，LastChildFillをFalseにしておきましょう。それ以外の場合でも，残りのスペースを埋める必要がない場合は，明示的にFalseにしておきましょう。

サンプルコード全体

<Window x:Class="WPF029.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF029"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <DockPanel LastChildFill="False">
            <Button DockPanel.Dock="Top" Content="Top" FontSize="20"/>
            <Button DockPanel.Dock="Left" Content="Left" FontSize="20"/>
            <Button DockPanel.Dock="Right" Content="Right" FontSize="20"/>
            <Button DockPanel.Dock="Bottom" Content="Bottom" FontSize="20"/>
        </DockPanel>

        <DockPanel Grid.Column="1" LastChildFill="True">
            <Button DockPanel.Dock="Top" Content="Top" FontSize="20"/>
            <Button DockPanel.Dock="Left" Content="Left" FontSize="20"/>
            <Button DockPanel.Dock="Right" Content="Right" FontSize="20"/>
            <Button DockPanel.Dock="Bottom" Content="Bottom" FontSize="20"/>
        </DockPanel>
    </Grid>
</Window>