美化VC界面(用户登录界面)
美化VC界面(用户登录界面)
源代码:下载
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()中的实现。
以上代码具体实现的细节问题，你可以下载例子代码，仔细查看其源码实现(内有详细注释)。