創建MFC應用程序項目 實際上，Ribbon界面(Office 2007風格的界面)的開發早在2008年就隨着Visual C++ Feature Pack被引入到Visual Studio 2008中。在即將到來的Visual Studio 2010中，Ribbon界面的開發更是得到了原生的支持，使得Ribbon界面的開發更加簡便高效。 首先，我們啟動Visual Studio 2010，創建一個基於MFC的應用程序，項目模板我們選擇“MFC Application”：
圖2 創建MFC應用程序
在接下來的“MFC應用程序向導”中，我們就可以對項目的可視化風格進行選擇和配置。Visual Studio 2010支持MFC風格、標准的Windows風格，Visual Studio 2005風格和Office 2007風格。而這里的Office 2007風格，就是我們要創建的Ribbon界面：
圖3 設置Ribbon界面風格
在接下來的向導頁中，我們可以選擇命令欄(工具欄。菜單欄)的樣式，這里我們當然選擇“Use a ribbon”了。當然，為了跟舊有的系統保持兼容，Visual Studio 2010也支持傳統的命令式界面，如果你的用戶比較保守，想繼續使用傳統的菜單式界面，我們可以選擇“Use a menu bar and toolbar”:
圖4 選擇命令欄的風格
為了支持豐富的Office 2007界面風格，MFC默認情況下為MFC文檔應用程序添加了類似Outlook風格的導航面板(Navigation pane)和標題條(Caption bar)。這兩者並不是我們關注的重點，為了更好的展示Ribbon界面，我們這里就去掉這兩個多余的面板：
圖5 去掉多余的界面元素
到這里，針對新項目的設置就完成了，點擊“Finish”按鈕關閉應用程序向導，Visual Studio 2010就會按照我們的設置創建相應的MFC應用程序解決方案。編譯運行這個解決方案，我們就得到了第一個具有Ribbon界面的應用程序。
圖6 第一個Ribbon界面應用程序
Ribbon界面的構成
為了支持新的界面風格的開發，MFC提供了很多新的、經過擴展過后的應用程序類，界面類等。例如在我們的實例程序中用到的 CRibbonApp，CMainFrame就是分別從CWinAppEx，CMDIFrameWndEx派生的。而CWinAppEx和 CMDIFrameWndEx又是從傳統的CWinApp和CMDIFrameWnd派生，在原有類的基礎上，添加了對新的界面風格的支持。
圖7 支持新的界面風格的框架類
熟悉MFC界面開發的朋友都知道，應用程序的CMainFrame類負責整個主框架界面的創建和管理，在傳統的菜單式界面下，它負責創建和管理菜單欄，狀態欄，工具欄等。同樣的，在Ribbon界面下，它同樣負責Ribbon界面的創建和管理。
class CMainFrame : public CMDIFrameWndEx {
DECLARE_DYNAMIC(CMainFrame) public : CMainFrame();
// Attributes public :
// Operations public :
// Overrides public : virtual BOOL PreCreateWindow(CREATESTRUCT& cs);
// Implementation public :
virtual ~CMainFrame(); #ifdef _DEBUG virtual void AssertValid() const ; virtual void Dump(CDumpContext& dc) const ; #endif
protected : // control bar embedded members CMFCRibbonBar m_wndRibbonBar;
CMFCRibbonApplicationButton m_MainButton; CMFCToolBarImages m_PanelImages; CMFCRibbonStatusBar m_wndStatusBar;
// Generated message map functions protected : afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
afx_msg void OnWindowManager();
afx_msg void OnApplicationLook( UINT id); afx_msg void OnUpdateApplicationLook(CCmdUI* pCmdUI);
DECLARE_MESSAGE_MAP()
void InitializeRibbon(); };
從上面的代碼中我們可以看到，在Ribbon界面下，CMainFrame類包含了三個成員變量：m_wndRibbonBar、 m_MainButton、m_wndStatusBar，分別用於控制Ribbon界面的命令面板，應用程序按鈕和狀態欄。清楚了各個變量對應的 Ribbon界面元素后，我們就可以操作相應的成員變量，在Ribbon界面上添加我們需要的內容。
圖8 Ribbon界面的構成
處理菜單資源和消息響應函數
Ribbon界面相對於傳統的菜單式界面，最大的差別就是用新的Ribbon Bar代替了傳統的菜單欄。我們可以看到，在默認情況下，Ribbon Bar已經擁有了一個名為“Home”的命令分組(Category)，其中又包含了多個面板(Panel)，每個面板中有一個或者多個命令按鈕 (Ribbon Button)。下面我們就來看看如何在Ribbon Bar上添加一個新的命令分組，然后在其中添加新的命令按鈕以執行相應的功能。
按照傳統的菜單式界面的開發流程，我們總是先編輯菜單資源，然后再創建相應的菜單命令消息響應函數，最后再實現這個消息響應函數，完成相應的任務。在新的 Ribbon界面中，我們還是先要按照這樣的流程，完成菜單資源的編輯，實現消息響應函數等。所以，我們先打開Visual Studio 2010的資源編輯器，在IDR_RibbonUITYPE菜單資源中添加兩個新的菜單項。
圖9 編輯菜單資源
然后，我們分別為這兩個菜單項添加相應的消息響應函數：
圖10 添加消息響應函數
這里，我們只是演示Ribbon界面的創建，所以我們將這兩個消息響應函數簡單地實現如下：
// CRibbonUIView message handlers void CRibbonUIView::OnEditSayhello() { // TODO: Add your command handler code here AfxMessageBox(_T( " Hello RibbonUI! " )); }
void CRibbonUIView::OnEditSaygoodbye() { // TODO: Add your command handler code here AfxMessageBox(_T( " Goodbye RibbonUI! " )); }
添加Ribbon按鈕
到現在為止，我們已經按照菜單式界面的開發流程，完成了資源的編輯和消息函數的實現。如果這時我們編譯運行解決方案，我們在程序界面上看不到任何變化，因為我們還沒有把這些命令綁定到Ribbon Bar的命令按鈕上。在CMainFrame類中，它提供了一個專門的函數CMainFrame::InitializeRibbon()來完成 Ribbon界面的初始化工作，所以，我們在這個函數中添加如下代碼，創建新的命令分組，然后將命令按鈕映射到我們剛剛創建的菜單項。
void CMainFrame::InitializeRibbon() { BOOL bNameValid; /// … //////////////////////////////////////////////////////////// // // 添加一個命令分組(Category)“RibbonUI Category” CMFCRibbonCategory * pRibbonUICategory = m_wndRibbonBar.AddCategory(_T( " RibbonUI Category " ), IDB_WRITESMALL, IDB_WRITELARGE);
// 添加一個面板(Panel) CMFCRibbonPanel * pTestPanel = pRibbonUICategory -> AddPanel(_T( " RibbonUI Panel " ), m_PanelImages.ExtractIcon( 1 ));
// 在面板上添加Ribbon命令按鈕(CMFCRibbonButton) pTestPanel -> Add( new CMFCRibbonButton(ID_EDIT_SAYHELLO, _T( " Say Hello " ), 0 , 0 )); pTestPanel -> Add( new CMFCRibbonButton(ID_EDIT_SAYHELLO, _T( " Say Hello " ), 1 )); pTestPanel -> Add( new CMFCRibbonButton(ID_EDIT_SAYGOODBYE, _T( " Say Goodbye " ), 2 )); //////////////////////////////////////////////////////////// // /// … }
在這段代碼中，我們首先利用Ribbon Bar的AddCategory()函數，添加了一個新的命令分組(Category)，也就是Ribbon Bar上的一個新的標簽頁。然后，我們在這個新創建的標簽頁中，添加了一個新的面板(Panel)。最后，我們創建了三個Ribbon命令按鈕 (CMFCRibbonButton)，並將它們放置到面板中。通過指定跟菜單資源中的菜單項相同的資源ID，我們將這些Ribbon命令按鈕跟我們之前創建的菜單項一一對應起來。當我們點擊某個Ribbon命令按鈕時，就會執行相應的菜單命令響應函數。這樣，我們就實現了菜單命令在Ribbon Bar的綁定，同時在界面上也能看到我們剛剛添加的命令按鈕了。
圖11 新創建的命令按鈕
在這里，我們只是簡單地向大家介紹了Ribbon界面的基本概念和大致的開發流程，要想開發跟Office 2007一樣專業的Ribbon界面，我們還有很長的一段路要走，敬請關注本系列文章，創建面向Windows 7的用戶界面。
在上回中，我們簡單地介紹了開發Ribbon界面的一般流程，同時演示了如何創建包含命令按鈕(CMFCRibbonButton)的簡單Ribbon界面，相信很多朋友都躍躍欲試，想為自己的軟件 創建專業的Ribbon界面。但是，僅僅使用命令按鈕是遠遠不能滿足軟件界面的交互需求的，同時也沒有完全發揮Ribbon界面的強大威力。為了支持 Ribbon界面，Visual Studio 2010為我們提供了很多控件，除了我們上回介紹的命令按鈕(CMFCRibbonButton)之外，還有工具廊 (CMFCRibbonGallery)，顏色按鈕(CMFCRibbonColorButton)，編輯框(CMFCRibbonEdit)，進度條 (CMFCRibbonProgressBar)等等。合理地使用這些控件，我們可以創建豐富的Ribbon界面，增強軟件的可用性。在這回中，我們就介紹一下如何使用這些控件，創建更加復雜的Ribbon界面，完成更加復雜的交互任務。
為了更好地理解和創建Ribbon界面，在開始具體地介紹各種控件之前，我們先來了解一下Ribbon界面的結構層次。在上一回中，我們介紹了Ribbon界面主要由Ribbon面板(CMFCRibbonBar)構成，而Ribbon面板主要的主要分為三個層次： • 分類(CMFCRibbonCategory)
圖1 分類
很明顯，“分類”就是作用相近的一類命令的組合。例如在Word 2007的Ribbon界面中，微軟將跟插入元素相關的命令都放在“Insert”這個頁面中，當用戶想在Word文檔中插入其他元素時，只要切換到這一頁就可以找到他需要的命令。在形式上，“分類”表現為Ribbon面板上的一個Tab頁面。我們可以使用函數AddCategory()在Ribbon面板上添加一個新的“分類”：
// 添加一個命令分組(Category)“RibbonUI Category” CMFCRibbonCategory * pRibbonUICategory = m_wndRibbonBar.AddCategory(_T( " RibbonUI Category " ),
• 面板(CMFCRibbonPanel)
圖2 面板
“面板”是“分類”的下一個層次。它是聯系更加緊密的一組命令的組合。面板總是被放置在某個“分類”中，被“分類”所包含。同時，“面板”又是一個容器，它包含着它的下一個層次“元素”。我們可以通過AddPanel()函數在“分類”中添加新的“面板”：
// 添加一個面板(Panel)
// 添加一個面板(Panel) CMFCRibbonPanel *pTestPanel = pRibbonUICategory->AddPanel(_T( "RibbonUI Panel" ),m_PanelImages.ExtractIcon(1));
• 元素(CMFCRibbonBaseElement)
圖3 元素
“元素”就是我們通常意義上的控件、這些控件根據各自的功能，被分組放置在各個“面板”上，負責完成具體的交互任務。Visual Studio 2010提供的Ribbon界面“元素”主要包括命令按鈕(CMFCRibbonButton)。工具廊(CMFCRibbonGallery)、顏色按鈕(CMFCRibbonColorButton)、編輯框(CMFCRibbonEdit)、進度條(CMFCRibbonProgressBar)等等。這些類都派生自CMFCRibbonBaseElement。
圖4 豐富的Ribbon控件
下面我們就來詳細介紹各種Ribbon控件的使用。
命令按鈕
命令按鈕可以說是我們最常用的Ribbon控件了，我們通常都是通過命令按鈕來發送某個命令，執行某個動作。它代替了過去的菜單命令，成為使用最頻繁的 Ribbon控件。在Ribbon界面中，主要有三種形式的命令按鈕：大圖標按鈕，小圖標按鈕以及表示選擇的復選按鈕(CheckBox)。
圖5 命令按鈕
按照上回我們介紹的Ribbon界面開發流程，我們需要先准備菜單資源，圖標資源，實現消息響應函數等，這里我們就不再贅述這一過程，而把重點放在如何創建Ribbon界面。下面的代碼分別演示了這三種按鈕的創建過程：
// 創建一個新的面板，用於放置大圖標按鈕 CMFCRibbonPanel * pPanel1 = pCategory -> AddPanel(_T( " Large Buttons " ));
// 創建按鈕 CMFCRibbonButton * pBtn1 = new CMFCRibbonButton(ID_RIBBON_BTN_1, _T( " Button " ), 0 , 0 ); // 指定使用大圖標 pBtn1 -> SetAlwaysLargeImage(); // 將按鈕添加到面板中 pPanel1 -> Add(pBtn1);
CMFCRibbonButton * pBtn2 = new CMFCRibbonButton(ID_RIBBON_BTN_2, _T( " Menu Button " ), 1 , 1 ); // 可以通過SetMenu()函數為按鈕設置一個子菜單 pBtn2 -> SetMenu(IDR_RIBBON_MENU_1); pBtn2 -> SetAlwaysLargeImage(); pPanel1 -> Add(pBtn2);
CMFCRibbonButton * pBtn3 = new CMFCRibbonButton(ID_RIBBON_BTN_3, _T( " Split Button " ), 2 , 2 ); pBtn3 -> SetMenu(IDR_RIBBON_MENU_1, TRUE); pBtn3 -> SetAlwaysLargeImage(); // 可以通過RemoveSubItem()和AddSubItem()動態地改變按鈕的子項目 pBtn3 -> RemoveSubItem( 0 ); pBtn3 -> AddSubItem( new CMFCRibbonButton(ID_RIBBON_MBTN_1, _T( " Item 1 " ), 2 ), 0 ); pPanel1 -> Add(pBtn3);
// 創建新的面板，用於放置小圖標按鈕 CMFCRibbonPanel * pPanel2 = pCategory -> AddPanel(_T( " Small " ));
// 創建小圖標按鈕 CMFCRibbonButton * pBtn4 = new CMFCRibbonButton(ID_RIBBON_BTN_4, _T( " Button " ), 3 ); pPanel2 -> Add(pBtn4);
CMFCRibbonButton * pBtn5 = new CMFCRibbonButton(ID_RIBBON_BTN_5, _T( " Menu Button " ), 4 ); pBtn5 -> SetMenu(IDR_RIBBON_MENU_1); pPanel2 -> Add(pBtn5);
CMFCRibbonButton * pBtn6 = new CMFCRibbonButton(ID_RIBBON_BTN_6, _T( " Split Button " ), 5 ); pBtn6 -> SetMenu(IDR_RIBBON_MENU_1, TRUE); pBtn6 -> SetAlwaysLargeImage(); pBtn6 -> RemoveSubItem( 1 ); pBtn6 -> AddSubItem( new CMFCRibbonButton(ID_RIBBON_MBTN_2, _T( " Item 2 " ), 5 ), 1 ); pPanel2 -> Add(pBtn6);
// 創建新的面板，用於放置復選按鈕 CMFCRibbonPanel * pPanel3 = pCategory -> AddPanel(_T( " Check Boxes " ));
pPanel3 -> Add( new CMFCRibbonCheckBox(ID_RIBBON_BTN_7, _T( " Check Box 1 " ))); pPanel3 -> Add( new CMFCRibbonCheckBox(ID_RIBBON_BTN_8, _T( " Check Box 2 " ))); pPanel3 -> Add( new CMFCRibbonCheckBox(ID_RIBBON_BTN_9, _T( " Check Box 3 " )));
工具廊
Ribbon界面的一個重要革新，就是可以通過工具廊(CMFCRibbonGallery)控件，對命令的執行效果進行直觀地預覽。例如Word 2007的段落格式設置，就是通過工具廊直觀地展示了格式的樣子，這很大程度上減少了用戶通過不斷嘗試各種參數找到合適格式的過程。
圖6 工具廊
下面我們就來看看如何創建工具廊這種新的交互工具。如下的代碼，演示了工具廊控件的創建過程：
CMFCRibbonPanel * pPanel1 = pCategory -> AddPanel(_T( " Standard " ));
// 創建一個標准的工具廊控件，其中IDB_RIBBON_PALETTE_1指定了 // 工具廊中的各個按鈕的圖標，通過這些圖標對命令效果進行預覽 pPanel1 -> Add( new CMFCRibbonGallery(ID_RIBBON_PBTN_1, _T( " Embedded " ), 0 , 0 , IDB_RIBBON_PALETTE_1, 64 ));
// 按鈕模式的工具廊控件 // 按鈕模式的工具廊控件可以減少對面板空間的占用 CMFCRibbonGallery * pBtn2 = new CMFCRibbonGallery(ID_RIBBON_PBTN_2, _T( " Button " ), 1 , 1 , IDB_RIBBON_PALETTE_1, 64 ); // 設置面板按鈕為按鈕模式，默認情況下為畫廊(Gallery)模式 pBtn2 -> SetButtonMode(); pBtn2 -> SetAlwaysLargeImage(); pPanel1 -> Add(pBtn2);
CMFCRibbonPanel * pPanel2 = pCategory -> AddPanel(_T( " Extended " ));
// 對工具廊進行布局設置 CMFCRibbonGallery * pBtn3 = new CMFCRibbonGallery(ID_RIBBON_PBTN_3, _T( " Resize Vertical " ), 2 , 2 , IDB_RIBBON_PALETTE_1, 64 ); pBtn3 -> SetButtonMode(); // 設置按鈕模式下，下拉命令按鈕容器(Gallery)的列數 pBtn3 -> SetIconsInRow( 2 ); pBtn3 -> EnableMenuResize(TRUE, TRUE); pPanel2 -> Add(pBtn3);
CMFCRibbonGallery * pBtn4 = new CMFCRibbonGallery(ID_RIBBON_PBTN_4, _T( " Resize Both " ), 3 , 3 , IDB_RIBBON_PALETTE_1, 64 ); pBtn4 -> SetButtonMode(); // 通過SetIconInRow()和EnableMenuResize()設置命令按鈕的布局 pBtn4 -> SetIconsInRow( 4 ); pBtn4 -> EnableMenuResize(TRUE); pPanel2 -> Add(pBtn4);
CMFCRibbonGallery * pBtn5 = new CMFCRibbonGallery(ID_RIBBON_PBTN_5, _T( " Groups && Subitems " ), 4 , 4 ); // 通過AddGroup()函數，對命令按鈕進行分組 pBtn5 -> AddGroup(_T( " Group 1 " ), IDB_RIBBON_PALETTE_1, 64 ); pBtn5 -> AddGroup(_T( " Group 2 " ), IDB_RIBBON_PALETTE_2, 64 ); pBtn5 -> SetButtonMode(); pBtn5 -> SetIconsInRow( 4 ); pBtn5 -> EnableMenuResize(TRUE); // 在按鈕中添加子項目(按鈕) pBtn5 -> AddSubItem( new CMFCRibbonButton(ID_RIBBON_MENU_ITEM_1, _T( " Item 1 " ))); pBtn5 -> AddSubItem( new CMFCRibbonButton(ID_RIBBON_MENU_ITEM_2, _T( " Item 2 " ))); pBtn5 -> AddSubItem( new CMFCRibbonButton(ID_RIBBON_MENU_ITEM_3, _T( " Item 3 " ))); pPanel2 -> Add(pBtn5);
工具欄 在傳統的菜單式界面中，工具欄作為菜單的有益補充，被廣泛使用。我們通過將一些常用命令放置到工具欄上，可以讓用戶直觀而快速地訪問到常用功能，提高了效率。在Ribbon界面中，工具欄得到了進一步的加強。除了具備原來的工具欄功能外，因為使用命令按鈕實現，還使得工具欄具備了下拉菜單等擴展功能。
圖7 工具欄
如下的代碼演示了如何創建Ribbon界面中的工具欄控件：
CMFCRibbonPanel * pPanel1 = pCategory -> AddPanel(_T( " From Toolbar " ));
// 最簡單的，通過AddToolBar()函數，指定一個工具欄資源而創建工具欄 pPanel1 -> AddToolBar(IDR_TOOLBAR);
// 手動創建工具欄 CMFCRibbonPanel * pPanel2 = pCategory -> AddPanel(_T( " Manual " ));
// 創建一個按鈕組 CMFCRibbonButtonsGroup * pButtonsGroup1 = new CMFCRibbonButtonsGroup;
// 將新的按鈕添加到按鈕組中 pButtonsGroup1 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_1, _T( "" ), 0 )); pButtonsGroup1 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_2, _T( "" ), 1 ));
// 創建一個編輯框控件 CMFCRibbonEdit * pEdit = new CMFCRibbonEdit(ID_RIBBON_GBTN_3, 65 ); // 設置默認文本 pEdit -> SetEditText(_T( " Edit " )); pButtonsGroup1 -> AddButton(pEdit);
pButtonsGroup1 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_4, _T( "" ), 2 )); pButtonsGroup1 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_5, _T( "" ), 3 ));
// 將按鈕組添加到面板中 pPanel2 -> Add(pButtonsGroup1);
// 添加新的按鈕組和按鈕 CMFCRibbonButtonsGroup * pButtonsGroup2 = new CMFCRibbonButtonsGroup; pButtonsGroup2 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_6, _T( "" ), 4 )); pButtonsGroup2 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_7, _T( "" ), 5 )); pButtonsGroup2 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_8, _T( "" ), 6 )); pButtonsGroup2 -> AddButton( new CMFCRibbonButton(ID_RIBBON_GBTN_9, _T( "" ), 7 ));
pPanel2 -> Add(pButtonsGroup2);
CMFCRibbonButtonsGroup * pButtonsGroup3 = new CMFCRibbonButtonsGroup;
CMFCRibbonButton * pBtn10 = new CMFCRibbonButton(ID_RIBBON_GBTN_10, _T( "" ), 8 ); pBtn10 -> SetMenu(IDR_RIBBON_MENU_1); pButtonsGroup3 -> AddButton(pBtn10);
CMFCRibbonButton * pBtn11 = new CMFCRibbonButton(ID_RIBBON_GBTN_11, _T( "" ), 9 ); // 為按鈕指定一個子菜單 pBtn11 -> SetMenu(IDR_RIBBON_MENU_1, TRUE); pButtonsGroup3 -> AddButton(pBtn11);
pPanel2 -> Add(pButtonsGroup3);
編輯框
在傳統的軟件 界面中，我們都是通過點擊菜單項，或者工具欄上的按鈕來簡單執行某個命令。在新的Ribbon界面中，我們不僅可以點擊按鈕，還可以通過編輯框輸入數據或者通過ComboBox快速地選擇數據等等，完成更加復雜的交互。
圖8 編輯框
如下的代碼演示了Ribbon編輯框的創建過程：
CMFCRibbonPanel* pPanel1 = pCategory->AddPanel(_T(“Standard"));
// 創建簡單編輯框 CMFCRibbonEdit* pBtn1 = new CMFCRibbonEdit(ID_RIBBON_EBTN_1, 90); pBtn1->SetEditText(_T( "Edit" )); pPanel1->Add(pBtn1);
// 創建可調編輯框 CMFCRibbonEdit* pBtn2 = new CMFCRibbonEdit(ID_RIBBON_EBTN_2, 90);
pBtn2->EnableSpinButtons(0, 99); pBtn2->SetEditText(_T( "0" )); pPanel1->Add(pBtn2);
// 創建ComboBox CMFCRibbonComboBox* pBtn3 = new CMFCRibbonComboBox(ID_RIBBON_EBTN_3, TRUE, 74); // 添加下拉選項 pBtn3->AddItem(_T( "Combo Box" )); for (i = 0; i < 20; i++) {
CString str; str.Format(_T( "Item %d" ), i + 1); pBtn3->AddItem(str); } pBtn3->SelectItem(0);
pPanel1->Add(pBtn3);
CMFCRibbonPanel* pPanel2 = pCategory->AddPanel(_T( "With Icons and Labels" ));
// 創建帶圖標的編輯框 CMFCRibbonEdit* pBtn4 = new CMFCRibbonEdit(ID_RIBBON_EBTN_4, 90, _T( "Label:" ), 0); pBtn4->SetEditText(_T( "Edit" )); pPanel2->Add(pBtn4);
CMFCRibbonEdit* pBtn5 = new CMFCRibbonEdit(ID_RIBBON_EBTN_5, 90, _T( "Label:" ), 1); pBtn5->EnableSpinButtons(0, 99); pBtn5->SetEditText(_T( "0" ));
pPanel2->Add(pBtn5);
CMFCRibbonComboBox* pBtn6 = new CMFCRibbonComboBox(ID_RIBBON_EBTN_6, TRUE, 74, _T( "Label:" ), 2);
pBtn6->AddItem(_T( "Combo Box" ));
for (i = 0; i < 20; i++) {
CString str; str.Format(_T( "Item %d" ), i + 1); pBtn6->AddItem(str); } pBtn6->SelectItem(0);
pPanel2->Add(pBtn6);
CMFCRibbonPanel* pPanel3 = pCategory->AddPanel(_T( "Font" ));
// 創建字體選擇ComboBox CMFCRibbonFontComboBox::m_bDrawUsingFont = TRUE;
CMFCRibbonFontComboBox* pBtn7 = new CMFCRibbonFontComboBox(ID_RIBBON_EBTN_7); pBtn7->SelectItem(_T( "Arial" ));
pPanel3->Add(pBtn7);
其他控件
除了前面我們介紹的按鈕，工具欄，編輯框等基本控件外，為了支持現代軟件 對豐厚的界面交互方式的要求，Visual Studio 2010還提供了很多其他的輔助控件，例如我們通常會用到的“上一步”按鈕，標簽文本，超鏈文本，滑動條，進度條等等。這些輔助控件，極大地豐富了Ribbon界面的表現力。
圖9 其他控件
如下代碼演示了其他各種控件的創建過程：
// 添加“上一步”按鈕 CMFCRibbonPanel* pPanel1 = pCategory->AddPanel(_T( "Undo" ));
CMFCRibbonUndoButton* pBtn1 = new CMFCRibbonUndoButton(ID_RIBBON_OBTN_1, _T( "Undo" ), 0, 0); // 為返回按鈕添加可以返回的動作 for ( int i = 0; i < 10; i++) { CString str; str.Format(_T( "Action %d" ), i + 1);
pBtn1->AddUndoAction(str); } pPanel1->Add(pBtn1);
// 添加文本標簽 CMFCRibbonPanel* pPanel2 = pCategory->AddPanel(_T( "Label" ));
pPanel2->Add( new CMFCRibbonLabel(_T( "Label 1" )));
pPanel2->Add( new CMFCRibbonLabel(_T( "Label 2" )));
pPanel2->Add( new CMFCRibbonLabel(_T( "Label 3" )));
// 在面板中添加一個分隔符 pPanel2->Add( new CMFCRibbonSeparator());
// 多行文本標簽 pPanel2->Add( new CMFCRibbonLabel(_T( "This is a multi-line label" ), TRUE));
// 添加超鏈標簽 CMFCRibbonPanel* pPanel3 = pCategory->AddPanel(_T( "Hyperlink" ));
// 寫mail給我啊 pPanel3->Add( new CMFCRibbonLinkCtrl(ID_RIBBON_OBTN_2, _T( "Send e-mail" ), _T( "mailto:chenlq@live.com" ))); // 歡迎訪問我的blog pPanel3->Add( new CMFCRibbonLinkCtrl(ID_RIBBON_OBTN_3, _T( "Visit site" ), _T( "http://space.itpub.net/17237043/" )));
pPanel3->Add( new CMFCRibbonLinkCtrl(ID_RIBBON_OBTN_4, _T( "Launch Notepad" ), _T( "notepad" )));
// 滑動條 CMFCRibbonPanel* pPanel4 = pCategory->AddPanel(_T( "Sliders" ));
pPanel4->SetCenterColumnVert();
pPanel4->Add( new CMFCRibbonLabel(_T( "Simple Slider:" ))); pPanel4->Add( new CMFCRibbonSlider(ID_RIBBON_OBTN_5, 70 /* Slider width */ ));
pPanel4->Add( new CMFCRibbonSeparator());
pPanel4->Add( new CMFCRibbonLabel(_T( "Slider with Buttons:" ))); CMFCRibbonSlider* pBtn6 = new CMFCRibbonSlider(ID_RIBBON_OBTN_6, 70 /* Slider width */ ); // 設置縮放按鈕 pBtn6->SetZoomButtons();
pBtn6->SetRange(0, 100); pBtn6->SetPos(50);
pPanel4->Add(pBtn6);
// 進度條 CMFCRibbonPanel* pPanel5 = pCategory->AddPanel(_T( "Progress Bars" ));
pPanel5->SetCenterColumnVert();
// 簡單進度條 pPanel5->Add( new CMFCRibbonLabel(_T( "Simple Progress:" )));
pPanel5->Add( new CMFCRibbonProgressBar(ID_RIBBON_OBTN_7, 100 /* Bar width */ )); pPanel5->Add( new CMFCRibbonButton(ID_RIBBON_OBTN_8, _T( "Show Progress 1" )));
pPanel5->Add( new CMFCRibbonSeparator());
pPanel5->Add( new CMFCRibbonLabel(_T( "Infinite Progress:" )));
CMFCRibbonProgressBar* pBtn9 = new CMFCRibbonProgressBar(ID_RIBBON_OBTN_9, 100 /* Bar width */ ); // 設置為無限模式，表示動作在進行，但是沒有明確的進度 pBtn9->SetInfiniteMode(); pPanel5->Add(pBtn9);
pPanel5->Add( new CMFCRibbonButton(ID_RIBBON_OBTN_10, _T( "Show Progress 2" )));
到此為止，我們已經演練了Ribbon界面的大多數控件。通過這些實際代碼的演練，我相信大家現在都可以自信地說：
“I can Ribbon now!”