用MFC做漂亮界面之登录界面

前段时间由于工作原因，一直没有更新博客，今天，继续讲解如何用MFC做漂亮界面，前几次我们讲了如何美化窗口背景，如何美化标题，如何美化按钮，今天我们用以前学过的知识来一起做一个登录界面，这个登录界面的效果图如下：

分析

当我们看到这个界面的时候，先不要忙着去做，先要分析一下哪些是代码做的，哪些不是代码做的，这样就可以减少工作量。大家试试看，分析一下哪些是留在背景上的，不需要我们去做？没错，一共有5个部分是留在背景上的，分别如下：

第一个是老虎，这个不用多说。

第二个是账号，因为这个是美术字，加了特效，代码没法实现。

第三个是密码，同上。

第四个是账号输入框，因为这个框的边框加了特效，所以要留下。

第五个是密码输入框，同上。

美化窗口背景

创建一个对话框项目，命名为LoginTigger，去掉取消按钮和确定按钮，并且修改对话框的Border为None，然后在函数OnInitDialog中修改窗口尺寸为背景图片尺寸。具体如下：

BOOL CLoginTiggerDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标

	// TODO:  在此添加额外的初始化代码

	//这个是我们自己加的
	MoveWindow(0, 0, 300, 400);

	return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
}

然后，编译代码，效果如下：

下面我们显示背景图片到窗口中，就完成了美化背景，首先在我们的对话框的头文件中增加一个CBrush变量，变量名是m_bkBrush，它代表我们的背景图片，在OnInitDialog中加载背景图片Tigger.png，具体如下：

BOOL CLoginTiggerDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标

	// TODO:  在此添加额外的初始化代码

	//这个是我们自己加的
	MoveWindow(0, 0, 300, 400);

	//加载背景图片

	CString strBmpPath = _T(".\\res\\Tigger.png");

	CImage img;

	img.Load(strBmpPath);

	CBitmap bmpTmp;

	bmpTmp.Attach(img.Detach());

	m_bkBrush.CreatePatternBrush(&bmpTmp);

	return TRUE;
}

然后添加WM_CTLCOLOR响应函数，不懂得可以翻阅一下前面的文章，具体如下：

HBRUSH CLoginTiggerDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor)
{
	HBRUSH hbr = CDialogEx::OnCtlColor(pDC, pWnd, nCtlColor);

	// TODO:  在此更改 DC 的任何特性

	// TODO:  如果默认的不是所需画笔，则返回另一个画笔

	if (pWnd == this)
	{
		return m_bkBrush;
	}

	return hbr;
}

编译，运行效果如下：

至此，美化背景完成，是不是很简单。

添加标题

我们首先创建一个CCaption类，继承自CStatic，然后添加成员函数HBRUSH CtlColor(CDC* pDC, UINT nCtlColor)，不懂得可以翻阅前面的文章，具体如下：

HBRUSH CCaption::CtlColor(CDC* pDC, UINT /*nCtlColor*/)
{
	CFont font;
	LOGFONT lf;
	if (!pDC)
		return NULL;
	//创建一个空画刷，返回这个画刷可以让静态控件的背景透明  
	HBRUSH hr = (HBRUSH)GetStockObject(NULL_BRUSH);
	//让文字的背景透明  	
	pDC->SetBkMode(TRANSPARENT);
	//设置文字的颜色为白色  
	pDC->SetTextColor(RGB(255, 255, 255));
	::ZeroMemory(&lf, sizeof(lf));
	//设置逻辑字体的高度
	lf.lfHeight = 24;
	//设置逻辑字体为粗体字  
	lf.lfWeight = FW_BOLD;
	//设置字体为宋体  
	::lstrcpy(lf.lfFaceName, _T("宋体"));
	//用逻辑字体创建一个CFont对象  
	font.CreateFontIndirect(&lf);
	//应用字体  
	pDC->SelectObject(&font);
	return hr;
}

然后再添加一个成员函数，控制这个标题的显示位置和范围，具体如下：

void CCaption::Init(int nX, int nY, int nW, int nH)
{
	MoveWindow(nX, nY, nW, nH);
}

然后，在对话框上添加一个静态控件，ID为IDC_STATIC_CAPTION，并且为它定义一个控件变量，命名为m_staticCap，再然后，修改它的类型为CCaption，并在OnInitDialog中设置标题的位置和范围，具体代码如下：

