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

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

　　“Ribbon來了!”

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

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

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

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

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

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

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

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

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

　　在接下來的“MFC應(yīng)用程序向?qū)?rdquo;中，我們就可以對項目的可視化風(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)格，就是我們要創(chuàng)建的Ribbon界面：

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

在接下來的向?qū)ы撝校覀兛梢赃x擇命令欄(工具欄。菜單欄)的樣式，這里我們當(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)注的重點，為了更好的展示Ribbon界面，我們這里就去掉這兩個多余的面板：

去掉多余的界面元素

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

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

　　Ribbon界面的構(gòu)成

　　為了支持新的界面風(fēng)格的開發(fā)，MFC提供了很多新的、經(jīng)過擴(kuò)展過后的應(yīng)用程序類，界面類等。例如在我們的實例程序中用到的CRibbonApp，CMainFrame就是分別從CWinAppEx，CMDIFrameWndEx派生的。而CWinAppEx和CMDIFrameWndEx又是從傳統(tǒng)的CWinApp和CMDIFrameWnd派生，在原有類的基礎(chǔ)上，添加了對新的界面風(fēng)格的支持。
熟悉MFC界面開發(fā)的朋友都知道，應(yīng)用程序的CMainFrame類負(fù)責(zé)整個主框架界面的創(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類包含了三個成員變量：m_wndRibbonBar、m_MainButton、m_wndStatusBar，分別用于控制Ribbon界面的命令面板，應(yīng)用程序按鈕和狀態(tài)欄。清楚了各個變量對應(yīng)的Ribbon界面元素后，我們就可以操作相應(yīng)的成員變量，在Ribbon界面上添加我們需要的內(nèi)容。

Ribbon界面的構(gòu)成

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

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

編輯菜單資源

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

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

　　這里，我們只是演示Ribbon界面的創(chuàng)建，所以我們將這兩個消息響應(yīng)函數(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ù)的實現(xiàn)。如果這時我們編譯運(yùn)行解決方案，我們在程序界面上看不到任何變化，因為我們還沒有把這些命令綁定到Ribbon Bar的命令按鈕上。在CMainFrame類中，它提供了一個專門的函數(shù)CMainFrame::InitializeRibbon()來完成Ribbon界面的初始化工作，所以，我們在這個函數(shù)中添加如下代碼，創(chuàng)建新的命令分組，然后將命令按鈕映射到我們剛剛創(chuàng)建的菜單項。

　　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()函數(shù)，添加了一個新的命令分組(Category)，也就是Ribbon Bar上的一個新的標(biāo)簽頁。然后，我們在這個新創(chuàng)建的標(biāo)簽頁中，添加了一個新的面板(Panel)。最后，我們創(chuàng)建了三個Ribbon命令按鈕(CMFCRibbonButton)，并將它們放置到面板中。通過指定跟菜單資源中的菜單項相同的資源ID，我們將這些Ribbon命令按鈕跟我們之前創(chuàng)建的菜單項一一對應(yīng)起來。當(dāng)我們點擊某個Ribbon命令按鈕時，就會執(zhí)行相應(yīng)的菜單命令響應(yīng)函數(shù)。這樣，我們就實現(xiàn)了菜單命令在Ribbon Bar的綁定，同時在界面上也能看到我們剛剛添加的命令按鈕了。

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

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