Visual Studio 技能：调整软件界面布局
专栏导航
本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。
（一）WIn32 专栏导航
上一篇：Windows编程：在VS2019里面，调整代码字体大小
回到目录
下一篇：WIn32 笔记：本专栏课件
（二）MFC 专栏导航
上一篇：Windows编程：在VS2019里面，调整代码字体大小
回到目录
下一篇：MFC笔记：本专栏课件
本节前言
在之前的章节里，我们讲解了 VS2010 与 VS2019 的下载安装与基本使用方法。
本节，依然是来讲解 Visual Studio 的基本使用方法。我们要讲解的内容是，调整软件界面的布局。
首先呢，我们需要做一个准备工作。准备工作的内容是，大家首先新建一个解决方案。并添加一个源文件。不要编译它。
注意哦，不要编译，也就是不要执行【生成 -> 生成解决方案】菜单命令。
再强调一次，不要编译。
做好了这样的准备工作，我们开始进行正文的讲解。
一. 将某一窗口调整为浮动状态
一般地，在软件界面中，都会含有一个【解决方案资源管理器】窗口。本次呢，我们就以它为例，来演示调整软件界面布局的方法。
首先呢，我们来找到这一窗口的标签位置，如下图所示。
图1
在图1里面，由红色框线所示，写着窗口名称的部分，就是一个窗口的标签。我们可以用鼠标拖动一个标签。
我们用鼠标拖动【解决方案资源管理器】窗口的标签时，暂时不松开鼠标，并且让鼠标指针停在代码编辑区域中，此时，代码编辑区域里面会出现一个十字架，如下图所示。
图2
图3
此时，你可以松开鼠标了。
当我们在拖动一个窗口的标签时，若是鼠标指针没有落在十字架的区域，然后松开鼠标，则窗口会变为浮动状态。
这里所说的十字架区域，不是指十字架所在的矩形区域，而是指十字架形状的内部区域。也就是，假定，鼠标指针落在了十字架所在的矩形区域，但是，它是位于十字架形状的左上方的空白区域，然后你松开鼠标，则窗口会变为浮动状态。右上方，左下方，右下方，同样会使得窗口变为浮动状态。
当然了，如果拖动某一个窗口的标签时，鼠标指针本身就位于十字架所在的外接矩形区域之外，则窗口更是会变为浮动状态了。
接下来，我们尝试着让【解决方案资源管理器】窗口变为浮动状态。方法是，拖动【解决方案资源管理器】窗口的标签，将鼠标指针移动到十字架区域之外，然后松开鼠标，则原本停靠在一边的【解决方案资源管理器】窗口会变为浮动状态，如下图所示。
图4
在【解决方案资源管理器】窗口处于浮动状态以后，我们来调整一下这个窗口的大小，使其处于较小的状态，结果如下图所示。
图5
到了这里，将窗口由停靠状态转为浮动状态，我们就讲完了。
二. 十字架形状
我们来看一看十字架形状。
图3副本
在这个十字架内部，有九个区域，使我们需要重点关注的区域。
在十字架的中间，有一个橙色矩形，这是一个区域。如下图的红色框线区域所示。
十字架中间
在中间橙色矩形的左边，有两个小矩形区域。最左边和次左边的小矩形区域，分别如下图的红色框线所示。
十字架最左
十字架次左
在中间橙色矩形的右边，有两个小矩形区域。最右边和次右边的小矩形区域，分别如下图的红色框线所示。
十字架最右
十字架次右
在中间橙色矩形的上边，有两个小矩形区域。最上边和次上边的小矩形区域，分别如下图的红色框线所示。
十字架最上
十字架次上
在中间橙色矩形的下边，有两个小矩形区域。最下边和次下边的小矩形区域，分别如下图的红色框线所示。
十字架最下
十字架次下
到这里，我们就讲完了十字架内部的九个区域。
三. 重置窗口布局
在讲解调整窗口布局的开始，我们先来讲解重置窗口布局。
为啥先讲重置窗口布局呢？
因为在练习的时候，有可能，我们会将窗口布局给搞乱。为此，我们需要先了解将窗口布局恢复为初始布局的方法，这样一来，即使我们自己把窗口布局给搞乱了，也可以方便地回归初始状态。
我们依次点选【窗口】，【重置窗口布局】菜单命令，就可以将软件界面布局恢复为初始状态。这一菜单命令如下图所示。
重置窗口布局菜单命令
了解了【重置窗口布局】菜单命令以后，我们往下学习。
四. 将拖动着的窗口停在静止窗口的一边
在本分节，我们暂时将代码编辑区域所在的窗口，称为静止窗口。我们本分节的任务是，拖动【解决方案资源管理器】窗口，使其停靠在静止窗口的一边。所谓的静止窗口，就是十字架形状所在的窗口。
这里所谓的一边，它是说，让拖动窗口与静止窗口共享静止窗口原本所占据的区域，并使得调整后的界面布局中，拖动窗口位于静止窗口的一边。
（一）将拖动窗口停在静止窗口的左边
拖动【解决方案资源管理器】窗口，并将鼠标指针移动到十字架形状的最左矩形或者是次矩形区域，然后松开鼠标，这样，【解决方案资源管理器】窗口就停在了代码编辑窗口的左边了。
如果鼠标松开前一刻，鼠标指针位于十字架形状区域的最左矩形区域，则结果如下图所示。
图6
在图6里面，原本由代码编辑窗口所占据的区域，此时由【解决方案资源管理器】窗口和代码编辑窗口共同占据着，并且呢，【解决方案资源管理器】窗口位于代码编辑窗口的左边，并且，【解决方案资源管理器】窗口所占据的，是一个较为狭窄的左右宽度。
如果鼠标松开前一刻，鼠标指针位于十字架形状区域的次左矩形区域，则结果如下图所示。
图7
在图7里面，原本由代码编辑窗口所占据的区域，此时由【解决方案资源管理器】窗口和代码编辑窗口共同占据着，并且呢，【解决方案资源管理器】窗口位于代码编辑窗口的左边，并且，【解决方案资源管理器】窗口所占据的，是一个宽一些的的左右宽度。
（二）将拖动窗口停在静止窗口的上边
拖动【解决方案资源管理器】窗口，并将鼠标指针移动到十字架形状的最上矩形或者是次上形区域，然后松开鼠标，这样，【解决方案资源管理器】窗口就停在了代码编辑窗口的上边了。
如果鼠标松开前一刻，鼠标指针位于十字架形状区域的最上矩形区域，则结果如下图所示。
图8
在图8里面，原本由代码编辑窗口所占据的区域，此时由【解决方案资源管理器】窗口和代码编辑窗口共同占据着，并且呢，【解决方案资源管理器】窗口位于代码编辑窗口的上边，并且，【解决方案资源管理器】窗口所占据的，是一个较窄的的上下高度。
如果鼠标松开前一刻，鼠标指针位于十字架形状区域的次上矩形区域，则结果如下图所示。
图9
在图9里面，原本由代码编辑窗口所占据的区域，此时由【解决方案资源管理器】窗口和代码编辑窗口共同占据着，并且呢，【解决方案资源管理器】窗口位于代码编辑窗口的上边，并且，【解决方案资源管理器】窗口所占据的，是一个大一些的的上下高度。
（三）将拖动窗口停在静止窗口的右边或下边
拖动【解决方案资源管理器】窗口，并将鼠标指针移动到十字架形状的最右矩形或者是次右形区域，然后松开鼠标，这样，【解决方案资源管理器】窗口就停在了代码编辑窗口的右边了。
拖动【解决方案资源管理器】窗口，并将鼠标指针移动到十字架形状的最下矩形或者是次下形区域，然后松开鼠标，这样，【解决方案资源管理器】窗口就停在了代码编辑窗口的下边了。
如果松开鼠标的前一刻，鼠标指针位于十字架矩形的最右或最下矩形区域，则【解决方案管理器】窗口会占据着一个较为窄小的位置。
如果松开鼠标的前一刻，鼠标指针位于十字架矩形的次右或次下矩形区域，则【解决方案管理器】窗口会占据着一个较大一些的位置。
（四）将【解决方案资源管理器】窗口放在最左边
方法，大家已经是知道了。用鼠标拖动【解决方案资源管理器】窗口，将鼠标指针移动到十字架形状的最左矩形区域，然后松开鼠标，则【解决方案资源管理器】窗口将会停在代码编辑窗口的左边且占据一个较为狭窄的位置。并且呢，现在的【解决方案资源管理器】窗口与代码编辑窗口，它们是共享着原来的代码编辑窗口所在的区域。
五. 让拖动窗口的标签成为静止窗口中的一个选项卡
在本分节，我们依然将代码编辑窗口称为静止窗口。而将【解决方案资源管理器】窗口视为拖动窗口。
接下来，我们来讲一讲，将【解决方案资源管理器】窗口的标签变为代码编辑窗口中的一个选项卡的方法、
方法一
拖动【解决方案资源管理器】窗口，并将鼠标指针移动到十字架形状的中间矩形区域，然后松开鼠标，这样，【解决方案资源管理器】窗口会与代码编辑窗口共享同一个区域。并且，【解决方案资源管理器】窗口的标签会成为原有的代码编辑窗口中的一个选项卡，如下图所示。
图10
本方法中的【Git更改】选项卡，我们点击一下这个选项卡中的叉号，以关闭它，如下图所示。
图11
如图11所示，此时，只剩下了【解决方案资源管理器】和【main.c】两个选项卡。在这个基础上，我们来学习方法二里面的方法。
方法二
首先呢，我们来作一个准备工作，那就是拖动【解决方案资源管理器】的选项卡，使其变为一个浮动窗口，并调整其大小，结果如下图所示。
图12
以上为准备工作。接下来，我们来讲解方法二。
我们来拖动【解决方案资源管理器】的标签，将鼠标指针移动到代码编辑窗口的标签栏，并且确保此时的代码编辑窗口出现了蓝色透明，此刻，我们松开鼠标，则【解决方案资源管理器】窗口会与代码编辑窗口共享同一个位置，并且【解决方案资源管理器】窗口的标签会成为新窗口区域的一个选项卡或标签。过程如下图所示。
图13
图14
将【解决方案资源管理器】窗口放在最左边
将拖动窗口变为某一个窗口区域中的一个选项卡的方法，大家已经是知道了。
接下来，我们还是将【解决方案资源管理器】窗口放在最左边。使得在调整后的窗口里面，【解决方案资源管理器】窗口在左边，代码编辑窗口在右边，并且【解决方案资源管理器】窗口占据一个较为狭窄的区域。
方法是，首先将【解决方案资源管理器】窗口变为一个浮动窗口，并且调整其大小，使其成为一个很小的浮动窗口。
然后呢，用鼠标拖动【解决方案资源管理器】窗口的标签，将鼠标指针移动到十字架形状的最左矩形区域，然后松开鼠标，则【解决方案资源管理器】窗口将会停在代码编辑窗口的左边且占据一个较为狭窄的位置。并且呢，现在的【解决方案资源管理器】窗口与代码编辑窗口，它们是共享着原来的代码编辑窗口所在的区域。
结果如下图所示。
图15
六. 调整临近的窗口的边界
在图15里面，在【解决方案资源管理器】窗口和代码编辑窗口的交界，有一个竖直的粗的蓝色线条，如下图所示。
图16
如图16 所示，其中的红色框线标注出来了一个蓝色的竖直粗线条。
这个交界处的蓝色粗线条，别管它是竖直的，还是水平，它都是可以拖动的。图16中的交界处的蓝色粗线条，它是竖直的。我们用鼠标拖动它，向右边拖动一段距离，然后松开鼠标。这样一来，【解决方案资源管理器窗口】就变宽了。如下图所示。
图17
在图17的基础上，我们再来拖动这个交界处的蓝色粗线条，向左边拖动一段距离，然后松开鼠标。这样一来，【解决方案资源管理器窗口】就变窄了。如下图所示。
图18
七. 静止窗口与十字架
我们当前的界面，如下图所示。
图19
在图19 这个界面里，【解决方案资源管理器】窗口与代码编辑窗口分居左右两边，且【解决方案资源管理器】窗口很窄。
（一）准备工作
接下来，我们给界面增加一个窗口。依次点击【视图】，【工具箱】，菜单命令界面如下图所示。
图20
执行了命令以后，会出现工具箱窗口。拖动它，使其变为一个浮动窗口，并调整其大小，使其变为一个较小的浮动窗口，结果如下图所示。
图21
以上为准备工作。
（二）将【工具箱】窗口放在【解决方案资源管理器】窗口的下边
拖动【工具箱】窗口的标签，将鼠标指针移动到【解决方案资源管理器】窗口所在区域，确保十字架形状位于【解决方案资源管理器】窗口里面，暂时不松开鼠标。继续移动鼠标指针，移动到十字架形状的最下矩形区域，然后松开鼠标。结果如下图所示。
图22
如图22 所示，【工具箱】窗口位于【解决方案资源管理器】窗口的下方。并且现在的【工具箱】窗口与【解决方案资源管理器】窗口共享原【解决方案资源管理器】窗口所在的位置。
（三）将【工具箱】窗口放在代码编辑窗口的下边
首先，我们来做准备工作。
拖动【工具箱】窗口的标签，使其变为一个浮动窗口，并调整其窗口大小，使其变为一个较小的浮动窗口，如下图所示。
图23
至此，准备工作已完成。我们来讲本小节的内容。
拖动【工具箱】窗口的标签，将鼠标指针移动到代码编辑窗口所在区域，确保十字架形状位于代码编辑窗口里面，暂时不松开鼠标。继续移动鼠标指针，移动到十字架形状的最下矩形区域，然后松开鼠标。结果如下图所示。
图24
如图24 所示，【工具箱】窗口位于代码编辑窗口的下方。并且现在的【工具箱】窗口与代码编辑窗口共享原代码编辑窗口所在的位置。
（四）关闭【工具箱】窗口
【工具箱】窗口是一个很有用的窗口。在我们的教程里，我们以后去讲解对话框的章节的时候，会使用【工具箱】窗口中的东西来搭建自定义的对话框界面。此刻，我们有这样的一个印象就可以了。暂时不需要深究。
本节，我们先将【工具箱】窗口给关闭掉。
首先呢，还是来作准备工作。
拖动【工具箱】窗口的标签，使其变为一个浮动窗口，并调整其窗口大小，使其变为一个较小的浮动窗口，如下图所示。
图25
在【工具箱】窗口的标签栏的右边，有一个叉号按钮，如下图所示。
图26
点击图26 的红色框线所示的叉号按钮，结果如下图所示。
图27
到了这里，调整 Visual Studio 软件界面布局的方法，我就算是讲完了。
关于调整软件界面布局的命令，其实还有一些。比如，在【窗口】菜单的下面，有着【管理窗口布局】，【保存窗口布局】和【应用窗口布局】命令，这三个命令，我就不讲了。有兴趣，你自己来探索它们的使用方法吧。
不过，我还是可以略微说明一下。【窗口 -> 保存窗口布局】菜单命令，用于将我们所调整的某一窗口布局，给保存下来。我们可以保存很多个窗口布局，以供特定的场合来使用它们。
在我们保存了一些个窗口布局以后，我们可以通过执行【窗口 -> 应用窗口布局】菜单命令，来应用我们所保存过的某一窗口布局。
管理窗口布局，没研究过，估计是可以删除某一个窗口布局，或者重命名窗口布局吧。
关于【窗口】菜单下面的【管理窗口布局】，【保存窗口布局】和【应用窗口布局】三个子菜单命令，你自己研究吧。
结束语
到这里，调整窗口布局的方法，我们就算是讲完了。
大家多练习练习吧。
专栏导航
本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。
（一）WIn32 专栏导航
上一篇：Windows编程：在VS2019里面，调整代码字体大小
回到目录
下一篇：WIn32 笔记：本专栏课件
（二）MFC 专栏导航
上一篇：Windows编程：在VS2019里面，调整代码字体大小
回到目录
下一篇：MFC笔记：本专栏课件