TAB Control控制項 的使用方法

(轉)VC中使用TAB Control控制項(2009-06-21 10:49:43)標籤：控制項 雜談   分類：vc學習

VC中使用TAB Control控制項

 

假如我現在有個SDI程式，View是Form View，想在上面放個Tab Control，包含兩個Page。現在讓我們來看看應該怎樣處理。

首先當然要增加一個Tab Control資源，然後利用Class Wizard，在View中增加一個Control變數。

接著建立兩個對話方塊資源，別忘了把Style改為Child，Border改為None。然後就可以在上面加其他控制項了。

接著利用Class Wizard，分別為這兩個對話方塊建立兩個類，比如CPage1和CPage2。

然後在View類標頭檔中，加入這兩個對話方塊對象。同時增加一個變數int m_CurSelTab，用了表明是哪個Page即將被切換。

為了避免使用者在切換Tab時，程式對Tab Index的枚舉，可以利用數組來做這個事情。

在View的初始化函數中需要把CPage1、CPage2和Tab Control關聯起來，並儲存頁面地址，設定初始頁面，等等。

void CTab_testView::OnInitialUpdate()
{
    CFormView::OnInitialUpdate();
    GetParentFrame()->RecalcLayout();
    ResizeParentToFit();
    
     //為Tab Control增加兩個頁面
     m_tab.InsertItem(0, _T("First"));
     m_tab.InsertItem(1, _T("Second"));
   
     //建立兩個對話方塊
     m_page1.Create(IDD_DIALOG1, &m_tab);
     m_page2.Create(IDD_DIALOG2, &m_tab);

     //設定在Tab內顯示的範圍
     CRect rc;
     m_tab.GetClientRect(rc);
     rc.top += 20;
     rc.bottom -= 8;
     rc.left += 8;
     rc.right -= 8;

     m_page1.MoveWindow(&rc);
     m_page2.MoveWindow(&rc);

     //把對話方塊對象指標儲存起來
     pDialog[0] = &m_page1;
     pDialog[1] = &m_page2;

     //顯示初始頁面
     pDialog[0]->ShowWindow(SW_SHOW);
     pDialog[1]->ShowWindow(SW_HIDE);

     //儲存當前選擇
     m_CurSelTab = 0;
}

這裡面需要注意的是，我用了一個CDialog指標數組來進行儲存，數組的大小是Tab Control頁面的個數，數組下標對應著每個頁面的索引（這樣方便快速存取）。

使用者切換時，需要響應相關的訊息。

void CTab_testView::OnSelchangeTab1(NMHDR* pNMHDR, LRESULT* pResult)
{
// TODO: Add your control notification handler code here
   
     pDialog[m_CurSelTab]->ShowWindow(SW_HIDE);
     m_CurSelTab = m_tab.GetCurSel();
     pDialog[m_CurSelTab]->ShowWindow(SW_SHOW);

*pResult = 0;
}

首先我們先把當前的頁面隱藏起來，然後得到新的頁面索引，最後就把相關頁面顯示出來即可。這比一個個去枚舉簡單多了。

還有一點比較有意思，那就是DDX/DDV機制的運用。要想獲得Tab Control各個頁面的資料，可以利用DDX/DDV機制，但需要注意，因為這是多個頁面，所以需要顯式調用多次。

void CTab_testView::OnButton1()
{
// TODO: Add your control notification handler code here
     m_page1.UpdateData();
     m_page2.UpdateData();
     CString str1 = m_page1.m_str1;
     CString str2 = m_page2.m_str2;
     AfxMessageBox(str1);
     AfxMessageBox(str2);
}

經過這幾步處理，基本上我們就可以利用Tab Control的強大功能了。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

VC之TAB 控制項執行個體

對於用慣了VB和VC#的我來說，VC控制項真是太麻煩了，不過有什麼辦法呢？許多企業還在使用，所以繼續學習，鹹淡算扯到這了，這裡做了個最為簡單的Tab Control 的使用範例。

1. 在主面板上拖放一Tab Control控制項，我們這裡建立其在主面板類（CTabSampleDlg）裡面的成員變數m_tab。

