源代碼:下載
VC開發程序單調的界面相信大家都是深有感觸,提到界面美化編程,人們都會說做界面不要用VC寫,太難了。
一句俗語:難者不會,會者不難。VC的美化界面編程並沒有人們想像的那麼難。這篇文章是我寫的一個用戶登錄界面,但界面被我美化了,我將一步一步的來講解它的美化界面的實現步驟。相信有了這篇文章,你的VC界面從此也能絢麗多彩。
實現步驟:
第一步:美化界面的非客戶區(重繪標題欄和界面邊框)。
關鍵代碼如下:
// 函 數 名:DrawTitleBar // 功能描述:繪制標題欄、邊框顏色,繪制標題內容、圖標和按鈕 // 輸入參數:pDC:設備指針 // 輸出參數:void // 創建日期:2006-2-20 // 修改日期:2006-2-20 // 作 者:joinclear // 附加說明:無 void CTitleBarColorDlg::DrawTitleBar(CDC *pDC) { if (m_hWnd) { CBrush Brush(RGB(187,200,143)); CBrush* pOldBrush = pDC->SelectObject(&Brush); CRect rtWnd, rtTitle, rtButtons; GetWindowRect(&rtWnd); //取得標題欄的位置 //SM_CXFRAME 窗口邊框的邊緣寬度 //SM_CYFRAME 窗口邊框的邊緣高度 //SM_CXSIZE 窗口標題欄寬度 //SM_CYSIZE 窗口標題欄高度 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); CPoint point; //填充頂部框架 point.x = rtWnd.Width(); point.y = GetSystemMetrics(SM_CYSIZE) + GetSystemMetrics(SM_CYFRAME) + 0; pDC->PatBlt(0, 0, point.x, point.y, PATCOPY); //填充左側框架 point.x = GetSystemMetrics(SM_CXFRAME) -1; point.y = rtWnd.Height()- 1; pDC->PatBlt(0, 0, point.x, point.y, PATCOPY); //填充底部框架 point.x = rtWnd.Width(); point.y = GetSystemMetrics(SM_CYFRAME); pDC->PatBlt(0, rtWnd.Height()-point.y, point.x, point.y, PATCOPY); //填充右側框架 point.x = GetSystemMetrics(SM_CXFRAME); point.y = rtWnd.Height(); pDC->PatBlt(rtWnd.Width()-point.x, 0, point.x, point.y, PATCOPY); //重畫標題欄圖標 m_rtIcon.left = rtTitle.left ; m_rtIcon.top = rtTitle.top; m_rtIcon.right = m_rtIcon.left + 16; m_rtIcon.bottom = m_rtIcon.top + 15; ::DrawIconEx(pDC->m_hDC, m_rtIcon.left, m_rtIcon.top, AfxGetApp()->LoadIcon(IDR_MAINFRAME), m_rtIcon.Width(), m_rtIcon.Height(), 0, NULL, DI_NORMAL); m_rtIcon.OffsetRect(rtWnd.TopLeft()); CBitmap* pBitmap = new CBitmap; CBitmap* pOldBitmap; CDC* pDisplayMemDC=new CDC; pDisplayMemDC->CreateCompatibleDC(pDC); //重畫關閉button rtButtons.left = rtTitle.right - 16; rtButtons.top = rtTitle.top - 1; rtButtons.right = rtButtons.left + 16; rtButtons.bottom = rtButtons.top + 15; pBitmap->LoadBitmap(IDB_EXIT_FOCUS); pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pDC->BitBlt(rtButtons.left, rtButtons.top, rtButtons.Width(), rtButtons.Height(), pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); m_rtButtExit = rtButtons; m_rtButtExit.OffsetRect(rtWnd.TopLeft()); pBitmap->DeleteObject(); //重畫最大化/恢復button rtButtons.right = rtButtons.left - 3; rtButtons.left = rtButtons.right - 16; if (IsZoomed()) pBitmap->LoadBitmap(IDB_RESTORE_NORMAL); else pBitmap->LoadBitmap(IDB_MAX_NORMAL);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pDC->BitBlt(rtButtons.left, rtButtons.top, rtButtons.Width(), rtButtons.Height(), pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); m_rtButtMax = rtButtons; m_rtButtMax.OffsetRect(rtWnd.TopLeft()); pBitmap->DeleteObject(); //重畫最小化button rtButtons.right = rtButtons.left - 3; rtButtons.left = rtButtons.right - 16; pBitmap->LoadBitmap(IDB_MIN_NORMAL); pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pDC->BitBlt(rtButtons.left, rtButtons.top, rtButtons.Width(), rtButtons.Height(), pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); m_rtButtMin = rtButtons; m_rtButtMin.OffsetRect(rtWnd.TopLeft()); pBitmap->DeleteObject(); //重畫caption int nOldMode = pDC->SetBkMode(TRANSPARENT); COLORREF clOldText=pDC->SetTextColor(RGB(255, 255, 255)); CFont m_captionFont; m_captionFont.CreateFont( 18, // 字體的高度 0, // 字體的寬度 0, // 字體顯示的角度 0, // 字體的角度 FW_BOLD, // 字體的磅數 FALSE, // 斜體字體 FALSE, // 帶下劃線的字體 0, // 帶刪除線的字體 ANSI_CHARSET, // 所需的字符集 OUT_DEFAULT_PRECIS, // 輸出的精度 CLIP_DEFAULT_PRECIS, // 裁減的精度 DEFAULT_QUALITY, // 邏輯字體與輸出設備的實際字體之間的精度 DEFAULT_PITCH | FF_SWISS, // 字體間距和字體集 _T("Arial")); // 字體名稱 CFont* pOldFont = NULL; pOldFont = pDC->SelectObject(&m_captionFont); rtTitle.left += m_rtIcon.Width ()+3; rtTitle.top = rtTitle.top; rtTitle.bottom = rtTitle.top + 30; CString m_strTitle; GetWindowText(m_strTitle); pDC->DrawText(m_strTitle, &rtTitle, DT_LEFT); pDC->SetBkMode(nOldMode); pDC->SetTextColor(clOldText); ReleaseDC(pDisplayMemDC); delete pDisplayMemDC; delete pBitmap; } }
還有在非客戶區 繪制鼠標的消息。分別為:
void CTitleBarColorDlg::OnNcLButtonDown(UINT nHitTest, CPoint point) { if (m_rtButtExit.PtInRect(point)) //關閉 SendMessage(WM_CLOSE); else if (m_rtButtMin.PtInRect(point)) //最小化 SendMessage(WM_SYSCOMMAND, SC_MINIMIZE, MAKELPARAM(point.x, point.y)); else if (m_rtButtMax.PtInRect(point)) { if (IsZoomed()) //最大化 { SendMessage(WM_SYSCOMMAND, SC_RESTORE, MAKELPARAM(point.x, point.y)); CRect rtWnd; GetWindowRect(&rtWnd); CRgn rgn; rgn.CreateRoundRectRgn(0,0,rtWnd.Width(),rtWnd.Height(),5,5); SetWindowRgn((HRGN)rgn,true); Invalidate(); } else { SendMessage(WM_SYSCOMMAND, SC_MAXIMIZE, MAKELPARAM(point.x, point.y)); CRect rtWnd; GetWindowRect(&rtWnd); CRgn rgn; rgn.CreateRoundRectRgn(0,0,rtWnd.Width(),rtWnd.Height(),5,5); SetWindowRgn((HRGN)rgn,true); Invalidate(); } } else if (!IsZoomed()) Default(); }
void CTitleBarColorDlg::OnNcMouseMove(UINT nHitTest, CPoint point) { CWindowDC dc(this); CWindowDC* pDC = &dc; CDC* pDisplayMemDC=new CDC; pDisplayMemDC->CreateCompatibleDC(pDC); CBitmap* pBitmap = new CBitmap; CBitmap* pOldBitmap; CRect rtWnd, rtButton; if (pDC) { GetWindowRect(&rtWnd); //關閉button if (m_rtButtExit.PtInRect(point)) pBitmap->LoadBitmap(IDB_EXIT_NORMAL); else pBitmap->LoadBitmap(IDB_EXIT_FOCUS); rtButton = m_rtButtExit; rtButton.OffsetRect(-rtWnd.left, -rtWnd.top); pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pDC->BitBlt(rtButton.left, rtButton.top, rtButton.Width(), rtButton.Height(), pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); pBitmap->DeleteObject(); //最大化/恢復button if (m_rtButtMax.PtInRect(point)) { if (IsZoomed()) pBitmap->LoadBitmap(IDB_RESTORE_FOCUS); else pBitmap->LoadBitmap(IDB_MAX_FOCUS); } else { if (IsZoomed()) pBitmap->LoadBitmap(IDB_RESTORE_NORMAL); else pBitmap->LoadBitmap(IDB_MAX_NORMAL); } rtButton = m_rtButtMax; rtButton.OffsetRect(-rtWnd.left, -rtWnd.top); pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pDC->BitBlt(rtButton.left, rtButton.top, rtButton.Width(), rtButton.Height(), pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); pBitmap->DeleteObject(); //最小化button if (m_rtButtMin.PtInRect(point)) pBitmap->LoadBitmap(IDB_MIN_FOCUS); else pBitmap->LoadBitmap(IDB_MIN_NORMAL); rtButton = m_rtButtMin; rtButton.OffsetRect(-rtWnd.left, -rtWnd.top); pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pDC->BitBlt(rtButton.left, rtButton.top, rtButton.Width(), rtButton.Height(), pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); pBitmap->DeleteObject(); } pDisplayMemDC->DeleteDC(); delete pDisplayMemDC; delete pBitmap; CDialog::OnNcMouseMove(nHitTest, point); }
大部分實現如上代碼所示具體實現請參照程序附帶的源代碼。
第二步:改變窗口邊框為圓角。
關鍵代碼如下:
int CTitleBarColorDlg::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CDialog::OnCreate(lpCreateStruct) == -1) return -1; CRect rtWnd; GetWindowRect(&rtWnd); CRgn rgn; rgn.CreateRoundRectRgn(0,0,rtWnd.Width(),rtWnd.Height(),5,5); SetWindowRgn((HRGN)rgn,true); return 0; }
第三步:填充背景。
關鍵代碼如下:
BOOL CTitleBarColorDlg::OnEraseBkgnd(CDC* pDC) { BOOL retValue= CDialog::OnEraseBkgnd(pDC); CRect rc; GetClientRect(&rc); pDC->FillSolidRect(&rc,RGB(236,233,216)); return retValue; }
第四步:繪制按鈕。
具體請參考源代碼中類CXPButton.h、CXPButton.cpp
第五步:繪制編輯框。
具體請參考源代碼中類COwnerEdit.h、COwnerEdit.cpp
第六步:繪制靜態字體和顏色。
這一步本來也寫了一個類的,但想想用OnCtlColor()還是能很好的實現的,就沒寫。具體實現請看OnCtlColor()中的實現。
以上代碼具體實現的細節問題,你可以下載例子代碼,仔細查看其源碼實現(內有詳細注釋)。