MaterialSkin与系统Panel容器结合使用，实现自适应舒适布局

你是否也有这样的疑惑，当窗口拖拽之后，要如何才能填补右侧和下方的空缺？

有些人直接固定窗体大小，不允许用户拖拽。。。

也有萌新直接问我，MaterialSkin里面没有什么办法能让拖拽的时候，控件也跟着动吗？

其实这些功能在系统的Panel里面早就有了，只是大家不知道或者不会用而已。

就在工具栏的“容器”这一栏目，别看就这几个控件，其实能解决大部分的布局问题。

下面看看使用布局之后的软件是什么样子的：

正常：

缩小：

放大：

这属于放大的超级大了哈，比较一下可以看到，右下角的几个开关控件，从两列变为一列又变为三列，这是FlowLayoutPanel的功能。

而这几幅图中，左侧文本部分和右侧按钮部分始终保持着一比一的比例进行缩放的，这是SpliteContainer的功能。

而四个按钮之间，各自维持着一定的间距，还能一起变大变小，这是使用了两行两列的TableLayoutPanel

具体还涉及到了什么情况需要用到哪种Panel，如何嵌套使用，如何设置填充、停靠、设置间距属性等内容，东西比较多，大家可以新创建一个项目，一步一步来跟着做，我也拿一个空白窗体来演示。

1.TableLayoutPanel

拖出来是这样子滴，跟表格一样，可以点击右上角的小三角添加行或者列

我们添加一行一列，并拖拽他们的间距，可以让其显示为一个九宫格。

看上去已经很完美了，但是当拖动右下角，拉大这个TableLayoutPanel时，发现新添加的行和列的大小没有随之变化。表格之间又变得不均匀了。

这是因为新添加的行或列是默认以宽度（高度）数值为基准的，并不是比例的形式。

如果需要更准确的平分，需要点击小三角里面的最后一个选项 “编辑行或列” 来进行详细设置。

从这个样式表中，我们可以看到，第一列第二列都是50% ，这是比重的意思，而第三列是固定数值，这就是第三列不会改变大小的原因，我们把它也改成百分比类型，50%（这个比重可以随意写，总共超过100%也没关系，会被重新计算的）可以看到三列都是50% ，这就是1:1:1的形式。

点击确定，可以看到三列已经被平分，我们用同样的方法，将行也平分三份

将显示切换到行，设置方法跟上面相同，TableLayoutPanel被分为完美的3*3方格，并且拖动方格，都是均匀变化，至此TableLayoutPanel就算是设置成功了。

接下来要往里面填充元素，这里我们用按钮来演示，将9宫格中，每个里面都放一个按钮。

我们想要每个按钮占满一整个格子，这里介绍一个技巧，按住键盘Ctrl键，可以分别选中多个控件一起改属性，这里我们按住Ctrl键，鼠标将这9个按钮全部选中，更改这两个属性：

AutuSize之前已经讲过，改为False，我们就可以更改按钮的大小，Dock设置为Fill意思即为填充满，更改过后，拖拽TableLayoutPanel可以发现每个按钮都会随之变大或变小。

这里出现闪烁不要紧，因为是设计模式，真正运行时基本不会闪烁

同理我们选中TableLayoutPanel，更改它的属性，将Dock也设置为Fill，这样TableLayoutPanel就可以填充满整个窗体，随着窗体的变化而变化了。

运行一下程序，试着改变一下窗体大小看看吧。

整个窗体一直是被填满的状态，窗体变化，按钮也变化，这就是我们想要的效果！

这也是通过布局控制界面控件大小的基本原理，理解了下面就很简单啦。

接下来讲一些细节，比如我觉得按钮之间的间距太小，看起来太密集，怎么将他们之间的间距调大呢？

将所有按钮选中，然后更改他们的Margin属性，Margin属性四个值分别表示控件距离容器边缘左上右下的间距，我们把它全部改为10。可以看到间距发生了变化，间距更大了。

当然如果想只改变左右的间距，就分别设置左右对应的Margin就可以了，按照左上右下的顺序，是第一位和第三位（你们应该都懂就不多说啦）

如果我想要一个按钮横跨多行或多列呢？类似于键盘的空格键和删除键一样。

将Button6、Button9删除，点击button3，到属性列表中找到布局->RowSpan

