白乔原创：VC之美化界面篇

 

本文专题讨论VC中的界面美化，适用于具有中等VC水平的读者。读者最好具有以下VC基础：

1. 大致了解MFC框架的基本运作原理；

2. 熟悉Windows消息机制，熟悉MFC的消息映射和反射机制；

3. 熟悉OOP理论和技术；

本文根据笔者多年的开发经验，并结合简单的例子一一展开，希望对读者有所帮助。

 

1. 美化界面之开题篇

相信使用过《金山毒霸》、《瑞星杀毒》软件的读者应该还记得它们的精美界面：

 

 

 

图1 瑞星杀毒软件的精美界面

程序的功能如何如何强大是一回事，它的用户界面则是另一回事。千万不要忽视程序的用户界面，因为它是给用户最初最直接的印象，丑陋的界面、不友好的风格肯定会影响用户对软件程序的使用。

“受之以鱼，不若授之以渔”，本教程并不会向你推荐《瑞星杀毒软件》精美界面的具体实现，而只是向你推荐一些常用的美化方法。

 

2. 美化界面之基础篇

美化界面需要先熟悉Windows下的绘图操作，并明白Windows的幕后绘图操作，才能有的放矢，知道哪些可以使用，知道哪些可以避免……

 

2.1 Windows下的绘图操作

 

熟悉DOS的读者可能就知道：DOS下面的图形操作很方便，进入图形模式，整个屏幕就是你的了，你希望在哪画个点，那个地方就会出现一个点，红的、或者黄的，随你的便。你也可以花点时间画个按钮，画个你自己的菜单，等等……

Windows本身就是图形界面，所以Windows下面的绘图操作功能更丰富、简单。要了解Windows下的绘图操作，要实现Windows界面的美化，就必须了解MFC封装的设备环境类和图形对象类。

 

2.1.1 设备环境类

 

Windows下的绘图操作说到底就是DC操作。DC(Device Context设备环境)对象是一个抽象的作图环境，可能是对应屏幕，也可能是对应打印机或其它。这个环境是设备无关的，所以你在对不同的设备输出时只需要使用不同的设备环境就行了，而作图方式可以完全不变。这也就是Windows的设备无关性。

MFC的CDC类封装了Windows API 中大部分的画图函数。CDC的常见操作函数包括：

Drawing-Attribute Functions：绘图属性操作，如：设置透明模式

Mapping Functions：映射操作

Coordinate Functions：坐标操作

Clipping Functions：剪切操作

Line-Output Functions：画线操作

Simple Drawing Functions：简单绘图操作，如：绘制矩形框

Ellipse and Polygon Functions：椭圆/多边形操作

Text Functions：文字输出操作

Printer Escape Functions：打印操作

Scrolling Functions：滚动操作

*Bitmap Functions：位图操作

*Region Functions：区域操作

*Font Functions：字体操作

*Color and Color Palette Functions：颜色/调色板操作

其中，标注*项会用到相应的图形对象类，参见2.1.2内容。

2.1.2 图形对象类

 

 

设备环境不足以包含绘图功能所需的所有绘图特征，除了设备环境外， Windows还有其他一些图形对象用来储存绘图特征。这些附加的功能包括从画线的宽度和颜色到画文本时所用的字体。图形对象类封装了所有六个图形对象。

下面的表格列出了MFC的图形对象类：

MFC类 图形对象句柄 图形对象目的

CBitmap HBITMAP 内存中的位图

CBrush HBRUSH 画刷特性—填充某个图形时所使用的颜色和模式

CFont HFONT 字体特性—写文本时所使用的字体

CPalette HPALETTE 调色板颜色

CPen HPEN 画笔特性—画轮廓时所使用的线的粗细

CRgn HRGN 区域特性—包括定义它的点

表1 图形对象类和它们封装的句柄

使用CDC和图形对象类，在Windows里绘图还算是很简单的。观察以下的画面：

 

 图2 使用CDC绘制出的按钮

该画面通过以下代码自行绘制的假按钮：

 

查看源代码 拷贝至剪贴板 打印代码

1. BOOL CUi1View::PreCreateWindow(CREATESTRUCT& cs)   
2. {   
3.     //设置背景色   

1.     //CBrush CUi1View::m_Back   
2.     m_Back.CreateSolidBrush(::GetSysColor(COLOR_3DFACE));   
3.   
4.     cs.lpszClass = AfxRegisterWndClass(0, 0, m_Back, NULL);   
5.     return CView::PreCreateWindow(cs);   
6. }   
7.   
8. int CUi1View::OnCreate(LPCREATESTRUCT lpCreateStruct)    
9. {   
10.     if (CView::OnCreate(lpCreateStruct) == -1)   
11.         return -1;   
12.   
13.     //创建字体   
14.     //CFont CUi1View::m_Font   
15.     m_Font.CreatePointFont(120, "Impact");   
16.        
17.     return 0;   
18. }   
19.   
20. void CUi1View::OnDraw(CDC* pDC)   
21. {   
22.     //绘制按钮框架   
23.     pDC->DrawFrameControl(CRect(100, 100, 220, 160), DFC_BUTTON, DFCS_BUTTONPUSH);   
24.   
25.     //输出文字   
26.     pDC->SetBkMode(TRANSPARENT);   
27.     pDC->TextOut(120, 120, "Hello, CFan!");   
28. }  

