JZGKCHINA
工控技术分享平台
尊重原创 勿抄袭
勿私放其他平台
第7讲
常用布局控件的用法
前6期做串口调试助手主要用到了ComboBox、Label、Button、TextBox、Grid。其它的控件不在赘述，
这里补充说明一下：
Grid：它是最常用的布局控件
介绍一下它的几个规则：
- 行和列都是从0开始计数的
- 行编号或者列编号为0的情况下是可以省略不写的。
- 若控件需要跨越多个行或列，使用Grid.RowSpan=”行数”和Grid.ColumnSpan=”列数”
下面介绍一些其它的一些常用的布局控件。
StackPanel：用于以水平或垂直方式堆叠子元素
主要用于以下场合：
- 同类元素需要紧凑排列
- 移出其中元素后能够自动补缺的布局。
- 主要使用以下三个属性来控制内部元素的布局，Orientation、HorizontalAlignment、VerticalAlignment。
添加一个测试窗口，将App.xaml 中的StartupUri=" MainWindow.xaml" 改为StartupUri="test.xaml"。则运行时显示这个新建的窗口。
StackPanel默认堆栈方向是垂直的，
如果想变成水平排列，使用Orientation="Horizontal"就行了
如果要靠右边，则HorizontalAlignment="Right"
篇幅有限，只能列举个别情况，还需自己去调试Orientation、HorizontalAlignment、VerticalAlignment。三个属性不同组合值的效果。
Canvas：顶级布局控件，用于子内容的绝对定位
可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角，主要适用的场合：
- 一经设计基本上不会再有改动的布局
- 需要大量使用横纵坐标进行绝对点定位的布局。
将刚才的StackPanel直接换成Canvas，则显示最后一个按钮，因为Canvas的子控件是覆盖的，通过设置Opacity="0"或者Visibility="Hidden"可以将第二个、第三个按钮隐藏。
通过Canvas.Top、Canvas.Bottom 、Canvas.Left、Canvas.Right来调整控件的位置。
DockPanel：定义一个区域
从中可以按相对位置水平或垂直排列各个子元素。
下图可以看出DockPanel中最后一个元素自动填充剩余的空间，可以通过DockPanel.Dock属性，它决定了子控件的停靠的方向。通过设置LastChildFill来禁用自动填充剩余的空间
WrapPanel：按从左到右的顺序位置定位子元素
在包含框的边缘处将内容切换到下一行。
该容器可以看做自动换行功能的StackPanel容器，当我们把窗口的宽度Width="800"改Width="80"时，内部采用的是流式布局，在流延伸的方向上WrapPanel会排列尽可能多的控件，排不下的会新起一行或一列继续排列。
WPF布局面板主要是Grid、StackPanel、Canvas、DockPanel、WrapPanel介绍完了，这些布局面板通常需要Border配合使用。
Border：在另一个元素四周绘制边框或背景
Border只能具有一个子元素。若要显示多个子元素，需要将布局面板放在Border中。BorderBrush="BlueViolet" 设置边框的颜色 BorderThickness="10" 设置边框的线条粗细，Margin="20" 距离窗口的左上右下的距离前面的文章中有介绍。
关于布局简单介绍到这里，好看的布局还是需要多多去实践的，下期主要去介绍其它的一些控件。
就这么简单！下周见！
作者简介：
曹言林：加入工控七余载，从事过单片机编程、控制柜接线、设备维修，PLC编程、MES实施，目前主要做MES售前，对各方面虽不是专家级别，也愿为工控圈添砖加瓦，贡献自己的一份力量。