[MFC开发经验(2)] 设计对话框界面[TZZ]
1、启动VS2017,然后新建一个名为“MFCDemo2”的基于对话框的MFC应用程序。项目创建完毕后,打开主对话框资源编辑界面,母皿钟床双击对话框中的“取消按钮”,为其添加一个新的消息处理函数。在VS打开的对话框源代码页面中,去掉“OnBnClickedCancel()”函数内部的代码;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/def72c6c576699cfeeb4e5d7a885e036e3915e7c.jpg)
2、切换到对话框编辑页面中,选中对话框窗口,为其添加一个“WM_CLOSE”消息的响应函数。当VS自动打开对话框源代码页面后,在“OnClose()”函数中,添加调用“CDialog::OnOk()”的代码;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/49701aebf6a75f0f7cccbe5a97324b18502c4c7c.jpg)
3、切换到对话框编辑页面中,按“CTRL+A”选中对话框上的全部控件,然后按“Delete键”将它们全部删除;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/7d34fbf4fcf5ee0d2a266063f96b0ce264e7ba7c.jpg)
4、留意对话框上方和左方的标尺,拖动标尺的边缘,可以调成对话框内容区域与对话框边框的距离。这个距离我习惯上设置为4像素;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/40d2d0e8b004541bf5e73892869a310e1699a67c.jpg)
5、选中对话框或者控件后,对话框或控件的四周会出现调整大小的移动柄。拖动实心正方形方块可以调整对话框或控件的大小;
6、打开“工具箱面板”,使用鼠标左键选中其中的“Group Box”控件,然后将其拖动到对话框中并松开鼠标左键。随后,按住鼠标左键并移动鼠标调整组框的位置,然后调整其大小;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/ad121888912ca5caea005afc8bfc77f7990e947c.jpg)
7、继续按照上面的方法,向对话框中拖动两个“Static Text”控件和两个“Edit Control”控件;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/8974c38a59de4507cfe9f2c45e413a8ca708857c.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/2e66f9ef28066b01cb35f9f43df39187021cf37c.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/4b626771fe1d96d873f1ab942ccd0c6efaf2e17c.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/8a17b3042e6817e92d09c44cd356d53da924ce7c.jpg)
11、继续添加参考线并调整两个编辑框的宽度;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/05a320a23a42a07a2bf87687673834bb18efc17c.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/a007a9b1eef97fbdd594fe07b74133bad241337d.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/c99358fe474ec2839d57f15bbe4f50b8b53e1c7d.jpg)
14、按照同样的方法,继续调整两个静态控件的标题,将它们分别设置为“用户 : ”和“密码 : ”;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/d2987775f2c4ec999cabceb5c3fe1e425c6b077d.jpg)
15、继续通过参考线和移动控件的方式调整对话框中控件的布局;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/bf6e59704618dfda31d3f13289214f579256777d.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/54a89daee8d7592a06072acc9f31dfb6336c677d.jpg)
16、从工具栏中拖动两个按钮到对话框中,并将它们的“Caption”属性分别设置为“取消”和“登录”;
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/22c4fe36e29147e8c108f3c6b603bbea3f86587d.jpg)
17、继续调整按钮和对话框的大小,另它们看起来更舒服(这个最终得听客户的,通常新手设计的界面都不太令人满意);
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/5e4e9c2b74ee1c324af19b9807f1d8a727334b7d.jpg)
![[MFC开发经验(2)] 设计对话框界面[TZZ]](https://exp-picture.cdn.bcebos.com/65390a23beb9763e3b2b71626ad06de89b61b07d.jpg)