BOOL CUi1View::PreCreateWindow(CREATESTRUCT& cs) { //设置背景色 //CBrush CUi1View::m_Back m_Back.CreateSolidBrush(::GetSysColor(COLOR_3DFACE)); cs.lpszClass = AfxRegisterWndClass(0, 0, m_Back, NULL); return CView::PreCreateWindow(cs); } int CUi1View::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CView::OnCreate(lpCreateStruct) == -1) return -1; //创建字体 //CFont CUi1View::m_Font m_Font.CreatePointFont(120, "Impact"); return 0; } void CUi1View::OnDraw(CDC* pDC) { //绘制按钮框架 pDC->DrawFrameControl(CRect(100, 100, 220, 160), DFC_BUTTON, DFCS_BUTTONPUSH); //输出文字 pDC->SetBkMode(TRANSPARENT); pDC->TextOut(120, 120, "Hello, CFan!"); }

 

呵呵，不好意思，这并不是真的Windows按钮，它只是一个假的空框子，当用户在按钮上点击鼠标时，放心，什么事情都不会发生。

2.2 Windows的幕后绘图操作

在Window中，如果所有的界面操作都由用户代码来实现，那将是一个很浩大的工程。笔者曾经在DOS设计过窗口图形界面，代码上千行，但实现的界面还是很古板、难看，除了我那个对编程一窍不通的女友，没有一个人欣赏它L；而且，更要命的是，操作系统，包括别的应用程序并不认识你的界面元素，这才是真正悲哀的。认识这些界面的只有你的程序，图2中的按钮永远只是一个无用的框子。

有了Windows，一切都好办了，Windows将诸如按钮、菜单、工具栏等等这些通用界面的绘制及动作都交给了系统，程序员就不用花心思再画那些按钮了，可以将更多的精力放在程序的功能实现方面。

所有的标准界面元素都被Windows封装好了。Windows知道怎么画你的菜单以及你的标注着“Hello, Cfan!”的按钮。当CFan某个快乐的小编(譬如：小飞)点击这个按钮的时候，Windows也明白按钮按下去的时候该有的模样，甚至，当这个友好的按钮获取焦点时，Windows也会不失时机地为它准备一个虚框……

有利必有弊。你的不满这时候产生了：你既想使用Windows的True Button，可也嫌它的界面不够好看，譬如，你喜欢用蓝色的粗体表达你对CFan的无限情怀(正如图2那样)——人心不足，有办法吗？有的。

 

3. 美化界面之实现篇

Windows还是给程序员留下了很多后门，通过一些途径还是可以美化界面的。本章节我们系统学习一下Windows界面美化的实现。

 

 

3.1 美化界面的途径

 

 

如何以合法的手段来达到美化界面的效果？一般美化界面的方法包括：

1. 使用MFC类的既有函数，设定界面属性；

2. 利用Windows的消息机制，截获有用的Windows的消息。通过MFC的消息映射(Message Mapping)和反射(Message Reflecting)机制，在Windows准备或者正在绘制该元素时，偷偷修改它的状态和行为，譬如：让按钮的边框为红色；

3. 利用MFC类的虚函数机制，重载有用的虚函数。在MFC框架调用该函数的时候，重新定义它的状态和行为；

一般来说，应用程序可以通过以下两种途径来实现以上的方法：

1. 在父窗口里，截获自身的或者由子元素(包括控件和菜单等元素)传递的关于界面绘制的消息；

2. 子类化子元素，或者为子元素准备一个新的类(一般来说该类必须继承于MFC封装的某个标准类，如：CButton)。在该子元素里，截获自身的或者从父窗口反射过来的关于界面绘制的消息。譬如：用户可以创建一个CXPButton类来实现具有XP风格的按钮，CXPButton继承于CButton。

对于应用程序，使用CXPButton类的途径相对于对话框窗口和普通窗口分成两种：

① 对话框窗口中，直接将原先绑定按钮的CButton类替换成CXPButton类，或者在绑定变量时直接指定Control类型为CXPButton，如图3所示：

 

 图3 为按钮指定CXPButton类型

②在普通窗口中，直接创建一个CXPButton类对象，然后在OnCreate()中调用CXPButton的Create方法；

以下的章节将综合地使用以上的方法，请读者朋友留心观察。

 

3.2 使用MFC类的既有函数

 

 

在界面美化的专题中，MFC也并非一无是处。MFC类对于界面美化也做了部分的努力，以下是一些可以使用的，参数说明略去。

CWinApp::SetDialogBkColor

void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORREF clrCtlText = RGB(0, 0, 0) );

指定对话框的背景色和文本颜色。

CListCtrl::SetBkColor

CReBarCtrl::SetBkColor

CStatusBarCtrl::SetBkColor

CTreeCtrl::SetBkColor

COLORREF SetBkColor( COLORREF clr );

设定背景色。

CListCtrl::SetTextColor

CReBarCtrl::SetTextColor

CTreeCtrl::SetTextColor

COLORREF SetTextColor( COLORREF clr );

设定文本颜色。

CListCtrl::SetBkImage

BOOL SetBkImage( LVBKIMAGE* plvbkImage );

BOOL SetBkImage( HBITMAP hbm, BOOL fTile = TRUE, int xOffsetPercent = 0, int yOffsetPercent = 0);

BOOL SetBkImage( LPTSTR pszUrl, BOOL fTile = TRUE, int xOffsetPercent = 0, int yOffsetPercent = 0 );

设定列表控件的背景图片。

CComboBoxEx::SetExtendedStyle

CListCtrl::SetExtendedStyle

CTabCtrl::SetExtendedStyle

CToolBarCtrl::SetExtendedStyle

DWORD SetExtendedStyle( DWORD dwExMask, DWORD dwExStyles );

设置控件的扩展属性，例如：设置列表控件属性带有表格线。

图4是个简单应用MFC类的既有函数来改善Windows界面的例子：