愛悠閑 > tab control

tab control

分類: vc  |  作者: meiyoudao_jiushidao 相關  |  發布日期 : 2013-08-05  |  熱度 : 526°
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();
    GetParent()->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 work 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 :
         ;
     }
    
=================================
VC++中Tab鍵控制問題的解決辦法
做作vc界面的都知道,如果在遇到多個控件用tab分組顯示時是一件很繁瑣的事情,同時代碼量也特別的大下面是我今天下午剛剛想出的一個自己認為滿意的解決辦法。
  
  主要思路如下:

  做一個類CTabContainer,在初始化的時候確定將控件id分成幾組(也就是幾個tab標簽),然后為每一組做一個鏈表分別保存每一個tab下屬的控件id集。這樣的話,只需在對話框初始化時做好一個基本的設定,然后在OnSelchangeTab1寫上m_pTabContainer->Show(m_tab.GetCurSel());就可以了。
  
  類的使用方法:
  
  在OnInitDialog()里面

* pResult = 0 ;
  m_pTabContainer->Init(3,this);//3個tab標簽按鈕,this對話框指針。
  m_pTabContainer->AddCtrlId(0,IDC_BUTTON1);//IDC_BUTTON1加到第一組tab當中
  m_pTabContainer->AddCtrlId(0,IDC_BUTTON4);//下面類似
  m_pTabContainer->AddCtrlId(0,IDC_BUTTON5);
  m_pTabContainer->AddCtrlId(1,IDC_BUTTON2);
  m_pTabContainer->AddCtrlId(1,IDC_BUTTON6);
  m_pTabContainer->AddCtrlId(2,IDC_BUTTON3);
  m_pTabContainer->AddCtrlId(2,IDC_BUTTON7);
  m_pTabContainer->AddCtrlId(2,IDC_BUTTON8);
  m_pTabContainer->Show(0);//默認顯示第一個標簽下面的控件

  在控件TAb的事件OnSelchangeTab1

  m_pTabContainer->Show(m_tab.GetCurSel());即可

  另附類CTabContainer的源代碼:
  classCTabContainer
  {
   public:
    CTabContainer();
    virtual~CTabContainer();
    CTabContainer(constCTabContainer&tabContainer);
    constCTabContainer&operator=(constCTabContainer&tabContainer);
  
    BOOLInit(intnTabs,CWnd*pParent);
  
    //初始化tab,nTabs代表有幾個按扭
    BOOLAddCtrlId(intnTab,intnID);//將id添加到哪個tab中
    BOOLDelete(intnTab,intnID);//刪除id
    voidShow(intnTab);//當前顯示哪個tab
    voidClear(void);//釋放內存和清理工作
  
   protected:
    typedefCListCIntList;
    CIntList*m_pIDGroups;//指向鏈表的指針
    intm_nLCount;//鏈表的個數
    CWnd*m_pParent;//父窗體指針
  };

    
10. 在IDD_MYTAB_DIALOG對話框下面添加一個按鈕, 標題為"計算" 為其添加事件響應函數, 代碼如下:


m_para1.UpdateData( true );
     m_para2.UpdateData(
true );
     m_result.SetResultValue(m_para1.GetParaValue()
+ m_para2.GetParaValue());
     m_result.UpdateData(
false );  


11.
這個小程序很簡單,但是他說明了Tab Control控件的基本用法.


快乐彩中奖说明