隨著Office 2007的發(fā)布，它改變了以往傳統(tǒng)的下拉式菜單用戶界面，取而代之的是全新的被稱之為“Ribbon”的固定式工具欄界面。微軟聲稱這種新的用戶界面能夠使用戶更容易地使用軟件的各項(xiàng)常用功能，例如Word 2007中的保存，設(shè)置格式，插入圖片等常用功能，都可以從Ribbon界面快速地訪問到，從而提高用戶的生產(chǎn)效率。

　　雖然很多用戶還在抱怨“不習(xí)慣Ribbon界面”、“很多功能找不到位置”等等，但是，隨著微軟的“強(qiáng)制”推行，Ribbon界面也在越來越被人們所接受，很多應(yīng)用軟件也開始采用Ribbon界面。更重要的是，在即將到來的Windows 7中，操作系統(tǒng)本身更是大量地應(yīng)用了Ribbon界面。不管我們?cè)敢饣蛘卟辉敢猓琑ibbon界面開始大張旗鼓地攻占我們的軟件界面，成為繼下拉式菜單后新的標(biāo)準(zhǔn)用戶界面。作為用戶，我們需要逐漸熟悉這種新的軟件用戶界面;而作為開發(fā)者，更是需要了解和認(rèn)識(shí)這種新的軟件用戶界面，新的交互方式，從而利于這種新界面的優(yōu)勢(shì)，為用戶提供更加優(yōu)秀的軟件。

　　“Ribbon來了!”

　　Windows平臺(tái)的進(jìn)化，往往都伴隨著系統(tǒng)圖形界面的重新設(shè)計(jì)。從Windows XP到Windows Vista，最大的革新就是Windows Aero的引入。而在微軟的下一代Windows平臺(tái)Windows 7中，雖然Aero被保留下來，但是Windows 7的圖形用戶界面更多的是朝著Office 2007相同的方向前進(jìn)，無論是系統(tǒng)自帶的工具軟件，例如畫圖、寫字板等，還是上層的第三方應(yīng)用軟件，例如Office 2007、AutoCAD、SnagIt等等，都全面應(yīng)用了Ribbon界面。

　　在傳統(tǒng)的軟件界面設(shè)計(jì)中，我們都是采用“文件”、“編輯”、“視圖”的菜單模式，這儼然成為軟件界面設(shè)計(jì)的標(biāo)準(zhǔn)。但是現(xiàn)實(shí)的情況是，隨著軟件的功能越來越強(qiáng)大，下拉菜單也隨之變得越來越長(zhǎng)，用戶根本不清楚菜單深處到底隱藏著什么重要的功能。這往往意味著用戶要求軟件實(shí)現(xiàn)的功能，其實(shí)軟件早已經(jīng)具有了，只是在菜單中隱藏得比較深，用戶沒有找到而已。越來越長(zhǎng)的菜單的另外一個(gè)弊端是，很多常用的功能被埋沒在眾多的菜單項(xiàng)中，使得用戶在使用常用的功能時(shí)，還需要進(jìn)行多次菜單選擇，這無疑降低了工作效率。為了改變這種現(xiàn)狀，微軟進(jìn)行了大量的研究，在廣泛聽取用戶意見的基礎(chǔ)上，同時(shí)經(jīng)過了嚴(yán)格的可用性測(cè)試，終于在Office 2007中推出了革命性的Ribbon界面。

　　跟傳統(tǒng)的菜單式用戶界面相比較，Ribbon界面的優(yōu)勢(shì)主要體現(xiàn)在如下幾個(gè)方面：

• 所有功能有組織地集中存放，不再需要查找級(jí)聯(lián)菜單、工具欄等等
• 更好地在每個(gè)應(yīng)用程序中組織命令
• 提供足夠顯示更多命令的空間
• 豐富的命令布局可以幫助用戶更容易地找到重要的，常用的功能
• 可以顯示圖示，對(duì)命令的效果進(jìn)行預(yù)覽，例如改變文本的格式等
• 更加適合觸摸屏操作

　　雖然從菜單式界面到Ribbon界面有一個(gè)漫長(zhǎng)的熟悉的過程，但是一個(gè)不爭(zhēng)的事實(shí)是，Ribbon界面正在被越來越多的人接受，相應(yīng)的，越來越多的軟件開發(fā)商開始拋棄傳統(tǒng)的菜單式界面，轉(zhuǎn)而采用Ribbon界面。Visual Studio 2010作為面向下一代Windows平臺(tái)的開發(fā)工具，自然是對(duì)Ribbon界面全面支持。下面我們就來看看如何利于Visual Studio 2010開發(fā)面向Windows 7的Ribbon界面。

