VC++中创建漂亮的应用程序界面[原创]

创建漂亮的应用程序界面

http://blog.163.com/[email protected]/blog/static/232080302007029112235281/

刘汇丹 [email protected]

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. 重复以上步骤，修改窗口右上角的最小化按钮和关闭按钮，注意这两个按钮没有获取焦点的状态，相应的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 < xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:office:smarttags" />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);

}