WPF布局控件之DockPanel布局

前言：博主文章仅用于学习、研究和交流目的，不足和错误之处在所难免，希望大家能够批评指出，博主核实后马上更改。

概述：

DockPanel 位置子控件基于子 Dock 属性，你有 4 个选项停靠，左 (默认) ，右，上，下。如果希望添加到 DockPanel 的最后一项填充剩余空间，可以将 DockPanel LastChildFill 属性设置为 true。

名称	说明
Grid	网格，根据自定义行和列来设置控件的布局
StackPanel	栈式面板，包含的元素在竖直或水平方向排成一条直线
WrapPanel	自动折行面板，包含的元素在排满一行后，自动换行
DockPanel	泊靠式面板，内部的元素可以选择泊靠方向
UniformGrid	网格,UniformGrid就是Grid的简化版，每个单元格的大小相同。
Canvas	画布，内部元素根据像素为单位绝对坐标进行定位
Border	装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件

一、DockPanel

常用属性	数据类型	可选值	说明
DockPanel	Dock	Left、Top、Right、Bottom
Margin	Thickness	获取或设置元素的外边距
HorizontalAlignment	HorizontalAlignment	Center（中心）/Left（靠左）/Right（靠右）/Stretch（拉伸以填充父元素）	决定内部元素在水平方向的对齐方式
VerticalAlignment	VerticalAlignment	Top（上方）/Center（中心）/Bottom（下方）/Stretch（拉伸以填充父元素）	决定内部元素在垂直方向的对齐方式
Opacity	double	透明度
LastChildFill	bool		获取或设置一个值，该值指示 DockPanel 中的最后一个子元素是否拉伸以填充剩余的可用空间，默认为True（填充）

LastChildFill="True" 默认全部填充

xml 复制代码

 <DockPanel LastChildFill="True">
     <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>

LastChildFill="False"

xml 复制代码

<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 Content="Button Center"/>
</DockPanel>

Opacity="0.1"

xml 复制代码

 <DockPanel  Opacity="0.1">
     <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>

Margin="20"

xml 复制代码

<DockPanel Margin="20">
    <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、HorizontalAlignment、VerticalAlignment,LastChildFill 这四个个属性组合各种排列和对齐方式。