前面一節中雞啄米為大家簡單介紹了如何創建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,如下圖:

Ribbon Designer

       上圖中,Home標簽下的整個界面就是類別,Clipboard和View對應的就是面板,每個面板都有一些按鈕、復選框等基本控件。

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

Ribbon 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如下圖所示:

Ribbon bar添加控件

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

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

Ribbon大圖標序列

大圖標(newicons-32.bmp)

Ribbon小圖標序列

小圖標(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類別視圖如下:

Ribbon界面

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

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

除非特別注明,雞啄米文章均為原創
轉載請標明本文地址:http://www.vkzldl.live/software/253.html
2012年10月21日
作者:雞啄米 分類:軟件開發 瀏覽: 評論:14