讓你的軟件界面更漂亮(1)

我們使用過很多的軟件， 給我們留下印象很深的是那些界面漂亮且迷人的軟件， 國外的軟件象QuickTime,國產的象金山詞霸等，它們的軟件界面設計風格都有獨特之處。本人跟據自已的經驗和大家探討一下軟件的漂亮界面實現的原理並提供DEMO程序。本人經驗不多，經常從VCKBASE.COM吸取知識，共同學習，如有不足之處，請指正！也歡迎和我聯系。下面就開始吧！

一、漂亮界面實現的原理

用圖象元素自繪窗口標題樣欄，邊框，系統按鈕（最大化、最小化、關閉按鈕）還有按窗口中的控件。圖象當然是美工畫的，但要你教美工怎麼去畫，是不是不能理解? ，呆會我會告訴你你如何去教美工畫.請先仔細看下圖。

明白了吧，被紅線包括的部分都是要畫的圖象。畫得好不好會直接影響你的軟件界面。

二、原理說玩了，來說一下實現的基本知識

1、VC軟件繪圖技術：

CBitmap* 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、坐標的概念：點、窗口坐標和屏幕坐標及轉換，很重要！如不清楚請先復習相關知識。

下圖是我寫在一個界面，就是基於上述原理實現的：

下面介紹軟件如何實現的：

①、重載對話框的消息函數：

void OnNcLButtonDown(UINT nHitTest, CPoint point);

//單擊標題欄時是響應

void OnNcMouseMove(UINT nHitTest, CPoint point);

//Mous 在標題移動時響應

LRESULT DefWindowProc(UINT message, WPARAM wParam, LPARAM lParam)

②、添加關鍵成員函數為：BOOL DrawTitleBar(CDC *pDC)

③、添加完消息涵數後，在.cpp中實現它們的代碼：

void 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("關閉");
　　　　}
　　　　else
　　　　{
　　　　　　if(m_rtButtMin.PtInRect(point))
　　　　　　{
　　　　　　　　pBitmap->LoadBitmap(IDB_MIN_FOCUS);
　　　　　　　　StrTemp = _T("最小化窗口");
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　if(m_rtButtMax.PtInRect(point))
　　　　　　　　{
　　　　　　　　　　pBitmap->LoadBitmap(IDB_MAX_FOCUS);
　　　　　　　　　　if(IsZoomed())
　　　　　　　　　　{
　　　　　　　　　　　　StrTemp = _T("還原窗口");
　　　　　　　　　　}
　　　　　　　　　　else
　　　　　　　　　　{
　　　　　　　　　　　　StrTemp = _T("最化大窗口");
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　pBitmap->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);
　　　　
　　　　//計算最小化按鈕的位置，位圖大小為15X15
　　　　rtButtons.left = rtTitle.right-60;
　　　　rtButtons.top= rtTitle.top+2;
　　　　rtButtons.right = rtTitle.right-42;
　　　　rtButtons.bottom = rtTitle.top+20;
　　　　m_rtButtMin = rtButtons;
　　　　//計算最大化按鈕的位置，位圖大小為15X15
　　　　m_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);
　　　　
　　　　//重畫Caption
　　　　POINT　DrawPonit;
　　　　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.x<= m_rtButtMin.left-66)
　　　　{
　　　　　　pDC->BitBlt(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();
　　　　
　　　　
　　　　
　　　　//重畫最小化button
　　　　rtButtons = 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, // nHeight
　　　　　　8, // nWidth
　　　　　　0, // nEscapement文本行逆時針旋轉角度
　　　　　　0, // nOrientation字體角度
　　　　　　FW_BOLD, // nWeight字體粗細程度
　　　　　　FALSE, // bItalic
　　　　　　FALSE, // bUnderline
　　　　　　0, // cStrikeOut 刪除線
　　　　　　ANSI_CHARSET, // nCharSet
　　　　　　OUT_DEFAULT_PRECIS, // nOutPrecision
　　　　　　CLIP_DEFAULT_PRECIS, // nClipPrecision
　　　　　　DEFAULT_QUALITY, // nQuality
　　　　　　DEFAULT_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);　　
　　　　}
　　　　else
　　　　{　
　　　　　　m_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;i<=rtWnd.bottom;i=i+BmpInfo.bmHeight-3)
　　　　{
　　　　　　pDC->BitBlt(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;i<=rtWnd.bottom+27;i=i+BmpInfo.bmHeight-3)
　　　　{
　　　　　　pDC->BitBlt(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; i<=rtWnd.right; i=i+2)
　　　　{
　　　　　　GetClientRect(&rtWnd);
　　　　　　pDC->BitBlt(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:[email protected]");
　　else
　　{
　　　　if (m_rtButtHelp.PtInRect(point))
　　　　{
　　　　　　SendMessage(WM_HELP);
　　　　}
　　　　else
　　　　{
　　　　　　if (m_rtButtExit.PtInRect(point))
　　　　　　{
　　　　　　　　SendMessage(WM_CLOSE);
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　if (m_rtButtMin.PtInRect(point))
　　　　　　　　{
　　　　　　　　　　m_ShowTitle = FALSE;
　　　　　　　　　　SendMessage(WM_SYSCOMMAND,
　　　　　　　　　　　　SC_MINIMIZE,
　　　　　　　　　　　　MAKELPARAM(point.x, point.y));
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　if (m_rtButtMax.PtInRect(point))
　　　　　　　　　　{
　　　　　　　　　　　　m_ShowTitle = TRUE;
　　　　　　　　　　　　if (IsZoomed())
　　　　　　　　　　　　　　SendMessage(WM_SYSCOMMAND,
　　　　　　　　　　　　　　SC_RESTORE,
　　　　　　　　　　　　　　MAKELPARAM(point.x, point.y));
　　　　　　　　　　　　else
　　　　　　　　　　　　{
　　　　　　　　　　　　　　SendMessage(WM_SYSCOMMAND,
　　　　　　　　　　　　　　SC_MAXIMIZE,
　　　　　　　　　　　　　　MAKELPARAM(point.x, point.y));
　　　　　　　　　　　　　　Invalidate();
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　　　else
　　　　　　　　　　{
　　　　　　　　　　　　if (!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環境下完成的。

經過實踐證明，僅僅畫一個窗口很容易，多窗口程序軟件實現統一風格很難。如若有機會的話，我會和大家繼續探討如何將設計好的漂亮窗口子類化，讓程序所有的窗口有統一風格，美化窗口的其它控件並可自動隨窗口改變而調整大小。我想那才是我們大家關心的。對不？

本人的聯系QQ：34544052 Email:[email protected]