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完成对整体的布局，然后内部结合一些其他的布局控件，完成局部的细节的布局。

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

WPF 控件专题 DockPanel 控件详解相关推荐

DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
利用Animation控件制作帧动画过程详解
利用Animation控件制作帧动画过程详解前言通过Animation控件来达到序列图的播放(素材和示例视频在文章末尾) 一.序列图 (此素材为已经分割好的序列图) 如若序列图在一张图片上,请参考 ...
wpf 客户端【JDAgent桌面助手】详解（二）桌面宠物制作详解
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图(此文由于当时没有开通csdn博客所以在博客园发了,后续文章都是csdn 首发奥) [晒视频了]业余开发wpf 客户端[JDAgent桌面助 ...
【卷积神经网络结构专题】一文详解AlexNet(附代码实现)
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]本文是卷积神经网络结构系列专题第二篇文章,前面我们已经介绍了第一个真正意义 ...
WPF 控件专题 Image控件详解
1.Image 介绍 Image:表示用于显示图像的控件. Image可以加载以下图像类型:.bmp..gif..ico..jpg..png..wdp 和 .tiff.但是在显示多帧图像时,仅显示第一 ...
WPF 控件专题 Grid 控件详解
1.Grid 介绍定义由列和行组成的灵活的网格区域,Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列,该对象可包含多个 Children对象 ...
WPF 控件专题 Border控件详解
1.Border介绍 Border(边框)是一个装饰的控件,此控件绘制一个边框.一个背景.Border 中只能有一个子控件(Child),若要显示多个子元素,需要在父Border元素中放置一个附加Pa ...
WPF 控件专题 Lable 控件详解
1.Lable 介绍官方释义:表示包含一段任意类型内容的控件.也可以叫标签控件. Label控件和TextBlock看起来非常像.但在使用时就会发现,Label使用的是Content属性而不是Tex ...
WPF 控件专题 TreeView控件详解
1.TreeView介绍命名空间:System.Windows.Controls TreeView 表示一个控件,该控件在树结构(其中的项可以展开和折叠)中显示分层数据. TreeView 是一个 ...

WPF 控件专题 DockPanel 控件详解

WPF 控件专题 DockPanel 控件详解相关推荐

最新文章

热门文章