WPF中的DockPanel布局(停靠面板)

开发工具与关键技术：Visual Studio 2015、WPF
作者：郑伟基
撰写时间：2019年4月24日

下面我们认识一下WPF中的DockPanel布局(停靠面板),先用DockPanel定义一个区域来放置我们需要的元素，在此区域中，我们可以用描点的形式来排列子元素，这些对象位于Children属性中。停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排列，会根据指定的边元素来进行排列，在DockPanel中的子元素根据Top、Left、Right、Bottom来进行元素的位置排列。在DockPanel中指定靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。
在默认的情况下，最后添加的元素会占满剩下的空间，无论对这个最后的元素设置任何的停靠值，它都会占满剩下的空间的。

见下面的XAML代码：

<!--停靠面板-->
<DockPanel>
    <!--红色按钮-->
    <Button DockPanel.Dock="Top" Content="红色" Background="Red"></Button>
    <!--紫色按钮-->
    <Button DockPanel.Dock="Bottom" Content="紫色" Background="Violet"></Button>
    <!--蓝色按钮-->
    <Button DockPanel.Dock="Left" Content="蓝色" Background="SkyBlue"></Button>
    <!--灰色按钮-->
    <Button DockPanel.Dock="Right" Content="灰色" Background="SlateGray"></Button>
    <!--黄色按钮-->
    <Button DockPanel.Dock="Top"   Content="黄色" Background="Yellow"></Button>
    <!--绿色按钮-->
    <Button DockPanel.Dock="Bottom"  Content="绿色" Background="SpringGreen"></Button>
    <!--白色按钮-->
    <Button DockPanel.Dock="Left"  Content="白色" Background="White"></Button>
    <!--浅蓝色按钮-->
    <Button DockPanel.Dock="Right" Content="浅蓝" Background="Aqua"></Button>
    <Rectangle Fill="AliceBlue"></Rectangle>
</DockPanel>

在上面的代码中我创建了几个按钮，并且用了几个停靠值来放置它们的位置，我用了Top值设置上边，用Left来设置左边，用Right来设置右边，用Bottom来设置下面，中间的元素不用设置，因为后面设置的元素是默认自动占满剩下的空间的，我在什么的按钮用了几个不同颜色的按钮，这样好区分它们。

见下面的效果图：

在效果图中我们看出了后面的元素是占满剩下的空间的。