　　創(chuàng)建MFC應(yīng)用程序項(xiàng)目　

　　實(shí)際上，Ribbon界面(Office 2007風(fēng)格的界面)的開發(fā)早在2008年就隨著Visual C++ Feature Pack被引入到Visual Studio 2008中。在即將到來的Visual Studio 2010中，Ribbon界面的開發(fā)更是得到了原生的支持，使得Ribbon界面的開發(fā)更加簡(jiǎn)便高效。　　

　　首先，我們啟動(dòng)Visual Studio 2010，創(chuàng)建一個(gè)基于MFC的應(yīng)用程序，項(xiàng)目模板我們選擇“MFC Application”：

創(chuàng)建MFC應(yīng)用程序

　　在接下來的“MFC應(yīng)用程序向?qū)?rdquo;中，我們就可以對(duì)項(xiàng)目的可視化風(fēng)格進(jìn)行選擇和配置。Visual Studio 2010支持MFC風(fēng)格、標(biāo)準(zhǔn)的Windows風(fēng)格，Visual Studio 2005風(fēng)格和Office 2007風(fēng)格。而這里的Office 2007風(fēng)格，就是我們要?jiǎng)?chuàng)建的Ribbon界面：

設(shè)置Ribbon界面風(fēng)格

在接下來的向?qū)ы?yè)中，我們可以選擇命令欄(工具欄。菜單欄)的樣式，這里我們當(dāng)然選擇“Use a ribbon”了。當(dāng)然，為了跟舊有的系統(tǒng)保持兼容，Visual Studio 2010也支持傳統(tǒng)的命令式界面，如果你的用戶比較保守，想繼續(xù)使用傳統(tǒng)的菜單式界面，我們可以選擇“Use a menu bar and toolbar”:

選擇命令欄的風(fēng)格

　　為了支持豐富的Office 2007界面風(fēng)格，MFC默認(rèn)情況下為MFC文檔應(yīng)用程序添加了類似Outlook風(fēng)格的導(dǎo)航面板(Navigation pane)和標(biāo)題條(Caption bar)。這兩者并不是我們關(guān)注的重點(diǎn)，為了更好的展示Ribbon界面，我們這里就去掉這兩個(gè)多余的面板：

去掉多余的界面元素

　　到這里，針對(duì)新項(xiàng)目的設(shè)置就完成了，點(diǎn)擊“Finish”按鈕關(guān)閉應(yīng)用程序向?qū)В琕isual Studio 2010就會(huì)按照我們的設(shè)置創(chuàng)建相應(yīng)的MFC應(yīng)用程序解決方案。編譯運(yùn)行這個(gè)解決方案，我們就得到了第一個(gè)具有Ribbon界面的應(yīng)用程序。

第一個(gè)Ribbon界面應(yīng)用程序

　　Ribbon界面的構(gòu)成

　　為了支持新的界面風(fēng)格的開發(fā)，MFC提供了很多新的、經(jīng)過擴(kuò)展過后的應(yīng)用程序類，界面類等。例如在我們的實(shí)例程序中用到的CRibbonApp，CMainFrame就是分別從CWinAppEx，CMDIFrameWndEx派生的。而CWinAppEx和CMDIFrameWndEx又是從傳統(tǒng)的CWinApp和CMDIFrameWnd派生，在原有類的基礎(chǔ)上，添加了對(duì)新的界面風(fēng)格的支持。
熟悉MFC界面開發(fā)的朋友都知道，應(yīng)用程序的CMainFrame類負(fù)責(zé)整個(gè)主框架界面的創(chuàng)建和管理，在傳統(tǒng)的菜單式界面下，它負(fù)責(zé)創(chuàng)建和管理菜單欄，狀態(tài)欄，工具欄等。同樣的，在Ribbon界面下，它同樣負(fù)責(zé)Ribbon界面的創(chuàng)建和管理。

　　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類包含了三個(gè)成員變量：m_wndRibbonBar、m_MainButton、m_wndStatusBar，分別用于控制Ribbon界面的命令面板，應(yīng)用程序按鈕和狀態(tài)欄。清楚了各個(gè)變量對(duì)應(yīng)的Ribbon界面元素后，我們就可以操作相應(yīng)的成員變量，在Ribbon界面上添加我們需要的內(nèi)容。