BOOL CLoginTiggerDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标

	// TODO:  在此添加额外的初始化代码

	//这个是我们自己加的
	MoveWindow(0, 0, 300, 400);

	//加载背景图片

	CString strBmpPath = _T(".\\res\\Tigger.png");

	CImage img;

	img.Load(strBmpPath);

	CBitmap bmpTmp;

	bmpTmp.Attach(img.Detach());

	m_bkBrush.CreatePatternBrush(&bmpTmp);

	//调整标题位置

	m_staticCap.Init(4, 8,105, 30);

	return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
}

编译程序，显示效果如下：

根据前面的学习，相信肯定有同学会说，还没有加窗口移动，对，别着急，现在就加，具体代码如下：

LRESULT CLoginTiggerDlg::OnNcHitTest(CPoint point)
{
	// TODO:  在此添加消息处理程序代码和/或调用默认值
	LRESULT ret = CDialogEx::OnNcHitTest(point);
	return (ret == HTCLIENT) ? HTCAPTION : ret;
}

不懂得，可以看一下前面的文章，这里就不做过多介绍了。

添加关闭按钮

关闭按钮一共有三张图片分别对应正常，按下，悬浮（鼠标移动在上面的时候），具体如下：

首先我们需要为对话框添加一个关闭按钮的控件，命名为IDC_BUTTON_CLOSE，然后设置为Owner Draw，并添加一个控件变量，命名为m_btnClose，然后定义一个美化的按钮类，继承自CButton，命名为CMyButton，具体代码如下：

MyButton.h内容如下：

#pragma once

// CMyButton

class CMyButton : public CButton
{
	DECLARE_DYNAMIC(CMyButton)

public:
	CMyButton();
	virtual ~CMyButton();

protected:
	//正常状态图像路径
	CString m_strNormalImgPath;
	//按下状态图像路径
	CString m_strPressImgPath;
	//悬浮状态图像路径
	CString m_strFloatImgPath;

	//正常状态图像
	CImage m_imgNormal;
	//按下状态图像
	CImage m_imgPress;
	//悬浮状态图像
	CImage m_imgFloat;

	//窗口背景图片
	CImage m_BkImg;

public:

	//设置按钮图片路径
	void SetImagePath(CString strNoramlImgPath, CString strPressImgPath, CString strFloatImgPath);
	//初始化按钮，主要是调整按钮的位置，处理透明色  
	bool InitMyButton(int nX/*左上角X坐标*/, int nY/*左上角Y坐标*/, int nW/*图像宽*/, int nH/*图像高*/, bool bIsPng/*是否是PNG图片*/);
	//自绘制函数  
	void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct);

	//初始化窗口背景
	void SetBkImg(CString strBkImg);

protected:
	//光标是否在窗口内
	BOOL m_bIsInWnd;
	DECLARE_MESSAGE_MAP()
public:
	afx_msg void OnMouseMove(UINT nFlags, CPoint point);
	afx_msg void OnMouseHover(UINT nFlags, CPoint point);
	afx_msg void OnMouseLeave();

	
};

MyButton.cpp内容如下：

// MyButton.cpp : 实现文件
//

#include "stdafx.h"
#include "LoginTigger.h"
#include "MyButton.h"


// CMyButton

IMPLEMENT_DYNAMIC(CMyButton, CButton)

CMyButton::CMyButton()
{
	m_bIsInWnd = FALSE;
}

CMyButton::~CMyButton()
{
}


BEGIN_MESSAGE_MAP(CMyButton, CButton)
	ON_WM_MOUSEMOVE()
	ON_WM_MOUSEHOVER()
	ON_WM_MOUSELEAVE()
END_MESSAGE_MAP()



// CMyButton 消息处理程序

//设置按钮图片路径
void CMyButton::SetImagePath(CString strNoramlImgPath, CString strPressImgPath, CString strFloatImgPath)
{
	m_strNormalImgPath = strNoramlImgPath;
	m_strPressImgPath = strPressImgPath;
	m_strFloatImgPath = strFloatImgPath;
}

void CMyButton::SetBkImg(CString strBkImg)
{
	if (strBkImg.IsEmpty())
		return;
	m_BkImg.Load(strBkImg);
}

