MFC界面開發(fā)必備庫(kù)：

• Xtreme Toolkit Pro：是屢獲殊榮的VC界面庫(kù)，是MFC開發(fā)中最全面界面控件套包，它提供了Windows開發(fā)所需要的11種主流的Visual C++ MFC控件，包括Command Bars、Controls、Chart Pro、Calendar、Docking Pane、Property Grid、Report Control、Shortcut Bar、Syntax Edit、Skin Framework 和Task Panel。
• BCGControlBar：庫(kù)擁有500多個(gè)經(jīng)過(guò)全面設(shè)計(jì)、測(cè)試和充分記錄的MFC擴(kuò)展類。 我們的組件可以輕松地集成到您的應(yīng)用程序中，并為您節(jié)省數(shù)百個(gè)開發(fā)和調(diào)試時(shí)間。

前面一節(jié)中為大家簡(jiǎn)單介紹了如何創(chuàng)建Ribbon樣式的應(yīng)用程序框架，本節(jié)教程就來(lái)初步講講怎樣為Ribbon Bar添加Ribbon控件。

Visual Studio為Ribbon界面開發(fā)提供了Ribbon Designer，通過(guò)它我們可以為Ribbon Bar添加各種Ribbon控件、設(shè)置控件屬性和進(jìn)行界面布局。

Ribbon的界面元素可以分為類別、面板和基本控件（按鈕、文本編輯框等），類別由面板組成，面板又由按鈕、文本編輯框等基本控件組成。

下面以實(shí)例的方式講解Ribbon控件的添加方法和屬性，這樣比較直觀。此實(shí)例還是在上一節(jié)中創(chuàng)建的Example52工程的基礎(chǔ)上進(jìn)行修改。

1、打開Example52工程，在資源視圖Resource View中，展開Example52->Example52.rc->Ribbon，在Ribbon節(jié)點(diǎn)下，我們看到有一個(gè)系統(tǒng)自動(dòng)生成的IDR_RIBBON，雙擊IDR_RIBBON節(jié)點(diǎn)，就可以在中間區(qū)域打開Ribbon Designer，如下圖：

上圖中，Home標(biāo)簽下的整個(gè)界面就是類別，Clipboard和View對(duì)應(yīng)的就是面板，每個(gè)面板都有一些按鈕、復(fù)選框等基本控件。

2、我們要向Ribbon界面中添加控件的話，也需要從Toolbox給出的Ribbon控件列表中選擇控件拖入Ribbon bar。點(diǎn)擊View菜單下的Toolbox，就會(huì)顯示出Toolbox視圖。下圖就是Ribbon Designer的Toolbox：

雖然與以前我們用的Toolbox有些不同，但還是很相似的。上圖的Toolbox中的Category就是類別，Panel就是面板，其他的大部分都是基本控件。

3、在Toolbox中選擇Category拖入Ribbon bar，放到Home類別的后面，可以看到它的默認(rèn)名稱為“Category1”，并且默認(rèn)帶了一個(gè)面板“Panel1”。這里我們選擇“Category1”標(biāo)簽，右鍵點(diǎn)擊“Properties”，在顯示出的屬性頁(yè)中，修改Caption屬性為“Function”。然后選擇“Panel1”面板，以同樣的方法修改其Caption屬性為“Big Button”。

4、接下來(lái)我們?cè)贋椤癋unction”類別添加一個(gè)新面板。在Toolbox中選擇Panel拖到“Function”類別下，放到“Big Button”面板后面，Caption屬性修改為“Small Button”。

5、再往“Big Button”面板中添加一個(gè)按鈕控件。在Toolbox中選擇Button拖入“Big Button”面板中，Caption修改為“Open”。以同樣的方式往“Small Button”面板中添加兩個(gè)按鈕控件，Caption分別修改為“Click”和“Check”。此時(shí)的Ribbon bar如下圖所示：

6、通過(guò)與Home下的按鈕對(duì)比我們發(fā)現(xiàn)，新添加的幾個(gè)按鈕不太美觀，因?yàn)闆](méi)有加圖片。那么怎樣為按鈕加圖片呢？

觀察發(fā)現(xiàn)，Home下的按鈕的圖標(biāo)有兩種：大圖標(biāo)和小圖標(biāo)。實(shí)際上大圖標(biāo)是像素為32×32的圖標(biāo)，小圖標(biāo)是像素為16×16的圖標(biāo)。雞啄米為三個(gè)按鈕制作了兩套圖像序列，每個(gè)圖像序列都由三個(gè)圖標(biāo)組成，第一個(gè)圖像序列由三個(gè)大圖標(biāo)組成，第二個(gè)圖像序列由三個(gè)小圖標(biāo)組成。如下面的兩個(gè)圖：

大圖標(biāo)(newicons-32.bmp)

小圖標(biāo)(newicons-16.bmp)

要得到這樣的圖像序列，可以先找到每個(gè)圖標(biāo)，然后使用IconWorkshop等工具制作成圖像序列即可。

將兩個(gè)圖片都復(fù)制到目錄...\Example52\Example52\res下，然后在工程中Resource View資源視圖的Example52.rc->Bitmap上點(diǎn)右鍵，選擇“Add Resource”，彈出Add Resource對(duì)話框，在Add Resource對(duì)話框左側(cè)的樹中選擇“Bitmap”，然后點(diǎn)擊“Import”按鈕，選擇newicons-32.bmp文件后就成功導(dǎo)入了大圖標(biāo)文件，ID默認(rèn)為IDB_BITMAP1。以同樣的方式導(dǎo)入小圖標(biāo)文件newicons-16.bmp，ID默認(rèn)為IDB_BITMAP2。

 在“Function”類別的屬性頁(yè)中可以看到有Large Images和Small Images兩個(gè)屬性，它們就是用來(lái)設(shè)置本類別下控件所要使用的大圖標(biāo)序列和小圖標(biāo)序列的。這里我們將Large Images屬性設(shè)為IDB_BITMAP1，Small Images屬性設(shè)為IDB_BITMAP2。

然后我們?yōu)镺pen按鈕設(shè)置圖片。在Open按鈕的屬性頁(yè)中有Image Index和Large Image Index兩個(gè)屬性，分別是其小圖標(biāo)在小圖標(biāo)序列中的索引和其大圖標(biāo)在大圖標(biāo)序列中的索引，這里我們?cè)O(shè)置其圖標(biāo)為大圖標(biāo)，且為大圖標(biāo)序列中的第一個(gè)，那么直接設(shè)置Large Image Index屬性為0，也可以通過(guò)在選擇Large Image Index屬性的編輯框后出現(xiàn)的瀏覽按鈕上點(diǎn)擊，彈出Image Collection對(duì)話框來(lái)選擇圖標(biāo)。

再為Click按鈕和Check按鈕設(shè)置小圖標(biāo)。將Click按鈕的Image Index屬性設(shè)置為1，Large Image Index屬性仍為-1，Check按鈕的Image Index屬性設(shè)置為2，Large Image Index屬性也保持為-1。

7、編譯運(yùn)行程序，最終界面的Function類別視圖如下：

因?yàn)樯鲜鋈齻€(gè)按鈕都沒(méi)有添加任何事件的響應(yīng)函數(shù)，所以都是灰色的。

這一節(jié)就講到這里了。大家可以試著添加其他控件看看效果。