MFC——分頁功能

項目介紹

1. 程序主頁：
   🔸展示註冊的用戶信息；
   🔸點擊註冊按鈕，會出現一個新的註冊的界面；
   🔸點擊退出按鈕，此界面消失；
   

2. 註冊界面：
   
   
   

一、創建項目

創建一個基於MFC對話框的項目，項目名稱爲PagingProject。

📢📢📢注意：
用漢字給項目命名存在安全隱患，設置不當的話，容易引起漢字亂碼。所以最好不要使用漢字命名。

直接點擊完成即可。

運行程序：
下面的界面是程序生成的一個默認主界面。

二、添加3個分頁對話框資源

創建一個註冊對話框，作爲3個分頁的父對話框：

界面標題（Caption）	ID
用戶註冊	IDD_REG

創建三個分頁，分頁對話框的ID，border及Style如下：

分頁	ID	Border	Style	功能
分頁1	IDD_PAGE1	None	Child	填寫用戶的賬號、暱稱和性別
分頁2	IDD_PAGE2	None	Child	填寫用戶的生日、血型
分頁3	IDD_PAGE3	None	Child	填寫用戶的郵箱和電話

1. 創建註冊對話框

右鍵資源視圖下的Dialog，點擊插入Dialog

修改屬性ID：IDD_REG，Caption：用戶註冊。

2. 創建三個分頁

2.1 第一個分頁

插入一個dialog資源。


右鍵屬性，修改ID標識爲：IDD_PAGE1

修改其Border屬性爲：None

修改對話框的Style屬性爲：child

2.2 第二個分頁

複製IDD_PAGE1對話框，並右鍵點擊資源視圖的Dialog，選擇粘貼按鍵。

2.3 第三個分頁

複製IDD_PAGE1對話框，並右鍵點擊資源視圖的Dialog，選擇粘貼按鍵。

操作步驟同上。

最終：

三、定製對話框界面內容

1. 默認生成的父對話框內容定製

頁面兩個button按鈕：

Caption	ID	功能
註冊	IDC_ADD	點擊註冊按鈕，進入註冊界面
退出	IDCANCEL	點擊退出按鈕，關閉頁面，退出程序

添加一個List Control控件：

View	ID	功能
Report	IDC_LIST	展示用戶註冊的信息列表

調整控件位置如圖：

2. 註冊對話框內容定製

此頁面包含如下4個Button按鈕：

控件類型	Caption	ID	功能
Button	上一頁	IDC_BACK	進入上一個分頁界面
Button	下一頁	IDC_NEXT	進入下一個分頁界面
Button	完成	IDOK	完成註冊，跳到程序主頁面，即展示用戶註冊信息的頁面，剛剛註冊的信息增加到信息展示界面
Button	退出	IDCANCEL	退出註冊信息界面，進入展示用戶信息的界面，剛剛註冊的信息不在顯示信息界面展示

註冊對話框的界面：

2. 分頁1對話框內容定製

控件類型	Caption	ID	功能
Static Text	賬號	IDC_STATIC（不變）	提示信息
Static Text	暱稱	IDC_STATIC（不變）	提示信息
Edit Control	無此屬性	IDC_NUM	用戶可以輸入賬號信息
Edit Control	無此屬性	IDC_NAME	用戶可以輸入暱稱信息
Group Box	性別	IDC_STATIC（不變）	提示信息
Radio Box	男	IDC_SEX	男性單選按鈕
Radio Box	女	IDC_RADIO2（不變）	女性單選按鈕

修改單選按鈕的Group屬性，本例程共有一組單選按鈕，需要設定一個組，每一組的第一個單選按鈕的Group屬性需要設置爲真。即設置Caption爲“男”的單選按鈕的Group屬性：True。

📢📢📢注意:
單選按鈕最重要的屬性就是Group，需要在同一組的按鈕必須ID連續，這就要求添加同組按鈕時連續。

同時需要設定一個組長作爲默認值，此時可以通過Tab鍵的順序進行默認值的設置：

