[MFC开发经验(2)] 设计对话框界面[TZZ]

大家好！在这篇文章中，我将与大家分享一下“设计M掂迎豢畦FC对话框”时的一些小技巧。为了更清楚的解释操作过程，我只能堆图了。如果您理解得比较快，请跳着芬简砝鬃看吧！如果您觉得这篇教程有帮助，请为我投上宝贵的一票，谢谢！（求些粉丝，来些动力吧！）

工具/原料

已安装VisualStudio2017（或以上版本）；

已阅读“[MFC开发经验(1)]禁用ESC键关闭对话框”；

方法/步骤

1、启动VS2017，然后新建一个名为“MFCDemo2”的基于对话框的MFC应用程序。项目创建完毕蒹筻分虞后，打开主对话框资源编辑界面，母皿钟床双击对话框中的“取消按钮”，为其添加一个新的消息处理函数。在VS打开的对话框源代码页面中，去掉“OnBnClickedCancel()”函数内部的代码；

2、切换到对话框编辑页面中，选中对话框窗口，为其添加缬方焱蜱一个“WM_CLOSE”消息的响应函数。当VS自动恐糍咦鞅打开对话框源代码页面后，在“OnClose()”函数中，添加调用“CDialog::OnOk()”的代码；

3、切换到对话框编辑页面中，按“CTRL+A”选中对话框上的全部控件，然后按“Delete键”将它们全部删除；

4、留意对话框上方和左方的标尺，拖动标尺的边缘，可以调成对话框内容区域与对话框边框的距离。这个距离我习惯上设置为4像素；

5、选中对话框或者控件后，对话框或控件的四周会出现调整大小的移动柄。拖动实心正方形方块可以调整对话框或控件的大小；

6、打开“工具箱面板”，使用鼠标左键选中其中的“GroupBox”控件，然后将其拖动到对话框中并松开鼠标左键。随后，按住鼠标左键并移动鼠标调整组框的位置，然后调整其大小；

7、继续按照上面的方法，向对话框中拖动两个“StaticText”控件和两个“EditControl”控件；

8、点击横向标尺上的任意溴腻男替位置添加一条新的参考线，然后调整其位置，将其值设置为8。按照同样的方法，在纵向标尺上也添加一条新参考钱，并将其值设置为8。如果你觉得每次移动参考线时，跳动的幅度太大，可溅局柑氍以双击标尺，然后在弹出的“参考线设置”窗口中设置网格间距；

9、继续添加参考线，同时调整对话框中控件的位置；

10、选中两个编辑框控件，勾袖稣拗然后点击工具栏中的“左对齐”，可以令四周有空心矩形的编辑框对齐到四周有实心矩形框的编辑框左表框。当你选中一个控件时，它的周围会出现实心的矩形框，复选其他控围泠惶底件时，如果按住“CTRL”，同时选择其他控件，那么被选的控件会变成布局参考控件。如果按住“SHIFT”并选择其他控件，那么布局参考控件不变，仍旧为第一次选中的那个控件（如果这里我没说清楚，自己试试就明白了。）；

11、继续添加参考线并调整两个编辑框的宽度；

12、选中静态控件，然后通过键盘上的方向键，调整其位置（每按一下移动1个像素）。如果在选中控件之后，按住“SHIFT”后，再按方向键，则可以微调该控件的高度和宽度；

13、选中“组框”控件，然后打开“属性面板”，将其中的“Caption”（标题）属性设置为空，这样组框就变成一个完整的框了；

14、按照同样的方法，继续调整两个静态控件的标题，将它们分别设置为“用户:”和“密码:”；

15、继续通过参考线和移动控件的方式调整对话框中控件的布局；

16、从工具栏中拖动两个按钮到对话框中，并将它们的“Caption”属性分别设置为“取消”和“登录”；

17、继续调整按钮和对话框的大小，另它们看起来更舒服（这个最终得听客户的，通常新手设计的界面都不太令人满意）；

18、对话框界面设计完毕后，可以点击工具栏上的“测试对话框”按钮，测试一下对话框的外观是否令人满意。至此，整个对话框界面就设计完毕了，Enjoy！