前面一節(jié)中雞啄米為大家簡(jiǎn)單介紹了如何創(chuàng)建Ribbon樣式的應(yīng)用程序框架，本節(jié)教程就來(lái)初步講講怎樣為Ribbon Bar添加Ribbon控件。
VS2010為Ribbon界面開發(fā)提供了Ribbon Designer，通過它我們可以為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、通過與Home下的按鈕對(duì)比我們發(fā)現(xiàn)，新添加的幾個(gè)按鈕不太美觀，因?yàn)闆]有加圖片。那么怎樣為按鈕加圖片呢？
觀察發(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，也可以通過在選擇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è)按鈕都沒有添加任何事件的響應(yīng)函數(shù)，所以都是灰色的。
這一節(jié)就講到這里了。大家可以試著添加其他控件看看效果。雞啄米謝謝大家的支持。
聯(lián)系客服