組長的Tab鍵值要在前，即同一個組內的所有單選按鈕中的組長的Tab鍵要最小，否者無法實現單選按鈕的單選功能。

分頁1對話框的界面：

3. 分頁2對話框內容定製

控件類型	Caption	ID	功能
Static Text	生日	IDC_STATIC（不變）	提示信息
Static Text	血型	IDC_STATIC（不變）	提示信息
Date Time Picker	無此屬性	IDC_BIRTH	出生年月日的選擇
Combo Box	無此屬性	IDC_BLOOD	血型的選擇

爲Combo Box添加Data屬性值：A;B;AB;O;其它

分頁2對話框的界面：

4. 分頁3對話框內容定製

控件類型	Caption	ID	功能
Static Text	聯繫電話	IDC_STATIC（不變）	提示信息
Static Text	郵箱地址	IDC_STATIC（不變）	提示信息
Edit Control	無此屬性	IDC_PHONE	輸入聯繫電話
Edit Control	無此屬性	IDC_EMALL	輸入郵箱地址

分頁3對話框的界面：

四、爲每個對話框添加MFC類

1. 添加註冊MFC類

右鍵點擊註冊對話框的添加類選項：

2. 添加頁面1的MFC類

3. 添加頁面2的MFC類

4. 添加頁面3的MFC類

5. 在pch.h中添加頭文件的聲明

注意：CRegDlg頭文件聲明必須放在分頁類的頭文件聲明之前，否者會報錯。

#include "CPage1.h"
#include "CPage2.h"
#include "CPage3.h"
#include "CRegDlg.h"
#include "resource.h"

五、關聯變量

頁面1添加值類型的關聯變量：

控件ID	類別	變量類型	訪問權限
IDC_NAME	值	CString	m_name
IDC_NUM	值	CString	m_num
IDC_SEX	值	int	m_sex

頁面2添加值類型的關聯變量：

控件ID	類別	變量類型	訪問權限
IDC_BIRTH	值	COleDateTime	m_birth
IDC_BLOOD	值	int	m_blood

頁面3添加值類型的關聯變量：

控件ID	類別	變量類型	訪問權限
IDC_EMALL	值	CString	m_emall
IDC_PHONE	值	CString	m_phone

在註冊界面自定義三個分頁對話框的變量以及，以便在註冊對話框的類中對分頁類進行操作，獲取到每個分頁內輸入的值：

變量名	變量類型	訪問權限
m_p1	CPage1	public
m_p2	CPage2	public
m_p3	CPage3	public
m_pos	int	public

六、實現註冊對話框

1. 重寫OnInitDialog
   

   BOOL CRegDlg::OnInitDialog()
   {
   	CDialogEx::OnInitDialog();
   
   	// TODO:  在此添加額外的初始化
   
   	return TRUE;  // return TRUE unless you set the focus to a control
   				  // 異常: OCX 屬性頁應返回 FALSE
   }
   

2. 關聯頁面

   BOOL CRegDlg::OnInitDialog()
   {
   	CDialogEx::OnInitDialog();
   
   	// TODO:  在此添加額外的初始化
   	//關聯頁面
   	//將變量與3個分頁對話框相關聯，因此可以通過變量對分頁對話框進行操作
   	m_p1.Create(IDD_PAGE1, this);
   	m_p2.Create(IDD_PAGE2, this);
   	m_p3.Create(IDD_PAGE3, this);
   
   
   	//在註冊界面顯示第一個分頁內容
   	m_p1.ShowWindow(SW_SHOW);
   
   
   	return TRUE;  // return TRUE unless you set the focus to a control
   				  // 異常: OCX 屬性頁應返回 FALSE
   }
   
   

