WPF 控件专题 DockPanel 控件详解

1、DockPanel 介绍

    官方释义：定义一个区域，从中可以按相对位置水平或垂直排列各个子元素。DockPanel：也可以叫为停靠面板；它支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

    一个DockPanel包含对象集合 UIElement ，这些对象位于属性中 Children；也就是说DockPanel可以包含多个子元素；

    如果将属性true设置为LastChildFill默认设置，则始终填充剩余空间的最后一个DockPanel子元素，而不考虑在最后一个子元素上设置的任何其他停靠值。 若要将子元素停靠到另一个方向，必须将属性设置为 LastChildFill 该属性 false ，并且还必须为最后一个子元素指定显式停靠方向。

    默认情况下，面板元素不会接收焦点。 若要强制面板元素接收焦点，请将 Focusable 属性设置为 true。

**************************************************************************************************************

2、DockPanel 常用的属性

    DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。

    HorizontalAlignment：获取或设置在父元素(如 Panel 或项控件)中组合此元素时所应用的水平对齐特征。

    VerticalAlignment：获取或设置在父元素（如面板或项控件）中组合此元素时所应用的垂直对齐特征。

    Margin：获取或设置元素的外边距。

    Opacity：透明度

    LastChildFill：获取或设置一个值，该值指示 DockPanel 中的最后一个子元素是否拉伸以填充剩余的可用空间，默认为True（填充）。

**************************************************************************************************************

3、示例代码

    代码示例一：填充剩余空间，自动停靠在边界

<DockPanel>
	<Button DockPanel.Dock="Top" Content="Button Top"/>
	<Button DockPanel.Dock="Left"  Content="ButtonLeft"/>
	<Button DockPanel.Dock="Right" Content="Button Right"/>
	<Button DockPanel.Dock="Bottom" Content="Button Bottom"/>
	<Button Content="Button Center"/>
</DockPanel>

    代码示例二：最后元素不填充剩余空间

<!--设置最后一个元素不填充剩余空间-->
<DockPanel LastChildFill="False">
	<Button DockPanel.Dock="Top" Content="Button Top"/>
	<Button DockPanel.Dock="Left"  Content="ButtonLeft"/>
	<Button DockPanel.Dock="Right" Content="Button Right"/>
	<Button DockPanel.Dock="Bottom" Content="Button Bottom"/>
	<Button DockPanel.Dock="Right" Content="Button Center "/>
	<Button Content="Button Center "/>
</DockPanel>

**************************************************************************************************************

4、示例代码效果图：左侧为代码示例一效果图；右侧为代码示例二的效果图；

   

    任何元素的拉伸是由于它们的HorizontalAlignment或者VerticalAlignment的值为Strech造成的，默认是拉伸的，我们可以通过这两个属性选择不同的对齐方式。

    从左图可以看出，各个按钮未设置高度和宽度，在DockPanel中设置位置后，均是拉伸考边界停靠的，不会交叉重叠；默认情况下，最后一个元素是占满剩余空间的；

 从有图可以看出，甚至LastChildFill为False时，则最后一个元素不填充剩余空间，也必须指明最后该元素的停靠方向（默认是靠左）

**************************************************************************************************************

5、总结和扩展

    通过DockPanel完成对整体的布局，然后内部结合一些其他的布局控件，完成局部的细节的布局。

**************************************************************************************************************