2.添加兩個子對話方塊，將其屬性設定為“child，none”。這裡要注意了，添加的必須是繼承自DIALOG類的對話方塊，而不是PropPage對話方塊，否則的話，子面板將不能響應使用者操作。然後產生兩個新類“CTabPage1， CTabPage2”。

3.為CTabSampleDlg類 添加兩個成員變數，他們分別是CTabPage1和CTabPage2類的執行個體。

4.在CTabSampleDlg類的OnInitDialog成員函數內的適當位置添加如下代碼。

BOOL CTabSampleDlg::OnInitDialog()
{
CDialog::OnInitDialog();

// Add "About..." menu item to system menu.

// IDM_ABOUTBOX must be in the system command range.
ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
ASSERT(IDM_ABOUTBOX < 0xF000);

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

// Set the icon for this dialog. The framework does this automatically
// when the application's main window is not a dialog
SetIcon(m_hIcon, TRUE);    // Set big icon
SetIcon(m_hIcon, FALSE);   // Set small icon
//==========================================================
//初始化TAB
TCITEM tc1,tc2;
tc1.mask = TCIF_TEXT;
tc1.pszText = "第一頁";
tc2.mask = TCIF_TEXT;
tc2.pszText = "第二頁";

m_tab.InsertItem(0, &tc1);
m_tab.InsertItem(1, &tc2); //到這裡只是添加了兩個tab頁

CRect rec;
m_tab.GetClientRect(&rec);//獲得TAB控制項的座標

//定位索引標籤頁面的位置，這裡可以根據情況自己調節位移量
rec.bottom -= 1;
rec.left += 1;
rec.top += 20;
rec.right -= 2;

//建立子頁面
m_page1.Create(IDD_DIALOG1, GetDlgItem(IDC_TAB));
m_page2.Create(IDD_DIALOG2, GetDlgItem(IDC_TAB));
//將子頁面移動到指定的位置
m_page1.MoveWindow(&rec);
m_page2.MoveWindow(&rec);
//顯示子頁面
m_page1.ShowWindow(SW_SHOW);
m_page2.ShowWindow(SW_HIDE);
//===============================================================

 

return TRUE; // return TRUE unless you set the focus to a control
}

5. 為主面板上的TabControl 控制項添加 OnSelchangeTab 事件， 添加代碼如下。

