怎样使你的软件界面更漂亮(加代码).docx

我们使用过很多的软件， 给我们留下印象很深的是那些界面漂亮且迷人的软件， 国外的软件象QuickTime,国产的象金山词霸等，它们的软件界面设计风格都有独特之处。本人跟据自已的经验和大家探讨一下软件的漂亮界面实现的原理并提供DEMO程序。本人经验不多，经常从VCKBASE.COM吸取知识，共同学习，如有不足之处，请指正！也欢迎和我联系。下面就开始吧！一、漂亮界面实现的原理用图象元素自绘窗口标题样栏，边框，系统按钮（最大化、最小化、关闭按钮）还有按窗口中的控件。图象当然是美工画的，但要你教美工怎么去画，是不是不能理解? ，呆会我会告诉你你如何去教美工画.请先仔细看下图。明白了吧，被红线包括的部分都是要画的图象。画得好不好会直接影响你的软件界面。二、原理说玩了，来说一下实现的基本知识1、VC软件绘图技术：双击代码全选123456789101112131415CBitmap* pBitmap = new CBitmap;BITMAP BmpInfo;CBitmap* pOldBitmap;CDC* pDisplayMemDC=new CDC;pDisplayMemDC-CreateCompatibleDC(pDC);pBitmap-LoadBitmap(IDB_TITLE_LEFT);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);pBitmap-GetBitmap(&BmpInfo);/ x,y为绘图位置 ，必要时此语句要有For（.；.；.）控制pDC-BitBlt(x,y, BmpInfo.bmWidth, BmpInfo.bmHeight, pDisplayMemDC, 0, 0, SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();ReleaseDC(pDisplayMemDC);/记得执行以下的语句delete pDisplayMemDC;delete pBitmap;2、坐标的概念：点、窗口坐标和屏幕坐标及转换，很重要！如不清楚请先复习相关知识。下图是我写在一个界面，就是基于上述原理实现的：下面介绍软件如何实现的：、重载对话框的消息函数：双击代码全选1void OnNcLButtonDown(UINT nHitTest, CPoint point);/单击标题栏时是响应双击代码全选1void OnNcMouseMove(UINT nHitTest, CPoint point);/Mous 在标题移动时响应双击代码全选1LRESULT DefWindowProc(UINT message, WPARAM wParam, LPARAM lParam)、添加关键成员函数为：BOOL DrawTitleBar(CDC *pDC)、添加完消息涵数后，在.cpp中实现它们的代码：双击代码全选123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371void CTitleBarDlg:OnNcMouseMove(UINT nHitTest, CPoint point)CDC* pDC = GetWindowDC();CDC* pDisplayMemDC=new CDC;pDisplayMemDC-CreateCompatibleDC(pDC);CBitmap* pBitmap = new CBitmap;CBitmap* pOldBitmap;CRect rtWnd, rtButton;if (pDC)CString StrTemp = ;GetWindowRect(&rtWnd);/mouse坐标转化为本窗口坐标 重要point.x = point.x - rtWnd.left;point.y = point.y - rtWnd.top;/判断mouse是否移到系统按钮上if (m_rtButtExit.PtInRect(point)pBitmap-LoadBitmap(IDB_EXIT_FOCUS);StrTemp = _T(关闭);elseif(m_rtButtMin.PtInRect(point)pBitmap-LoadBitmap(IDB_MIN_FOCUS);StrTemp = _T(最小化窗口);elseif(m_rtButtMax.PtInRect(point)pBitmap-LoadBitmap(IDB_MAX_FOCUS);if(IsZoomed()StrTemp = _T(还原窗口);elseStrTemp = _T(最化大窗口);elsepBitmap-LoadBitmap(IDB_NORMAL);rtButton = m_rtButtMin;BITMAP BmpInfo;pBitmap-GetBitmap(&BmpInfo);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);pDC-BitBlt(rtButton.left-6,rtButton.top-2,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();CRect ShowTipRec;ShowTipRec = m_rtButtMin;if(!StrTemp.IsEmpty()/ScreenToClient(&ShowTipRec);/m_ToolTip.AddToolTip(IDD_TITLEBAR_DIALOG,&ShowTipRec,StrTemp);/m_ToolTip.SetDelayTime(200);ReleaseDC(pDisplayMemDC);ReleaseDC(pDC);delete pDisplayMemDC;delete pBitmap;CDialog:OnNcMouseMove(nHitTest, point);/此为关键函数void CTitleBarDlg:DrawTitleBar(CDC *pDC)if (m_hWnd)CBrush Brush(RGB(0,100,255);CBrush* pOldBrush = pDC-SelectObject(&Brush);CRect rtWnd, rtTitle, rtButtons;GetWindowRect(&rtWnd);/取得标题栏的位置rtTitle.left = GetSystemMetrics(SM_CXFRAME);rtTitle.top = GetSystemMetrics(SM_CYFRAME);rtTitle.right = rtWnd.right - rtWnd.left - GetSystemMetrics(SM_CXFRAME);rtTitle.bottom = rtTitle.top + GetSystemMetrics(SM_CYSIZE);/计算最小化按钮的位置，位图大小为15X15rtButtons.left = rtTitle.right-60;rtButtons.top= rtTitle.top+2;rtButtons.right = rtTitle.right-42;rtButtons.bottom = rtTitle.top+20;m_rtButtMin = rtButtons;/计算最大化按钮的位置，位图大小为15X15m_rtButtMax.left = m_rtButtMin.left + 18;m_rtButtMax.top = m_rtButtMin.top;m_rtButtMax.right = m_rtButtMin.right + 16;m_rtButtMax.bottom = m_rtButtMin.bottom;m_rtButtExit.left = m_rtButtMax.left + 18;m_rtButtExit.top =m_rtButtMax.top;m_rtButtExit.right = m_rtButtMax.right + 16;m_rtButtExit.bottom = m_rtButtMax.bottom;/准备CBitmap* pBitmap = new CBitmap;BITMAP BmpInfo;CBitmap* pOldBitmap;CDC* pDisplayMemDC=new CDC;pDisplayMemDC-CreateCompatibleDC(pDC);/重画CaptionPOINTDrawPonit;DrawPonit.x =rtTitle.left-4;DrawPonit.y =rtTitle.top-4;pBitmap-LoadBitmap(IDB_TITLE_LEFT);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);pBitmap-GetBitmap(&BmpInfo);pDC-BitBlt(rtTitle.left-4,rtTitle.top-4,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);DrawPonit.x = DrawPonit.x + BmpInfo.bmWidth;pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();pBitmap-LoadBitmap(IDB_TOP);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);pBitmap-GetBitmap(&BmpInfo);while(DrawPonit.xBitBlt(DrawPonit.x,DrawPonit.y,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);DrawPonit.x = DrawPonit.x + BmpInfo.bmWidth;pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();pBitmap-LoadBitmap(IDB_TITLE_RIGHT);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);pBitmap-GetBitmap(&BmpInfo);pDC-BitBlt(DrawPonit.x,DrawPonit.y,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();/重画最小化buttonrtButtons = m_rtButtMin;pBitmap-LoadBitmap(IDB_NORMAL);pBitmap-GetBitmap(&BmpInfo);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);pDC-BitBlt(rtButtons.left-6,rtButtons.top-2,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();int nOldMode = pDC-SetBkMode(TRANSPARENT);COLORREF clOldText=pDC-GetTextColor();CFont titleFont;titleFont.CreateFont( 12, / nHeight8, / nWidth0, / nEscapement文本行逆时针旋转角度0, / nOrientation字体角度FW_BOLD, / nWeight字体粗细程度FALSE, / bItalicFALSE, / bUnderline0, / cStrikeOut 删除线ANSI_CHARSET, / nCharSetOUT_DEFAULT_PRECIS, / nOutPrecisionCLIP_DEFAULT_PRECIS, / nClipPrecisionDEFAULT_QUALITY, / nQualityDEFAULT_PITCH | FF_SWISS, / nPitchAndFamily_T(隶书);/ lpszFac pDC-SelectStockObject(SYSTEM_FIXED_FONT);CFont *OldFont;OldFont = pDC-SelectObject(&titleFont);CString m_StrTitle;GetWindowText(m_StrTitle);pDC-SetTextColor(RGB(80,255,25);if(m_ShowTitle)pDC-TextOut(65,10,m_StrTitle);elsem_StrTitle = m_StrTitle.Left(6);m_StrTitle += .;pDC-TextOut(30,10,m_StrTitle);pDC-SetBkMode(nOldMode);pDC-SetTextColor(clOldText);pDC-SelectObject(OldFont);/pDC-TextOut(60,60,m_StrTitle);/重画左边框pBitmap-LoadBitmap(IDB_LEFTDOWN);pBitmap-GetBitmap(&BmpInfo);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);int i ;for (i= 20;iBitBlt(0, rtButtons.top+i,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();/重画右边框pBitmap-LoadBitmap(IDB_RIGHTDOWN);pBitmap-GetBitmap(&BmpInfo);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);GetClientRect(&rtWnd);for (i= 25;iBitBlt(rtWnd.right, i,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();/重画底边框pBitmap-LoadBitmap(IDB_DOWN);pBitmap-GetBitmap(&BmpInfo);pOldBitmap=(CBitmap*)pDisplayMemDC-SelectObject(pBitmap);GetClientRect(&rtWnd);for (i= 9; iBitBlt(i,rtWnd.bottom+26,BmpInfo.bmWidth,BmpInfo.bmHeight,pDisplayMemDC,0,0,SRCCOPY);pDisplayMemDC-SelectObject(pOldBitmap);pBitmap-DeleteObject();ReleaseDC(pDisplayMemDC);delete pDisplayMemDC;delete pBitmap;void CTitleBarDlg:OnNcLButtonDown(UINT nHitTest, CPoint point)CRect rtWnd;GetWindowRect(&rtWnd);/mouse坐标转化为本窗口坐标 重要point.x = point.x - rtWnd.left;point.y = point.y - rtWnd.top;/检测各按钮是否按到if (m_rtIcon.PtInRect(point)AfxMessageBox(界面软件设计者：朱一松 EMail:Song_0962);elseif (m_rtButtHelp.PtInRect(point)SendMessage(WM_HELP);elseif (m_rtButtExit.PtInRect(point)SendMessage(WM_CLOSE);elseif (m_rtButtMin.PtInRect(point)m_ShowTitle = FALSE;SendMessage(WM_SYSCOMMAND,SC_MINIMIZE,MAKELPARAM(point.x, point.y);elseif (m_rtButtMax.PtInRect(point)m_ShowTitle = TRUE;if (IsZoomed()SendMessage(WM_SYSCOMMAND,SC_RESTORE,MAKELPARAM(point.x, point.y);elseSendMessage(WM_SYSCOMMAND,SC_MAXIMIZE,MAKELPARAM(point.x, point.y);Invalidate();elseif (!IsZoomed()Default();/*LRESULT CTitleBarDlg:DefWindowProc(UINT message, WPARAM wParam, LPARAM lParam)LRESULT lrst=CDialog:DefWindowProc(message, wParam, lParam);if (!:IsWindow(m_hWnd)return lrst;if (message=WM_MOVE| message=WM_PAINT| message=WM_NCPAINT| message=WM_NCACTIVATE| message = WM_NOTIFY)CDC* pWinDC = GetWindowDC();if (pWinDC)DrawTitleBar(pWinDC);ReleaseDC(pWinDC);return lrst;好了运行你的程序，即可出现漂亮的界面。说明在设计对话框时最好只选上Title Bars,其它不要.消息函数要手动添加。只本程序是在VC+6.0 +WinXP环境下完成的。经过实践证明，仅仅画一个窗口很容易，多窗口程序软件实现统一风格很难。如若有机会的话，我会和大家继续探讨如何将设计好的漂亮窗口子类化，让程序所有的窗口有统一风格，美化窗口的其它控件并可自动随窗口改变而调整大小。我想那才是我们大家关心的。对不？本文示例代码或素材下载一、统一风格漂亮界面设计的理论与实现a窗口和对话框Windows操作系中窗口和对话框在我们看来是一样的，就是一个四边形，有标题栏、系统按钮，边框等，可移动和可变大小。实际上窗口和对话框是有的区别的。在创建对话框窗口时的工作中要发生两个主要过程：对话框的过程和其窗口过程。Win32 SDK对话框使用了系统提供的对话框窗口的窗口过程和对话框过程，对话框过程将被窗口过程调用。在MFC下，所有的窗口类都使用了同一个窗口过程，对话框类也一样。MFC对话框过程只处理WM_INITDIALOG消息，其余都让窗口过程处理，我们只能在函数OnInitDialog()中有唯一机会处理我们的对话框的初始化工作。因而我们设计界面时要在窗口过程处理中相关消息实现我们的界面。b. 几个有关对话框窗口消息的处理1WM_NCPAINT：重画非客户区消息重载此消函数，可以标题栏上为所欲为。2. WM_NCLBUTTONDOWN：在非客户区上按下鼠标左键消息要想在标题栏相应鼠标左键，可重载此消函数3WM_NCMOUSEMOVE：在非客户区上移动鼠标会产生此消息4WM_SIZE：在窗口改变大小后产生此消息。为了使软件更专业，调整对放框大小时，里面的各控件也应合理调整位置和大小，重载此消函数可实现目的。还有很几个，其它的不介绍了。c. 统一的界面风格实现如何运用上述知识请参考我的前一文让你的软件界面更漂亮(一)中有介绍并有源程序。漂亮界面的统一风格是如何实现的将是本文要讨论主要内容。我们知道Windows操作系统窗口风格基本上是一致的，微软的应用软件程序也和操作系统风格基本是统一的。所以使我们的CDialog 也跟其一样，要改变它的界面风格很困难。除非你对MFC了如指掌，甚至要了解操作系统内核。本人在摸索过程中经过无数次碰壁后，终于找到了希望。请看下面两幅图：图一图二看了上面两图你是不是对VC有信心了？Visual C+ 可实现你想要的统一风格界面。请看如何实现：1首先要建立漂亮界面主窗口。它也是一个对话框，方法前文有介绍。2处理漂亮界面主窗口的OnInitDialog（）函数。很重要！双击代码全选12345678910111213141516171819202122BOOL CTitleBarDlg:OnInitDialog()/此处 不能修改和添加代码!因为其它对话框的OnInitDialog()要用到m_ToolTip.Create(this,TTS_ALWAYSTIP);/Create提示m_ReSizeFlag= TRUE;CRect rtWnd;GetClientRect(&rtWnd);m_OldWidth = rtWnd.Width();m_OldHeight = rtWnd.Height();OldPoint.x = rtWnd.Width();OldPoint.y = rtWnd.Height();if(!m_BaseFlag) m_BaseFlag = TRUE; CDialog:OnInitDialog(); /*你只能在处修改和添加你所需主窗口初始化的代码 /*return TRUE;3建立你的对话框和对话框类。用对话框资源编辑器完成对话框模板。用ClassWizard生成CyourDlg类此时基类只能为CDialog。4.修改基类CDialog为漂亮界面类(CtitleBarDlg)yourDlg.h yourDlg.cpp 内的CDialog都要改，用Edit/Replace功能快些且安全。在yourDlg.h还要包括TitleBarDlg.h注意：对话框构造函数第一个参数CtitleBarDlg nID 要删除。否则通Build通不过。5. 显示你的窗口双击代码全选12345/显示代码CyouDlg *pMyDlg;pMyDlg = new CyouDlg;pMyDlg-Create(IDD_YOUR_DLG);pMyDlg-ShowWindow(SW_SHOW);这种代码要在适当的时候delete pMyDlg,防内存泄露。由于 pMyDlg没有定义为全局，处理它有一定难度。如果是用DoModal()显示就好了，大家可以去试一下。解决了告诉我！6. 完成编译运行。你的对话框的风格是不是和主窗口一样，有没显示出来？二说明统一风格的漂亮界面基本达到了目的。但同样也存在几个问题:1漂亮界面界必须是主窗口。我还没有想出方法能让它独立出来。2显示其它子窗口只能是非模式对话框窗口方式。我尝试DoModal显示但没有成功。但我分析MFC后找到了笨方法，MFC也是这么做。3基于述原因，我建立了统一的界面风格的开发模板，只有在此模板上开发就能实现软件漂亮统一的界面风格。需要可和我联系! 若有机会我会和大家继续探讨漂亮界面的实现的其它难点。实现令人满意的风格统一的软件界面确实很难,象网友提到的MessageBox、FileDialog、FontDialog、目录选择对话框等MFC内部甚至系统DLL内的对话框，要想让它变脸可不容易。有人说HOOK技术可以，HOOK技术确实可以，HOOK可以说是无孔不入，但HOOK的使用效率却是令人难以满意的，从目前大多数采HOOK技术的换肤软件使用情况来看，完全可以证明这一点。今天我们将讨论另外一技术来实现FileDialog的变脸，这种技术叫替换窗口过程法（注：本人杜撰）。窗口过程函数是大多窗口都有的，它处理窗口中(包括子窗口)的每一个事件，替换窗口过程法与HOOK技术比起来孰强誰弱是很显然的，因为同一个HOOK只能拦截一个事件，处理起来相当费时，HOOK也有它的优势，但不是本文要讨论的。这里先让大家眼见为实，请看下图：一、原理说明：替换对话框的窗口过程要用到这个函数SetWindowLong()其原型如下：双击代码全选1234LONG SetWindowLong(HWND hWnd, int nIndex ,long dwLongNewProc)hWnd为指定窗口的句柄，nIndex为 GWL_WNDPROC时才可设定新的窗口过程dwLongNewProc为指定新的窗口过程函数地址反回值为一个long的数值，此值为旧的窗口过程函数地址。如果要替换某个窗口的窗口过程函数，首先要想法弄到它的窗口的句柄，当然还得有窗口过程。二、CFileDialog文件对话框界面设计a. 从CFileDialog派生类CMyFileDialog；b. 添加Protected 型虚成员函数：OnInitDone()；此函是实际上是CFileDialog一个虚函数，它在文件对话框创后建后被调用，它给我们留下了一个入口，因些重载现实替换其窗口过程函数；c. 添加成员函数MyWindowProcNew()双击代码全选1234static LRESULT CALLBACK WindowProcNew(HWND hwnd,UINT message,WPARAM wParam,LPARAM lParam);在这函数实现的时候你可大显身手，处理得好不好决定你是否能变脸成功。 d. 实现代码及说明如下：双击代码全选123456789101112131415161718192021222324252627282930313233343536WNDPROC m_MyWndProc; /定义全局变量保存旧的窗口过程函数地址void CMyFileDialog:OnInitDone()CWnd* pDialog = GetParent();m_MyWndProc=(WNDPROC)SetWindowLong(pDialog-m_hWnd,GWL_WNDPROC,(long)MyWindowProcNew);LRESULT CALLBACK CMyFileDialog:MyWindowProcNew(HWND hwnd,UINT message,WPARAM wParam,LPARAM lParam)switch (message)case WM_NOTIFY:case WM_MOUSEMOVE:case WM_MOVE:break;case WM_NCACTIVATE:break;case WM_NCPAINT:break;case WM_NCMOUSEMOVE:break;case WM_PAINT:break;case WM_COMMAND:break;case WM_SIZE:break;case WM_XX:default:break;/这时要恢复调用旧的窗口函数，当然必时可要忽略它return CallWindowProc(m_MyWndProc, hwnd, message, wParam, lParam);这个函数CallWindowProc（）用来恢调用复旧窗口过程函数，当然这并不意味取消了新的窗口过程。你也可跳过它不去执行，那为什要恢复旧的窗口过程函数？因为旧的窗口过程函数它处理了太多的事件，而新窗口过程函数只处理我们关心的事件，如果你乐意的话你完全可不要调用旧的窗口过程函数，那可是要付出大的代价的。具体细节请大家去实现，可参“让你的软件界面更漂亮(一)”。三、CMyFileDialog的用法我把CMyFileDialog写成一个DLL，有Debug和Release两个版，请用时分别选择 a.先把.lib .dll .h 文件持拷到工程目录。在要使用处加如代码：双击代码全选12#include MyFileDialg.h#pragam comment(lib,user.lib)b.显示文件对话框：双击代码全选1234CMyFileDialog MyFileDlg(TRUE, 1, _T(对话框标题); MyFileDlg.DoModal(); CStringFileName = MyFileDlg.GetPathName() FileName是反回的结果c. CMyFileDialog有一个超值的功能，不知有没有从上图看出来？它能够用来代替 SHBrowseForFoler 作为目录选择对话框。这也是我写CMyFileDialog的初终。构造函数第一个参数和CfileDialg 一样，第二个参数为TRUE时可作为目录选择 对话框， 此时第一个