VC界面设计0707103318.docx
《VC界面设计0707103318.docx》由会员分享,可在线阅读,更多相关《VC界面设计0707103318.docx(8页珍藏版)》请在冰豆网上搜索。
VC界面设计0707103318
创建漂亮的应用程序界面
刘汇丹facteur@
1.首先在VC里面建立基于对话框的可执行应用程序工程,命名为demo。
2.在主窗体对话框属性里取消Titlebar属性,去掉对话框标题栏。
在对话框窗体里面添加如下图所示的各个控件实例。
靠右侧的那个Edit控件设置了只读属性。
3.为两个Edit、Slider和进度条设置相应的映射变量。
在CDemoDlg:
:
OnInitDialog()函数中设置初始值。
4.使用位图作为窗体的背景。
使用绘图软件制作出喜欢的图片,保存为位图文件back.bmp,如下图所示。
注意制作的图片要和对话框窗体大小一致,本例中图片的大小为(380px,260px),背景色为RGB(127,169,255)。
将此位图文件拷贝到res文件夹下,并导入到工程里面,设置ID为IDB_BACKBMP,为CDemoDlg类添加保护成员变量CBitmapm_back,并在CDemoDlg:
:
OnInitDialog()函数里面添加如下代码:
m_back.LoadBitmap(IDB_BACKBMP);
//设置窗口区域
CRgnrgn;
rgn.CreateRoundRectRgn(3,3,384,264,20,20);
SetWindowRgn(rgn,TRUE);
代码说明:
本例中创建的图片是圆角矩形,所以首先调用CRgn类的CreateRoundRectRgn()函数创建了圆角矩形区域,然后设置窗口区域为此区域。
用户可以根据自己的喜好和需要创建椭圆形、矩形、圆角矩形等形状的区域,详细情况请查看相应函数。
本例中圆角矩形区域的尺寸略大于背景图片的尺寸,这是根据实际情况做出的调整!
在CDemoDlg:
:
OnPaint()函数里面,以如下代码替换原来自动生成的代码:
//绘制背景图片
CPaintDCdc(this);//devicecontextforpainting
//TODO:
Addyourmessagehandlercodehere
CDCpicDC;
picDC.CreateCompatibleDC(&dc);
CBitmap*pOldBmp;
pOldBmp=picDC.SelectObject(&m_back);
BITMAPbm;
m_back.GetBitmap(&bm);
dc.BitBlt(0,0,bm.bmWidth,bm.bmHeight,&picDC,0,0,SRCCOPY);
dc.SelectObject(pOldBmp);
经过以上步骤以后,编译运行应用程序,可以看到如下图所示的效果:
可以看到,窗体中各个控件的背景颜色和背景图片的颜色不一致。
我们需要做进一步的调整。
5.统一设置控件的背景颜色:
在CDemoApp:
:
InitInstance()函数中intnResponse=dlg.DoModal()语句前插入如下代码:
SetDialogBkColor(RGB(127,169,255),RGB(0,0,0));
代码说明:
该函数第一个参数设置背景色,第二个参数设置前景色。
运行应用程序,效果如下图所示:
此时,大部分控件的背景颜色已经和背景图片的颜色一致,已经基本形成了比较漂亮的图形界面。
但是我们要做得完美一些。
6.这一步,我们实现漂亮的按钮。
制作三个图片分别表示“确定”按钮正常、获取焦点和鼠标按下时的状态,如下面各图所示:
将此三个图片保存为bmp格式的文件并导入到工程中,设置ID分别为IDB_OKUP,IDB_OKFOCUS,IDB_OKDOWN。
为CDemoDlg类添加保护型成员变量CBitmapButtonm_btnOk,在CDemoDlg:
:
OnInitDialog()函数中加入如下代码:
m_btnOk.AutoLoad(IDOK,this);
m_btnOk.LoadBitmaps(IDB_OKUP,IDB_OKDOWN,IDB_OKFOCUS);
m_btnOk.SizeToContent();
代码说明:
LoadBitmaps()的参数为刚加入的位图资源的ID,对应于按钮的三种状态。
在“确定”按钮的属性里勾选Ownerdraw一项,否则按钮将保持原来的形状而不是显示为我们想要的形状。
另外需要保证按钮的Caption选项不为空,否则编译时将报错。
7.重复以上步骤,修改窗口右上角的最小化按钮和关闭按钮,注意这两个按钮没有获取焦点的状态,相应的LoadBitmaps()只设置两个参数。
最终效果如下图所示:
附加功能:
1.系统托盘图标的实现
在头文件中添加如下的宏定义:
#defineMYWM_NOTIFYICONWM_USER+100
#defineMYTIP"demo-制作漂亮的应用程序界面"
#defineMYICON2000//
#defineWM_MYMESSAGEWM_USER+101
双击最小化按钮添加函数CDemoDlg:
:
OnMinimize(),添加代码如下:
voidCDemoDlg:
:
OnMinimize()
{
//TODO:
Addyourcontrolnotificationhandlercodehere
CDialog:
:
ShowWindow(SW_HIDE);
//添加系统托盘图标
BOOLres;
NOTIFYICONDATAtnid;
HICONhicon;
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_msgLRESULTOnMyNotifyIcon(WPARAMwParam,LPARAMlParam),在类的实现中找到BEGIN_MESSAGE_MAP(CDemoDlg,CDialog)与END_MESSAGE_MAP()之间添加消息映射ON_MESSAGE(MYWM_NOTIFYICON,OnMyNotifyIcon),并在类的实现中添加如下代码:
LRESULTCDemoDlg:
:
OnMyNotifyIcon(WPARAMwParam,LPARAMlParam)
{
switch(lParam)
{
caseWM_LBUTTONDOWN:
caseWM_RBUTTONDOWN:
if(wParam==MYICON)
{
ShowWindow(SW_SHOW);
SetForegroundWindow();
//删除系统托盘图标
NOTIFYICONDATAtnid;
tnid.cbSize=sizeof(NOTIFYICONDATA);
tnid.hWnd=m_hWnd;
tnid.uID=MYICON;
Shell_NotifyIcon(NIM_DELETE,&tnid);
}
break;
}
return0L;
}
2.实现鼠标拖动窗口:
在ClassWizard里面为事件WM_LBUTTONDOWN添加消息映射,并添加代码如下:
voidCDemoDlg:
:
OnLButtonDown(UINTnFlags,CPointpoint)
{
//TODO:
Addyourmessagehandlercodehereand/orcalldefault
PostMessage(WM_NCLBUTTONDOWN,HTCAPTION,MAKELPARAM(point.x,point.y));
CDialog:
:
OnLButtonDown(nFlags,point);
}