美化VC界面(用户登录界面)

转自：http://www.cnblogs.com/joinclear/archive/2010/11/18/1881212.html

 源代码:下载

VC开发程序单调的界面相信大家都是深有感触，提到界面美化编程，人们都会说做界面不要用 VC写，太难了。
一句俗语：难者不会，会者不难。 VC的美化界面编程并没有人们想像的那么难。这篇文章是我写的一个用户登录界面，但界面被我美化了，我将一步一步的来讲解它的美化界面的实现步骤。相信有了这篇文章，你的 VC界面从此也能绚丽多彩。

实现步骤：

第一步：美化界面的非客户区 (重绘标题栏和界面边框 )。

// 函 数 名： DrawTitleBar

// 功能描述：绘制标题栏、边框颜色，绘制标题内容、图标和按钮

void 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;

    }

}

 

大部分实现如上代码所示具体实现请参照程序附带的源代码。

第二步：改变窗口边框为圆角。
关键代码如下：

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()中的实现。

以上代码具体实现的细节问题，你可以下载例子代码，仔细查看其源码实现 (内有详细注释 )。