//初始化按钮，主要是调整按钮的位置，处理透明色  
bool CMyButton::InitMyButton(int nX/*左上角X坐标*/, int nY/*左上角Y坐标*/, int nW/*图像宽*/, int nH/*图像高*/, bool bIsPng/*是否是PNG图片*/)
{
	HRESULT hr = 0;

	if (m_strNormalImgPath.IsEmpty())
		return false;
	if (m_strPressImgPath.IsEmpty())
		return false;
	if (m_strFloatImgPath.IsEmpty())
		return false;

	hr = m_imgNormal.Load(m_strNormalImgPath);

	int a = GetLastError();

	if (FAILED(hr))
		return false;

	hr = m_imgPress.Load(m_strPressImgPath);

	if (FAILED(hr))
		return false;

	hr = m_imgFloat.Load(m_strFloatImgPath);

	if (FAILED(hr))
		return false;

	if (bIsPng)
	{
		if (m_imgNormal.GetBPP() == 32)
		{
			int i = 0;
			int j = 0;
			for (i = 0; i < m_imgNormal.GetWidth(); i++)
			{
				for (j = 0; j < m_imgNormal.GetHeight(); j++)
				{
					byte * pbyte = (byte *)m_imgNormal.GetPixelAddress(i, j);
					pbyte[0] = pbyte[0] * pbyte[3] / 255;
					pbyte[1] = pbyte[1] * pbyte[3] / 255;
					pbyte[2] = pbyte[2] * pbyte[3] / 255;
				}
			}
		}

		if (m_imgPress.GetBPP() == 32)
		{
			int i = 0;
			int j = 0;
			for (i = 0; i < m_imgPress.GetWidth(); i++)
			{
				for (j = 0; j < m_imgPress.GetHeight(); j++)
				{
					byte * pbyte = (byte *)m_imgPress.GetPixelAddress(i, j);
					pbyte[0] = pbyte[0] * pbyte[3] / 255;
					pbyte[1] = pbyte[1] * pbyte[3] / 255;
					pbyte[2] = pbyte[2] * pbyte[3] / 255;
				}
			}
		}

		if (m_imgFloat.GetBPP() == 32)
		{
			int i = 0;
			int j = 0;
			for (i = 0; i < m_imgFloat.GetWidth(); i++)
			{
				for (j = 0; j < m_imgFloat.GetHeight(); j++)
				{
					byte * pbyte = (byte *)m_imgFloat.GetPixelAddress(i, j);
					pbyte[0] = pbyte[0] * pbyte[3] / 255;
					pbyte[1] = pbyte[1] * pbyte[3] / 255;
					pbyte[2] = pbyte[2] * pbyte[3] / 255;
				}
			}
		}
	}

	MoveWindow(nX, nY, nW, nH);

	return true;

}
//自绘制函数  
void CMyButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
	if (!lpDrawItemStruct)
		return;
	HDC hMemDC;
	HBITMAP bmpMem;
	HGDIOBJ hOldObj;
	bmpMem = CreateCompatibleBitmap(lpDrawItemStruct->hDC, lpDrawItemStruct->rcItem.right - lpDrawItemStruct->rcItem.left, lpDrawItemStruct->rcItem.bottom - lpDrawItemStruct->rcItem.top);
	if (!bmpMem)
		return;
	hMemDC = CreateCompatibleDC(lpDrawItemStruct->hDC);
	if (!hMemDC)
	{
		if (bmpMem)
		{
			::DeleteObject(bmpMem);
			bmpMem = NULL;
		}
		return;
	}

	hOldObj = ::SelectObject(hMemDC, bmpMem);

	int nW = lpDrawItemStruct->rcItem.right - lpDrawItemStruct->rcItem.left;

	int nH = lpDrawItemStruct->rcItem.bottom - lpDrawItemStruct->rcItem.top;

	RECT rectTmp = { 0 };

	rectTmp = lpDrawItemStruct->rcItem;

	MapWindowPoints(GetParent(), &rectTmp);

	if (m_BkImg.IsNull() == false)
		m_BkImg.Draw(hMemDC, 0, 0, rectTmp.right - rectTmp.left, rectTmp.bottom - rectTmp.top, rectTmp.left, rectTmp.top, rectTmp.right - rectTmp.left, rectTmp.bottom - rectTmp.top);
	
	if (lpDrawItemStruct->itemState & ODS_SELECTED)
	{
		//按钮被选择  
		m_imgPress.AlphaBlend(hMemDC, 0, 0, nW, nH, 0, 0, nW, nH);
	}
	else
	{
		//默认状态  
		m_imgNormal.AlphaBlend(hMemDC, 0, 0, nW, nH, 0, 0, nW, nH);

	}

	::BitBlt(lpDrawItemStruct->hDC, 0, 0, nW, nH, hMemDC,0,0,SRCCOPY);

	SelectObject(hMemDC, hOldObj);

	if (bmpMem)
	{
		::DeleteObject(bmpMem);
		bmpMem = NULL;
	}

	if (hMemDC)
	{
		::DeleteDC(hMemDC);
		hMemDC = NULL;
	}
	return;
}

