前言
早在18年，博主第一次开始写博客，内容为 C# 上位机开发，写完后收获了不错的阅读量和好评：
- C#上位机开发（一）—— 了解上位机
- C#上位机开发（二）—— Hello，World
- C#上位机开发（三）—— 构建SerialAssistant雏形
- C#上位机开发（四）—— SerialAssistant功能完善
这个系列存在的问题就是没有进行界面布局，所有的控件都是固定位置，所以时隔多年，再次利用空闲时间学习WinForm如何进行界面控件布局。
Github开源仓库：https://github.com/Mculover666/SerialAssistant。
一、使用Anchor属性进行布局
1. Anchor属性
Anchor意味锚点，可以将控件设置到某个固定的位置，随着窗口大小的改变，控制在窗口中的相对位置不变。
2. 演示示例
① 控件位于右上角/左上角/右下角/左下角
设置Anchor属性锚点在上侧和右侧，意味着控件相对于父控件，上侧和右侧的位置不变：
运行效果如下：
② 控件水平居中/垂直居中
首先将控件放置于水平居中位置：
点击后控件自动位于水平居中位置，接着设置Anchor属性，取消左右锚点，只设置上侧锚点：
这样控件一直位于水平居中位置：
同理，控件垂直居中只需要设置左侧或者右侧的锚点，取消上侧和下侧的锚点即可。
控件水平垂直都居中只需要取消上下左右所有的锚点即可。
③ 控件水平拉伸/垂直拉伸
设置Anchor属性，设置上侧锚点以及左右锚点：
演示效果如下：
二、使用Dock属性进行布局
1. Dock属性
Dock意味停靠，可以将控件停靠到某一侧或者中央。
2. 演示示例
① 使面板（Panel）停靠在某一侧（上/下/左/右/中）
在窗口中添加一个Panel，此时Panel的父控件是窗口（From），为了方便查看Panel的大小和位置，先给panel设置一个背景颜色，然后设置 Dock 属性为上侧停靠：
运行结果如图：
同样，可以设置其停靠在上/下/左/右中的某一侧。
设置为中间（Fill）时，会将整个父控件填满：
② 多个panel使用Dock布局
按照panel1至panel5的顺序依次添加panel，并设置Dock属性，如图：
因为panel4的添加在panel2和panel3之后，所以就添加在了剩余空间的底部。
如果换一种顺序添加，则又是另一种效果，如图：
所以在使用Dock属性时，一定要注意添加控件的先后顺序。
当界面大小变化时：
- 停靠在左右侧的控件：长度不变，高度会动态拉伸；
- 停靠在上下侧的控件：长度会动态拉伸，高度不变；
- 停靠在中心的控件（Fill）：会填充整个空白区域；
窗口大小动态变化效果如图：
三、嵌套布局
在实际软件开发的时候，如果使用布局器，我们应该按照从大往小的思路来布局，注意两点即可：
① Anchor属性和Dock属性是相对父控件而言的，所以可以进行嵌套；
② Anchor属性和Dock属性只能二选一，不能同时使用。
接下来我们以串口助手为例，设计一个界面。
1. 区域划分设计
界面设计需求为：
- 状态栏：窗口变化时固定在底部不动；
- 左侧串口设置界面、接收设置界面、发送设置界面：窗口变化时，固定在左侧不动；
- 右侧串口发送区：窗口变化时，可以跟随右侧伸长，但高度不变；
- 右侧串口接收区：窗口变化时，可以跟随右侧和下侧伸长，填充整个空白区域；
2. 设计思路与实现
2.1. 最顶层的三个大区划分
首先划分为三个大块：
接着分别在panel2中嵌套，组合出设置界面；在panel3中嵌套，组合出发送数据和接收数据界面。
实现如下：
窗口动态变化时，效果如下：
2.2. 左侧设置区设计
左侧设置区分为三个区：串口设置区，接收设置区，发送设置区。
特别说明：串口设置区，接收设置区，发送设置区应该使用GroupBox控件，可以在左上角显示名称，效果要优于使用panel，效果如图：
这三个区在界面动态变化时并不需要变化，所以简单添加三个Panel即可，默认会设置Anchor属性为左上。
窗口动态变化时界面效果如图：
2.2.1. 串口设置区界面
串口设置区中只有Label和ComboBox，在界面动态变化时并不需要变化，所以简单的拖放即可，默认会设置Anchor属性为左上。
在设计对齐的时候可以借助设计器提供的对齐工具来完成：
2.2.2. 接受设置区界面和发送设置区界面
同理，拖放就OK。
2.3. 右侧数据区设计
右侧数据区包括串口接收数据区和串口发送数据区，在之前设计绿色这块窗口时，已经设置了相对于父控件（窗口Form）的Dock属性为Fill，所以在动态变化时，绿色窗口会永远填满窗口。
2.3.1. 右侧数据区划分
在一些场景下，我们也需要将串口发送数据区放大一点，这个时候就需要用到splitContainer这个容器，它提供了动态的两个Panel，但是两个panel间分离，可以由用户调整大小。
拖入一个该控件放入绿色框中，填满整个区域，设置属性为垂直分离：
再分别给内部的panel1和panel2设置不同的颜色，运行程序，可以看到效果：
放大之后再看效果，简直完美：
用户改变两个缓冲区的大小：
实验完毕后，取消两个内置panel的颜色，接着下面的设计：
2.3.2. 串口数据接收区
串口数据接收区使用TextBox，并开启多行显示：
接着拖动TextBox的大小，填满整个父控件（内置Panel1），然后设置Anchor属性为上下左右：
2.3.3. 串口数据发送区
串口数据发送区使用TextBox，并开启多行显示，同时还要再设置一个发送按钮，再添加一个comboBox用于记录历史发送。
拖放好发送按钮的位置，设置为只向右侧相对位置不变：
然后再拖放好TextBox的位置，设置Anchor属性为上下左右都不变，这样当窗口变化时，TextBox就会拉伸填充了：
最后拖放好ComBox的位置，设置Anchor属性为左侧、右侧、下侧有锚点，这样当窗口变化时，可以跟随底部变化，并且进行水平拉伸：
至此，串口助手界面搞定，查看一下效果：
最大化窗口，看看效果：
非常完美！
再修改属性，显示滚动条：
另一个发送文本框操作同理。
2.4. 底部状态栏设计
底部状态栏设计的信息主要有：
- 当前状态
- 接收字节数
- 发送字节数
- 作者信息
- 版本信息
其中状态信息单独设置一个panel，里面用标签Label即可，设置Dock属性在Left即可；
版本信息也单独设置一个panel，里面添加一个linkLabel，设置Dock属性在Right即可；
接收字节数和发送字节数统一放在一个panel中，panel设置Dock属性为Fill：
至此，串口助手设置完成。
转载：https://blog.csdn.net/Mculover666/article/details/116483736