用MFC做漂亮介面之登入介面

阿新 • • 發佈：2019-01-24

前段時間由於工作原因，一直沒有更新部落格，今天，繼續講解如何用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

用MFC做漂亮介面之登入介面

分析

美化視窗背景

新增標題

新增關閉按鈕

新增賬號和密碼輸入框

新增登入和註冊按鈕

用MFC做漂亮介面之登入介面

安卓實戰之登入介面設計

Android學習筆記（第一行程式碼）做一個簡單的登入介面

web-前端之登入介面

簡單學生選課系統之登入介面

用QT做一個簡單的答題介面

圖書管理系統之登入介面實現

用gensim做LDA實踐之文字分類

用Python做數學計算之基礎計算

用Python做資料分析之Numpy（二）

用Electron做一個網頁自動登入工具（如Alipay）

教程:Ubuntu無法進入登入介面或登入介面異常的一個解決辦法

Lock介面之Condition介面

Flutter之擼一個漂亮的登入介面的總結

用bootstrap做一個背景可輪轉的登入介面

通過Python利用ADSL伺服器和tinyproxy構建資料自己的動態代理IP池,用django+redis做web服務,提供IP介面

登入介面之Axure原型製作

怎樣用JMeter做介面測試？

MFC 實現在主程式視窗之前彈出使用者登入介面

用HTML5做一個個人網站，此文僅展示個人主頁介面。內附原始碼下載地址

用MFC做漂亮介面之登入介面

分析

美化視窗背景

新增標題

新增關閉按鈕

新增賬號和密碼輸入框

新增登入和註冊按鈕

相關推薦