void CMyButton::OnMouseMove(UINT nFlags, CPoint point)
{
	// TODO:  在此添加消息处理程序代码和/或调用默认值

	CButton::OnMouseMove(nFlags, point);
	if (!m_bIsInWnd)
	{
		TRACKMOUSEEVENT       tme;
		tme.cbSize = sizeof(TRACKMOUSEEVENT);
		tme.dwFlags = TME_HOVER | TME_LEAVE;
		tme.dwHoverTime = 10;
		tme.hwndTrack = m_hWnd;
		_TrackMouseEvent(&tme);
		m_bIsInWnd = TRUE;
	}
}


void CMyButton::OnMouseHover(UINT nFlags, CPoint point)
{
	// TODO:  在此添加消息处理程序代码和/或调用默认值

	HDC hMemDC;
	HBITMAP bmpMem;
	HGDIOBJ hOldObj;
	HDC hDC = ::GetDC(GetSafeHwnd());
	CRect rcItem;
	GetClientRect(&rcItem);

	if (hDC)
	{
		bmpMem = CreateCompatibleBitmap(hDC, rcItem.Width(), rcItem.Height());
		if (!bmpMem)
		{
			::ReleaseDC(GetSafeHwnd(), hDC);
			return;
		}
		hMemDC = CreateCompatibleDC(hDC);
		if (!hMemDC)
		{
			if (bmpMem)
			{
				::DeleteObject(bmpMem);
				bmpMem = NULL;
			}
			::ReleaseDC(GetSafeHwnd(), hDC);
			return;
		}

		hOldObj = ::SelectObject(hMemDC, bmpMem);

		RECT rectTmp = { 0 };

		rectTmp = rcItem;

		MapWindowPoints(GetParent(), &rectTmp);

		if (m_BkImg.IsNull() == false)
			m_BkImg.Draw(hMemDC, 0, 0, rectTmp.right - rectTmp.left, rectTmp.bottom - rectTmp.top, rectTmp.left, rectTmp.top, rectTmp.right - rectTmp.left, rectTmp.bottom - rectTmp.top);

		int nW = rcItem.right - rcItem.left;

		int nH = rcItem.bottom - rcItem.top;

		m_imgFloat.AlphaBlend(hMemDC, 0, 0, nW, nH, 0, 0,nW,nH);

		::BitBlt(hDC, 0, 0, nW, nH, hMemDC, 0, 0, SRCCOPY);

		SelectObject(hMemDC, hOldObj);

		if (bmpMem)
		{
			::DeleteObject(bmpMem);
			bmpMem = NULL;
		}

		if (hMemDC)
		{
			::DeleteDC(hMemDC);
			hMemDC = NULL;
		}

		::ReleaseDC(GetSafeHwnd(), hDC);
	}

	CButton::OnMouseHover(nFlags, point);
}


void CMyButton::OnMouseLeave()
{
	// TODO:  在此添加消息处理程序代码和/或调用默认值

	CButton::OnMouseLeave();
	InvalidateRect(NULL);
	m_bIsInWnd = FALSE;
}

不懂的同学可以看一下前面的文章，编译程序，运行效果如下：

上面的图片显示了关闭按钮的三种状态效果，即正常，悬浮，按下。

添加账号和密码输入框

首先添加一个编辑框，命名为IDC_EDIT_NAME，设置边框属性为False，为它添加一个控件变量，命名为m_editName，然后为它设置一个字体需求，宋体，24点，具体代码如下：

