[整理]VC界面设计(20120707103318)

[整理]VC界面设计(20120707103318) 创建漂亮的应用程序界面 刘汇丹 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 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 的文件并导入到工程中，设置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. 重复以上步骤，修改窗口右上角的最小化按钮和关闭按钮，注意这两个按钮没有获取焦点的状态，相应的LoadBitmaps()只设置两个参数。最终效果如下图所示: 附加功能: 1. 系统托盘图标的实现 在头文件中添加如下的宏定义: #define MYWM_NOTIFYICON WM_USER+100 #define MYTIP "demo-制作漂亮的应用程序界面" #define MYICON 2000 // #define WM_MYMESSAGE WM_USER+101 双击最小化按钮添加函数CDemoDlg::OnMinimize()，添加代码如下: void CDemoDlg::OnMinimize() { // TODO: Add your control notification handler code here CDialog::ShowWindow( SW_HIDE ); //添加系统托盘图标 BOOL res; NOTIFYICONDATA tnid; HICON hicon; hicon = LoadIcon(AfxGetApp()->m_hInstance, MAKEINTRESOURCE(IDR_MAINFRAME)); tnid.cbSize = sizeof(NOTIFYICONDATA); tnid.hWnd = m_hWnd; tnid.uID = MYICON; tnid.uCallbackMessage = MYWM_NOTIFYICON; tnid.uFlags = NIF_MESSAGE|NIF_ICON|NIF_TIP; tnid.hIcon = hicon; lstrcpyn(tnid.szTip,MYTIP,sizeof(MYTIP)); res = Shell_NotifyIcon(NIM_ADD,&tnid); if (hicon) DestroyIcon(hicon); } 以上代码可以实现点击最小化按钮时隐藏程序图形界面，并在系统托 盘显示小图标。下面我们来实现当鼠标点击系统托盘图标时恢复程序 图形界面。 在CDemoDlg类的声明中添加消息映射函数afx_msg LRESULT OnMyNotifyIcon(WPARAM wParam,LPARAM lParam)，在类的实现中找到BEGIN_MESSAGE_MAP(CDemoDlg, CDialog)与END_MESSAGE_MAP()之间添加消息映射 ON_MESSAGE(MYWM_NOTIFYICON, OnMyNotifyIcon)，并在类的实现中添加如下代码: LRESULT CDemoDlg::OnMyNotifyIcon(WPARAM wParam,LPARAM lParam) { switch(lParam) { case WM_LBUTTONDOWN: case WM_RBUTTONDOWN: if (wParam==MYICON) { ShowWindow(SW_SHOW); SetForegroundWindow(); //删除系统托盘图标 NOTIFYICONDATA tnid; tnid.cbSize = sizeof(NOTIFYICONDATA); tnid.hWnd = m_hWnd; tnid.uID = MYICON; Shell_NotifyIcon(NIM_DELETE,&tnid); } break; } return 0L; } 2. 实现鼠标拖动窗口: 在Class Wizard里面为事件WM_LBUTTONDOWN添加消息映射， 并添加代码如下: void CDemoDlg::OnLButtonDown(UINT nFlags, CPoint point) { // TODO: Add your message handler code here and/or call default PostMessage(WM_NCLBUTTONDOWN,HTCAPTION,MAKELPARAM(point.x,point.y)); CDialog::OnLButtonDown(nFlags, point); }