Ribbon界面的構(gòu)成

　　處理菜單資源和消息響應(yīng)函數(shù)

　　Ribbon界面相對(duì)于傳統(tǒng)的菜單式界面，最大的差別就是用新的Ribbon Bar代替了傳統(tǒng)的菜單欄。我們可以看到，在默認(rèn)情況下，Ribbon Bar已經(jīng)擁有了一個(gè)名為“Home”的命令分組(Category)，其中又包含了多個(gè)面板(Panel)，每個(gè)面板中有一個(gè)或者多個(gè)命令按鈕(Ribbon Button)。下面我們就來看看如何在Ribbon Bar上添加一個(gè)新的命令分組，然后在其中添加新的命令按鈕以執(zhí)行相應(yīng)的功能。
按照傳統(tǒng)的菜單式界面的開發(fā)流程，我們總是先編輯菜單資源，然后再創(chuàng)建相應(yīng)的菜單命令消息響應(yīng)函數(shù)，最后再實(shí)現(xiàn)這個(gè)消息響應(yīng)函數(shù)，完成相應(yīng)的任務(wù)。在新的Ribbon界面中，我們還是先要按照這樣的流程，完成菜單資源的編輯，實(shí)現(xiàn)消息響應(yīng)函數(shù)等。所以，我們先打開Visual Studio 2010的資源編輯器，在IDR_RibbonUITYPE菜單資源中添加兩個(gè)新的菜單項(xiàng)。

編輯菜單資源

　　然后，我們分別為這兩個(gè)菜單項(xiàng)添加相應(yīng)的消息響應(yīng)函數(shù)：

添加消息響應(yīng)函數(shù)

　　這里，我們只是演示Ribbon界面的創(chuàng)建，所以我們將這兩個(gè)消息響應(yīng)函數(shù)簡(jiǎn)單地實(shí)現(xiàn)如下：

　　// 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按鈕

　　到現(xiàn)在為止，我們已經(jīng)按照菜單式界面的開發(fā)流程，完成了資源的編輯和消息函數(shù)的實(shí)現(xiàn)。如果這時(shí)我們編譯運(yùn)行解決方案，我們?cè)诔绦蚪?面上看不到任何變化，因?yàn)槲覀冞€沒有把這些命令綁定到Ribbon Bar的命令按鈕上。在CMainFrame類中，它提供了一個(gè)專門的函數(shù)CMainFrame::InitializeRibbon()來完成Ribbon界面的初始化工作，所以，我們?cè)谶@個(gè)函數(shù)中添加如下代碼，創(chuàng)建新的命令分組，然后將命令按鈕映射到我們剛剛創(chuàng)建的菜單項(xiàng)。

　　void CMainFrame::InitializeRibbon(){
BOOL bNameValid;
///…
//////////////////////////////////////////////////////////////
// 添加一個(gè)命令分組(Category)“RibbonUI Category”
CMFCRibbonCategory *pRibbonUICategory =
m_wndRibbonBar.AddCategory(_T("RibbonUI Category"),
IDB_WRITESMALL, IDB_WRITELARGE);
// 添加一個(gè)面板(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()函數(shù)，添加了一個(gè)新的命令分組(Category)，也就是Ribbon Bar上的一個(gè)新的標(biāo)簽頁(yè)。然后，我們?cè)谶@個(gè)新創(chuàng)建的標(biāo)簽頁(yè)中，添加了一個(gè)新的面板(Panel)。最后，我們創(chuàng)建了三個(gè)Ribbon命令按鈕(CMFCRibbonButton)，并將它們放置到面板中。通過指定跟菜單資源中的菜單項(xiàng)相同的資源ID，我們將這些Ribbon命令按鈕跟我們之前創(chuàng)建的菜單項(xiàng)一一對(duì)應(yīng)起來。當(dāng)我們點(diǎn)擊某個(gè)Ribbon命令按鈕時(shí)，就會(huì)執(zhí)行相應(yīng)的菜單命令響應(yīng)函數(shù)。這樣，我們就實(shí)現(xiàn)了菜單命令在Ribbon Bar的綁定，同時(shí)在界面上也能看到我們剛剛添加的命令按鈕了。

新創(chuàng)建的命令按鈕

　　在這里，我們只是簡(jiǎn)單地向大家介紹了Ribbon界面的基本概念和大致的開發(fā)流程，要想開發(fā)跟Office 2007一樣專業(yè)的Ribbon界面，我們還有很長(zhǎng)的一段路要走。