void CTabSampleDlg::OnSelchangeTab(NMHDR* pNMHDR, LRESULT* pResult)
{
// TODO: Add your control notification handler code here
    switch (m_tab.GetCurSel())
    {
      case 0:
            m_page1.ShowWindow(SW_SHOW);
            m_page2.ShowWindow(SW_HIDE);
            break;
       case 1:
            m_page1.ShowWindow(SW_HIDE);
            m_page2.ShowWindow(SW_SHOW);
            break;
      default:
            break;
    }
*pResult = 0;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Tab Control控制項的應用

前幾天在網上搜了點資料，是關於Tab Control控制項的應用，當時還做了一遍，今天再做有點生疏了，總是忘了點什麼。於是總結在這兒，一是為以後使用提供方便，再是供大家參考。

首先，建立一個基於對話方塊的MFC應用程式，添加Tab Control控制項，並為其添加變數CTabCtrl m_tab；

然後，建立兩個對話方塊，均設定屬性如下(這步很重要)：Style--Child，Border--None；然後分別添加一個文字框。

分別為這兩個對話方塊建立新類CPage1和CPage2。

該程式用了一個CDialog的指標數組來進行儲存各個頁面，數組的大小是Tab Control頁面的個數，數組下標對應著每個頁面的索引（這樣方便快速存取）。 聲明變數：CDialog *pDialog[2]，並且添加一個int型變數用於儲存當前活動的頁面索引，int m_CurSelTab；

接著，在OnInitDialog函數中添加如下代碼：

    //為Tab Control增加兩個頁面
    m_tab.InsertItem(0, _T("First"));
    m_tab.InsertItem(1, _T("Second"));

    //建立兩個對話方塊
    m_page1.Create(IDD_DIALOG1, &m_tab);
    m_page2.Create(IDD_DIALOG2, &m_tab);

    //設定在Tab內顯示的範圍
    CRect rc;
    m_tab.GetClientRect(rc);
    rc.top += 20;
    rc.bottom -= 8;
    rc.left += 8;
    rc.right -= 8;

    m_page1.MoveWindow(&rc);
    m_page2.MoveWindow(&rc);

    //用數組把對話方塊對象指標儲存起來
    pDialog[0] = &m_page1;
    pDialog[1] = &m_page2;

    //顯示初始頁面
    pDialog[0]->ShowWindow(SW_SHOW);
    pDialog[1]->ShowWindow(SW_HIDE);

    //儲存當前選擇
    m_CurSelTab = 0;

這樣就可進行正常的顯示了，如果響應頁面切換這個事件，可以為Tab Control控制項添加訊息響應函數：OnSelchangeTab，並在該函數中添加如下代碼：

   //得到頁面的資料
    CString str;
    if(m_CurSelTab==0)
    {
        m_page1.UpdateData(TRUE);
         m_page1.GetDlgItem(IDC_EDIT_PAGE1)->GetWindowText(str);
     }
    if(m_CurSelTab==1)
    {
        m_page2.UpdateData(TRUE);
        m_page2.GetDlgItem(IDC_EDIT_PAGE2)->GetWindowText(str);
    }
     MessageBox(str);

    //首先我們先把當前的頁面隱藏起來，然後得到新的頁面索引，最後就把相關頁面顯示出來即可。這比一個個去枚舉簡單多了。
    pDialog[m_CurSelTab]->ShowWindow(SW_HIDE);
    m_CurSelTab = m_tab.GetCurSel();
    pDialog[m_CurSelTab]->ShowWindow(SW_SHOW);

經過這幾步處理，一個簡單的Tab Contrl控制項應用程式就完成了。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

VC++ Tab Control控制項的使用

1. 建立一個MFC工程, 取名MyTab, 選擇Dialog based, 然後Finish.
2. 刪除對話方塊上預設添加的三個控制項. 添加Tab Control控制項並在Property屬性中設定ID為IDC_TABTEST 在More Styles裡勾上Bottom. 調速尺寸使其布滿整個對話方塊, 我這邊Tab Control的尺寸最後為164X203. 在ClassWizard為其添加變數, 變數名為m_tab. 類型為CTabCtrl.
3. 在對話方塊的初始化函數OnInitDialog裡面添加如下代碼:

m_tab.InsertItem(0,"參數一"); //添加參數一選項卡
m_tab.InsertItem(1,"參數二"); //添加參數二選項卡
m_tab.InsertItem(2,"結果");    //添加結果選項卡

4.在對話方塊資源裡面添加三個對話方塊資源, ID分別命名為IDD_PARA1, IDD_PARA2, IDD_RESULT. 字型為宋體, 字型大小為9, style為Child, Border為None, 寬度調整為161. 再分別為其添加對應的基於CDialog類CPara1, CPara2, CResult.
5. 在CMyTabDlg類中添加三個成員變數m_para1, m_para2, m_result, 分別是三個子對話方塊的執行個體. 代碼如下:

 

CResult m_result;
CPara2 m_para2;
CPara1 m_para1;
6. 在IDD_PARA1對話方塊上添加靜態文本控制項內容為"參數一" 再在後面插入一個文字框控制項, 用ClassWizard將其關聯為一個int型變數,名為m_nPara1;
在IDD_PARA2對話方塊上添加靜態文本控制項內容為"參數二" 再在後面插入一個文字框控制項, 用ClassWizard將其關聯為一個int型變數,名為m_nPara2;
在IDD_RESULT對話方塊上添加靜態文本控制項內容為"結果" 再在後面插入一個文字框控制項, 用ClassWizard將其關聯為一個int型變數,名為m_nResult;
7. 為CPara1類新增成員函數int GetParaValue() 代碼如下:

int CPara1::GetParaValue()
{
    return m_nPara1;
}
為CPara2類新增成員函數int GetParaValue() 代碼如下:

int CPara2::GetParaValue()
{
    return m_nPara2;
}
為CResult類新增成員函數void SetResultValue(int nResult) 代碼如下:

void CResult::SetResultValue(int nResult)
{
     m_nResult = nResult;
}
8. 在IDD_MYTAB_DIALOG對話方塊的初始化函數OnInitDialog裡面添加如下代碼:

 

//關聯對話方塊,並且將IDC_TABTEST控制項設為父視窗
m_para1.Create(IDD_PARA1,GetDlgItem(IDC_TABTEST));
m_para2.Create(IDD_PARA2,GetDlgItem(IDC_TABTEST));
m_result.Create(IDD_RESULT,GetDlgItem(IDC_TABTEST));
   
//獲得IDC_TABTEST客戶區大小
CRect rs;
m_tab.GetClientRect(&rs);
//調整子對話方塊在父視窗中的位置
rs.top+=1;
rs.bottom-=60;
rs.left+=1;
rs.right-=2;
   
//設定子對話方塊尺寸並移動到指定位置
m_para1.MoveWindow(&rs);
m_para2.MoveWindow(&rs);
m_result.MoveWindow(&rs);

//分別設定隱藏和顯示
m_para1.ShowWindow(true);
m_para2.ShowWindow(false);
m_result.ShowWindow(false);
   
//設定預設的選項卡
m_tab.SetCurSel(0);

9. 添加Tab Control控制項的TCN_SELCHANGE事件響應函數OnSelchangeTabtest(NMHDR* pNMHDR, LRESULT* pResult) ,函數體代碼如下:

 

int CurSel = m_tab.GetCurSel();
    switch(CurSel)
    {
    case 0:
         m_para1.ShowWindow(true);
         m_para2.ShowWindow(false);
         m_result.ShowWindow(false);
        break;
    case 1:
         m_para1.ShowWindow(false);
         m_para2.ShowWindow(true);
         m_result.ShowWindow(false);
        break;
    case 2:
         m_para1.ShowWindow(false);
         m_para2.ShowWindow(false);
         m_result.ShowWindow(true);
        break;
    default:
         ;
     }   

 

 

 

網上介紹使用Tab Control控制項,好像說的都不是很詳細, 我一小菜這邊隨便說說, 見笑.
1. 建立一個MFC工程, 取名MyTab, 選擇Dialog based, 然後Finish.
2. 刪除對話方塊上預設添加的三個控制項. 添加Tab Control控制項並在Property屬性中設定ID為IDC_TABTEST 在More Styles裡勾上Bottom. 調速尺寸使其布滿整個對話方塊, 我這邊Tab Control的尺寸最後為164X203. 在ClassWizard為其添加變數, 變數名為m_tab. 類型為CTabCtrl.
3. 在對話方塊的初始化函數OnInitDialog裡面添加如下代碼:

m_tab.InsertItem(0,"參數一"); //添加參數一選項卡
m_tab.InsertItem(1,"參數二"); //添加參數二選項卡
m_tab.InsertItem(2,"結果");    //添加結果選項卡
4.在對話方塊資源裡面添加三個對話方塊資源, ID分別命名為IDD_PARA1, IDD_PARA2, IDD_RESULT. 字型為宋體, 字型大小為9, style為Child, Border為None, 寬度調整為161. 再分別為其添加對應的基於CDialog類CPara1, CPara2, CResult.
5. 在CMyTabDlg類中添加三個成員變數m_para1, m_para2, m_result, 分別是三個子對話方塊的執行個體. 代碼如下:

CResult m_result;
CPara2 m_para2;
CPara1 m_para1;
6. 在IDD_PARA1對話方塊上添加靜態文本控制項內容為"參數一" 再在後面插入一個文字框控制項, 用ClassWizard將其關聯為一個int型變數,名為m_nPara1;
在IDD_PARA2對話方塊上添加靜態文本控制項內容為"參數二" 再在後面插入一個文字框控制項, 用ClassWizard將其關聯為一個int型變數,名為m_nPara2;
在IDD_RESULT對話方塊上添加靜態文本控制項內容為"結果" 再在後面插入一個文字框控制項, 用ClassWizard將其關聯為一個int型變數,名為m_nResult;
7. 為CPara1類新增成員函數int GetParaValue() 代碼如下:

int CPara1::GetParaValue()
...{
    return m_nPara1;
}
為CPara2類新增成員函數int GetParaValue() 代碼如下:

int CPara2::GetParaValue()
...{
    return m_nPara2;
}
為CResult類新增成員函數void SetResultValue(int nResult) 代碼如下:

void CResult::SetResultValue(int nResult)
...{
    m_nResult = nResult;
}