BOOL CLoginTiggerDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标

	// TODO:  在此添加额外的初始化代码

	//这个是我们自己加的
	MoveWindow(0, 0, 300, 400);

	//加载背景图片

	CString strBmpPath = _T(".\\res\\Tigger.png");

	CImage img;

	img.Load(strBmpPath);

	CBitmap bmpTmp;

	bmpTmp.Attach(img.Detach());

	m_bkBrush.CreatePatternBrush(&bmpTmp);

	//调整标题位置

	m_staticCap.Init(4, 8,105, 30);

	//关闭按钮设置

	m_btnClose.SetImagePath(_T("./res/TigerCloseNormal.png"), _T("./res/TigerClosePress.png"), _T("./res/TigerCloseFloat.png"));
	
	m_btnClose.InitMyButton(271, 8, 20, 20, true);

	//调整光标的位置适中

	m_editName.MoveWindow(82, 261 + 4, 200, 31 - 4);

	CFont*  pFont = m_editName.GetFont();

	LOGFONT  lf;

	if (pFont)
	{
		pFont->GetLogFont(&lf);

		lf.lfHeight = 24;//改变字体高度    

		_tcscpy(lf.lfFaceName, _T("宋体"));//改变字体名称    

		m_fontEdit.CreateFontIndirect(&lf);

		m_editName.SetFont(&m_fontEdit);
	}

	return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
}

然后修改控件字体的颜色，具体代码如下：

HBRUSH CLoginTiggerDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor)
{
	HBRUSH hbr = CDialogEx::OnCtlColor(pDC, pWnd, nCtlColor);

	// TODO:  在此更改 DC 的任何特性

	if (pWnd == this)
	{
		return m_bkBrush;
	}

	// TODO:  如果默认的不是所需画笔，则返回另一个画笔

	//输入账号
	if (pWnd == &m_editName)
	{
		CFont font;
		LOGFONT lf;
		if (!pDC)
			return NULL;

		//创建一个空画刷，返回这个画刷可以让静态控件的背景透明  
		HBRUSH hr = (HBRUSH)GetStockObject(NULL_BRUSH);
		//让文字的背景透明  	
		pDC->SetBkMode(TRANSPARENT);
		//设置文字的颜色为白色  
		pDC->SetTextColor(RGB(200, 200, 200));
	}

	return hbr;
}

编译程序，运行效果如下：

密码输入框的制作与账号输入框相同，唯一不同的地方就是设置Password属性为真，密码输入框的ID为IDC_EDIT_PWD，为其添加一个控件变量m_editPwd，然后调整它的位置，并设置字体，具体代码如下：

BOOL CLoginTiggerDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标

	// TODO:  在此添加额外的初始化代码

	//这个是我们自己加的
	MoveWindow(0, 0, 300, 400);

	//加载背景图片

	CString strBmpPath = _T(".\\res\\Tigger.png");

	CImage img;

	img.Load(strBmpPath);

	CBitmap bmpTmp;

	bmpTmp.Attach(img.Detach());

	m_bkBrush.CreatePatternBrush(&bmpTmp);

	//调整标题位置

	m_staticCap.Init(4, 8,105, 30);

	//关闭按钮设置

	m_btnClose.SetImagePath(_T("./res/TigerCloseNormal.png"), _T("./res/TigerClosePress.png"), _T("./res/TigerCloseFloat.png"));
	
	m_btnClose.InitMyButton(271, 8, 20, 20, true);

	//账号输入框

	//调整光标的位置适中

	m_editName.MoveWindow(82, 261 + 4, 200, 31 - 4);

	CFont*  pFont = m_editName.GetFont();

	LOGFONT  lf;

	if (pFont)
	{
		pFont->GetLogFont(&lf);

		lf.lfHeight = 24;//改变字体高度    

		_tcscpy(lf.lfFaceName, _T("宋体"));//改变字体名称    

		m_fontEdit.CreateFontIndirect(&lf);

		m_editName.SetFont(&m_fontEdit);
	}

	//密码输入框

	m_editPwd.MoveWindow(82, 308, 200, 25);

	m_editPwd.SetFont(&m_fontEdit);

	return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
}

为其设置字体颜色，具体代码与账号输入框一样，具体代码如下：

