VS2010/MFC編程入門之五十三（Ribbon介面開發：為Ribbon Bar添加控制項）[轉]

標籤：

http://www.jizhuomi.com/software/253.html

    前面一節中雞啄米為大家簡單介紹了如何建立Ribbon樣式的應用程式架構，本節教程就來初步講講怎樣為Ribbon Bar添加Ribbon控制項。

       VS2010為Ribbon介面開發提供了Ribbon Designer，通過它我們可以為Ribbon Bar添加各種Ribbon控制項、設定控制項屬性和進行介面布局。

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

       雞啄米以執行個體的方式講解Ribbon控制項的添加方法和屬性，這樣比較直觀。此執行個體還是在上一節中建立的Example52工程的基礎上進行修改。

       1、開啟Example52工程，在資源檢視Resource View中，展開Example52->Example52.rc->Ribbon，在Ribbon節點下，我們看到有一個系統自動產生的 IDR_RIBBON，雙擊IDR_RIBBON節點，就可以在中間地區開啟Ribbon Designer，如：

       中，Home標籤下的整個介面就是類別，Clipboard和View對應的就是面板，每個面板都有一些按鈕、複選框等基本控制項。

       2、我們要向Ribbon介面中添加控制項的話，也需要從Toolbox給出的Ribbon控制項列表中選擇控制項拖入Ribbon bar。點擊View菜單下的Toolbox，就會顯示出Toolbox視圖。就是Ribbon Designer的Toolbox：

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

       3、在Toolbox中選擇Category拖入Ribbon bar，放到Home類別的後面，可以看到它的預設名稱為“Category1”，並且預設帶了一個面板“Panel1”。這裡我們選擇 “Category1”標籤，右鍵點擊“Properties”，在顯示出的屬性頁面中，修改Caption屬性為“Function”。然後選擇 “Panel1”面板，以同樣的方法修改其Caption屬性為“Big Button”。

       4、接下來我們再為“Function”類別添加一個新面板。在Toolbox中選擇Panel拖到“Function”類別下，放到“Big Button”面板後面，Caption屬性修改為“Small Button”。

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

       6、通過與Home下的按鈕對比我們發現，新添加的幾個按鈕不太美觀，因為沒有加圖片。那麼怎樣為按鈕加圖片呢？

       觀察發現，Home下的按鈕的表徵圖有兩種：大表徵圖和小表徵圖。實際上大表徵圖是像素為32×32的表徵圖，小表徵圖是像素為16×16的表徵圖。雞啄米為三個按鈕製作了兩套映像序列，每個映像序列都由三個表徵圖組成，第一個映像序列由三個大表徵圖組成，第二個映像序列由三個小表徵圖組成。如下面的兩個圖：

大表徵圖(newicons-32.bmp)

小表徵圖(newicons-16.bmp)

       要得到這樣的映像序列，可以先找到每個表徵圖，然後使用IconWorkshop等工具製作成映像序列即可。

       將兩個圖片都複製到目錄...\Example52\Example52\res下，然後在工程中Resource View資源檢視的Example52.rc->Bitmap上點右鍵，選擇“Add Resource”，彈出Add Resource對話方塊，在Add Resource對話方塊左側的樹中選擇“Bitmap”，然後點擊“Import”按鈕，選擇newicons-32.bmp檔案後就成功匯入了大表徵圖文 件，ID預設為IDB_BITMAP1。以同樣的方式匯入小表徵圖檔案newicons-16.bmp，ID預設為IDB_BITMAP2。

       在“Function”類別的屬性頁面中可以看到有Large Images和Small Images兩個屬性，它們就是用來設定本類別下控制項所要使用的大表徵圖序列和小表徵圖序列的。這裡我們將Large Images屬性設為IDB_BITMAP1，Small Images屬性設為IDB_BITMAP2。

       然後我們為Open按鈕設定圖片。在Open按鈕的屬性頁面中有Image Index和Large Image Index兩個屬性，分別是其小表徵圖在小表徵圖序列中的索引和其大表徵圖在大表徵圖序列中的索引，這裡我們設定其表徵圖為大表徵圖，且為大表徵圖序列中的第一個，那麼直接設定Large Image Index屬性為0，也可以通過在選擇Large Image Index屬性的編輯框後出現的瀏覽按鈕上點擊，彈出Image Collection對話方塊來選擇表徵圖。

       再為Click按鈕和Check按鈕設定小表徵圖。將Click按鈕的Image Index屬性設定為1，Large Image Index屬性仍為-1，Check按鈕的Image Index屬性設定為2，Large Image Index屬性也保持為-1。

       7、編譯運行程式，最終介面的Function類別視圖如下：

       因為上述三個按鈕都沒有添加任何事件的響應函數，所以都是灰色的。

       這一節就講到這裡了。大家可以試著添加其他控制項看看效果。雞啄米謝謝大家的支援。

VS2010/MFC編程入門之五十三（Ribbon介面開發：為Ribbon Bar添加控制項）[轉]