3. 添加一個函數，用於查看當前頁面

   void CRegDlg::SelectPage()
   {
   	// TODO: 在此處添加實現代碼.
   	//存分頁的下標
   	int i = 0;
   	CWnd* ps[] = { &m_p1, &m_p2, &m_p3 };
   	while (i < sizeof(ps) / sizeof(ps[0]))
   	{
   		ps[i]->ShowWindow(i == m_pos ? SW_SHOW : SW_HIDE);
   		i++;
   	}
   	ps[m_pos]->SetFocus();
   	//當前頁面下標小於2時，下一頁按鈕可以點擊
   	GetDlgItem(IDC_NEXT)->EnableWindow(m_pos < 2);
   	//當前頁面下標大於0，可以點擊上一頁按鈕
   	GetDlgItem(IDC_BACK)->EnableWindow(m_pos);
   }
   

4. 查看下一頁

   void CRegDlg::OnBnClickedNext()
   {
   	// TODO: 在此添加控件通知處理程序代碼
   	if (m_pos < 2) {
   		m_pos++;
   		SelectPage();
   	}
   }
   

5. 查看上一頁

   void CRegDlg::OnBnClickedBack()
   {
   	// TODO: 在此添加控件通知處理程序代碼
   	if (m_pos) {
   		m_pos--;
   		SelectPage();
   	}
   }
   

6. 完成

   void CRegDlg::OnBnClickedOk()
   {
   	// TODO: 在此添加控件通知處理程序代碼
   	int i = 0;
   	CWnd* ps[] = { &m_p1,&m_p2,&m_p3 };
   	while (i < sizeof(ps) / sizeof(ps[0]))
   	{
   		ps[i]->UpdateData();
   		i++;
   	}
   	CDialog::EndDialog(IDOK);
   }
   
   

五、程序主頁代碼實現

1. 爲list控件添加控件變量

2. 列表添加屬性項

在 CPagingProjectDlg的OnInitDialog函數中添加屬性項，對應註冊界面的所有信息：

m_list.InsertColumn(0, L"賬號", 0, 100);
m_list.InsertColumn(1, L"暱稱", 0, 100);
m_list.InsertColumn(2, L"性別", 0, 80);
m_list.InsertColumn(3, L"生日", 0, 120);
m_list.InsertColumn(4, L"血型", 0, 80);
m_list.InsertColumn(6, L"電話", 0, 120);
m_list.InsertColumn(7, L"電子郵件", 0, 200);

改變列表的外觀爲表格型，同樣在CPagingProjectDlg的OnInitDialog函數中添加表格樣式：

//設置列表的表格樣式
m_list.SetExtendedStyle(LVS_EX_GRIDLINES | LVS_EX_FULLROWSELECT);

點擊註冊,進行註冊操作：

void CPagingProjectDlg::OnBnClickedAdd()
{
	// TODO: 在此添加控件通知處理程序代碼
	CRegDlg  dlg;
	if (IDCANCEL == dlg.DoModal()) {
		return;
	}
	int nCount = m_list.GetItemCount();
	//插入賬號
	m_list.InsertItem(nCount, dlg.m_p1.m_num);
	//插入暱稱
	m_list.SetItemText(nCount, 1, dlg.m_p1.m_name);
	//插入性別
	m_list.SetItemText(nCount, 2, dlg.m_p1.m_sex == 0 ? _T("男") : _T("女"));
	//插入生日
	CString birth;
	birth.Format(_T("%d-%d-%d"), dlg.m_p2.m_birth.GetYear(), dlg.m_p2.m_birth.GetMonth(), dlg.m_p2.m_birth.GetDay());
	m_list.SetItemText(nCount, 3, birth);
	//插入血型
	char* p[] = { "A","B","AB","O","其它" };
	CString blood = (CString)p[dlg.m_p2.m_blood];
	m_list.SetItemText(nCount, 4, blood);
	//插入電話
	m_list.SetItemText(nCount, 5, dlg.m_p3.m_phone);
	//插入電子郵件
	m_list.SetItemText(nCount, 6, dlg.m_p3.m_emall);
}

總結

最終的程序運行界面：

該程序源碼的資源地址：PagingProject.rar

PS：該程序只是簡單的實例，因此就簡單的實現，未做錯誤判斷等。主要起引導作用。

---

學習：

MFC對話框使用標籤頁控件
MFC單選按鈕
單選按鈕
mfc 中如何添加標籤頁（超詳細）