这是能够跨几行的意思，我们将其改为3，表示这个控件可以占用3行的空间

改完之后如图，最右边一列全是Button3的：

同理，我们将Button8删除，点击Button7，将ColumnSpan 设置为2 ，这样Button7 就可以占用两列的空间。

这样其实就无形之中给我们的布局分成了不同的功能区，我为了便于演示用的是按钮，把按钮换成功能组件，其实就是我们日常应用的软件了。这个TableLayoutPanel就相当于地基啦，正是因为它，各个组件才能自动跟随窗体改变大小的哦~

如果想做一个固定高度的底部状态栏或者菜单栏，类似于我们浏览器最下方的状态栏，是固定高度的，不会跟随窗体大小来变化。如下图：

那也很简单，新增加一行，将高度设置为固定高度（非百分比形式）即可，一般默认就是这种形式，不需要多做修改。

然后将横跨几列的属性设置一下，将Dock设置为Fill，如下图所示，不管是长还是扁的，最下方状态条那里高度都不会变化。

至此TableLayoutPanel的内容也就介绍的差不多了，剩下的功能大家在日常使用中自行体会，我也就不过多描述了。

2.SplitContainer

SplitContainer是一个用于界面分隔的控件，也会在布局中使用，其效果是将界面分为两部分。

可以分成左右两部分或者上下两部分，同样的划分的比例也是可以调节的。

可以用在对布局要求不大的地方，比如像微信这样的聊天软件就基本上是左右布局，左边联系人，右边信息栏，布局简单，就可以使用SplitContainer。

可以嵌套使用，比如右边还想再分隔成上下两部分，就在右边的Panel中再拖入一个SplitContainer，如下图：

不过SplitContainer一旦多了就会出现问题，就是选中的时候不好选中，经常选到的是里面的Panel，而不是外面的SplitContainer，这时就需要右键一下，手动选择SplitContainer。

强烈建议大家使用的时候将每个Panel都命名一下，比如上图，时间久了，你根本不知道SplitContainer2到底指的是哪一个，就会很混乱。

正是因为各个Panel的名字比较混乱，一旦多了很不好管理，所以如果布局再复杂一些，就去用上面说的TableLayoutPanel

还是同样的，将SplitContainer的Dock设置为Fill，就能跟随窗体变化了。

3.FlowLayoutPanel

又称为流式布局，适合于重复的样式，如名片、菜单、订单等，我们只需要往里面添加控件，FlowLayoutPanel便会自行排列，如果空间够3列不够4列便会显示为3列，以此类推，将AutoScroll设置为TRUE，还会自动显示可以滚动条。

下图是我自行创建了UserControl之后，将其添加到FlowLayoutPanel中的效果。（你们可以自行在项目中添加UserControl）

其中我只绘制了名片部分，布局由FlowLayoutPanel自动完成。（FlowLayoutPanel的Dock属性设置为Fill）

UserControl内容：

添加 9个UserControl到FlowLayoutPanel中，由于现在的窗口比较小，所以自动显示为两列，由于只能显示6个，右侧自动出现滚动条。

将窗体拖动，让窗体大小改变，FlowLayoutPanel便会自动显示为3列。

由于显示完全，滚动条自动消失。

这种布局方式也是经常用的，需要熟知！

如果想在后台动态地添加控件到FlowLayoutPanel中，可以使用下面这段代码：

this.flowLayoutPanel1.Controls.Add(new UserControl1());

就可以在后台代码中增加自定义控件到FlowLayoutPanel中，如图，名片变成了10个。

使用起来是相当的方便和灵活的。

FlowLayoutPanel的功能也就是上面这些了，总的来讲还是相当强大的。

4.综合运用

能像我们之前写的侧边栏项目，使用了TabCotrol，我们就需要把布局的Panel放在相应的Tabpage里面。

这里先用了SplitContainer做了左右分隔，使左右两部分始终保持1:1比例的放大缩小。

左侧由于有三行，选择使用TableLayoutPanel，分为三行。

右侧上半部分，使用TableLayoutPanel分为两行两列，让按钮均匀放大缩小。

右下采用FlowLayoutPanel来让开关自适应排列

好了就说到这里吧，希望对大家有所帮助哦！