HBRUSH CLoginTiggerDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor)
{
	HBRUSH hbr = CDialogEx::OnCtlColor(pDC, pWnd, nCtlColor);

	// TODO:  在此更改 DC 的任何特性

	if (pWnd == this)
	{
		return m_bkBrush;
	}

	// TODO:  如果默认的不是所需画笔，则返回另一个画笔

	//输入账号
	if (pWnd == &m_editName)
	{
		CFont font;
		LOGFONT lf;
		if (!pDC)
			return NULL;

		//创建一个空画刷，返回这个画刷可以让静态控件的背景透明  
		HBRUSH hr = (HBRUSH)GetStockObject(NULL_BRUSH);
		//让文字的背景透明  	
		pDC->SetBkMode(TRANSPARENT);
		//设置文字的颜色为白色  
		pDC->SetTextColor(RGB(200, 200, 200));
	}

	//输入密码
	if (pWnd == &m_editPwd)
	{
		CFont font;
		LOGFONT lf;
		if (!pDC)
			return NULL;

		//创建一个空画刷，返回这个画刷可以让静态控件的背景透明  
		HBRUSH hr = (HBRUSH)GetStockObject(NULL_BRUSH);
		//让文字的背景透明  	
		pDC->SetBkMode(TRANSPARENT);
		//设置文字的颜色为白色  
		pDC->SetTextColor(RGB(200, 200, 200));
	}

	return hbr;
}

编译程序，运行效果如下：

添加登录和注册按钮

登录按钮和注册按钮与关闭按钮的代码一样，所以我们只需要使用CMyButton类就可以，唯一需要调整的就是它们的图片不一样，所以这里我们只说说不同的地方，首先添加两个按钮控件，ID分别为IDC_BUTTON_LOGIN和IDC_BUTTON_REG，分别为它们添加两个控件变量m_btnLogin和m_btnReg，然后修改它们的控件类型为CMyButton，最后在OnInitDialog中初始化它们的位置和图片，具体代码如下：

BOOL CLoginTiggerDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标

	// TODO:  在此添加额外的初始化代码

	//这个是我们自己加的
	MoveWindow(0, 0, 300, 400);

	//加载背景图片

	CString strBmpPath = _T(".\\res\\Tigger.png");

	CImage img;

	img.Load(strBmpPath);

	CBitmap bmpTmp;

	bmpTmp.Attach(img.Detach());

	m_bkBrush.CreatePatternBrush(&bmpTmp);

	//调整标题位置

	m_staticCap.Init(4, 8,105, 30);

	//关闭按钮设置

	m_btnClose.SetImagePath(_T("./res/TigerCloseNormal.png"), _T("./res/TigerClosePress.png"), _T("./res/TigerCloseFloat.png"));
	
	m_btnClose.InitMyButton(271, 8, 20, 20, true);

	//登录和注册按钮设置

	m_btnLogin.SetImagePath(_T("./res/tigerLoginNormal.png"), _T("./res/tigerLoginPress.png"), _T("./res/TigerLoginFloat.png"));

	m_btnLogin.InitMyButton(23, 355, 115, 35, true);

	m_btnReg.SetImagePath(_T("./res/tigerRegisterNormal.png"), _T("./res/tigerRegisterPress.png"), _T("./res/TigerRegisterFloat.png"));

	m_btnReg.InitMyButton(167, 355, 115, 35,true);

	m_btnLogin.SetBkImg(strBmpPath);

	m_btnReg.SetBkImg(strBmpPath);

	//账号输入框

	//调整光标的位置适中

	m_editName.MoveWindow(82, 261 + 4, 200, 31 - 4);

	CFont*  pFont = m_editName.GetFont();

	LOGFONT  lf;

	if (pFont)
	{
		pFont->GetLogFont(&lf);

		lf.lfHeight = 24;//改变字体高度    

		_tcscpy(lf.lfFaceName, _T("宋体"));//改变字体名称    

		m_fontEdit.CreateFontIndirect(&lf);

		m_editName.SetFont(&m_fontEdit);
	}

	//密码输入框

	m_editPwd.MoveWindow(82, 308, 200, 25);

	m_editPwd.SetFont(&m_fontEdit);	

	return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
}

编译程序，运行效果如下：

至此我们的登录界面就做完了，有不懂得地方可以翻阅一下前面的文章，需要下载源码的同学，可以从下面的地址下载：

http://download.csdn.net/download/u011711997/10261765