VC界面设计.doc

创建漂亮的应用程序界面 刘汇丹 facteur@126.com ? 1. 首先在VC里面建立基于对话框的可执行应用程序工程，命名为demo。 2. 在主窗体对话框属性里取消Title bar属性， 去掉对话框标题栏。在对话框窗体里面添加如下图所示的各个控件实例。靠右侧的那个Edit控件设置了只读属性。 3. 为两个Edit、Slider和进度条设置相应的映射变量。在CDemoDlg::OnInitDialog()函数中设置初始值。 4. 使用位图作为窗体的背景。 使用绘图软件制作出喜欢的图片，保存为位图文件back.bmp，如下图所示。注意制作的图片要和对话框窗体大小一致，本例中图片的大小为（380px，260px），背景色为RGB(127, 169, 255)。 将此位图文件拷贝到res文件夹下，并导入到工程里面，设置ID为IDB_BACKBMP，为CDemoDlg类添加保护成员变量CBitmap m_back，并在CDemoDlg::OnInitDialog()函数里面添加如下代码： m_back.LoadBitmap(IDB_BACKBMP); //设置窗口区域 CRgn rgn; rgn.CreateRoundRectRgn(3,3,384,264,20,20); SetWindowRgn(rgn,TRUE); ?代码说明：本例中创建的图片是圆角矩形，所以首先调用CRgn 类的CreateRoundRectRgn()函数创建了圆角矩形区域，然后设置窗口区域为此区域。用户可以根据自己的喜好和需要创建椭圆形、矩形、圆角矩形等形状的区域，详细情况请查看相应函数。本例中圆角矩形区域的尺寸略大于背景图片的尺寸，这是根据实际情况做出的调整！ 在CDemoDlg::OnPaint()函数里面，以如下代码替换原来自动生成的代码： ? //绘制背景图片 CPaintDC dc(this); // device context for painting // TODO: Add your message handler code here CDC picDC; picDC.CreateCompatibleDC (dc); CBitmap *pOldBmp; pOldBmp = picDC.SelectObject (m_back); BITMAP bm; m_back.GetBitmap(bm); dc.BitBlt (0,0,bm.bmWidth ,bm.bmHeight,picDC,0,0,SRCCOPY); dc.SelectObject(pOldBmp); 经过以上步骤以后，编译运行应用程序，可以看到如下图所示的效果： 可以看到，窗体中各个控件的背景颜色和背景图片的颜色不一致。我们需要做进一步的调整。 5. 统一设置控件的背景颜色： 在CDemoApp::InitInstance()函数中int nResponse = dlg.DoModal()语句前插入如下代码： ? SetDialogBkColor(RGB(127,169,255), RGB(0,0,0)); ? 代码说明：该函数第一个参数设置背景色，第二个参数设置前景色。 运行应用程序，效果如下图所示： ? 此时，大部分控件的背景颜色已经和背景图片的颜色一致，已经基本形成了比较漂亮的图形界面。但是我们要做得完美一些。 6．这一步，我们实现漂亮的按钮。制作三个图片分别表示“确定”按钮正常、获取焦点和鼠标按下时的状态，如下面各图所示： 将此三个图片保存为bmp格式的文件并导入到工程中，设置ID分别为IDB_OKUP，IDB_OKFOCUS，IDB_OKDOWN。为CDemoDlg类添加保护型成员变量CBitmapButton m_btnOk，在CDemoDlg::OnInitDialog()函数中加入如下代码： m_btnOk.AutoLoad( IDOK, this ); m_btnOk.LoadBitmaps( IDB_OKUP, IDB_OKDOWN, IDB_OKFOCUS ); m_btnOk.SizeToContent(); ? 代码说明：LoadBitmaps()的参数为刚加入的位图资源的ID，对应于按钮的三种状态。 在“确定”按钮的属性里勾选Owner draw一项，否则按钮将保持原来的形状而不是显示为我们想要的形状。另外需要保证按钮的Caption选项不为空，否则编译时将报错。 7. 重复以上步骤，修改窗口右上角的最小化按钮和关闭按钮，注意这两个按钮没有获取焦点的状态