天天看點

MFC Ribbon界面設計

 Ribbon是類似于office2007樣式的界面,它替代了傳統的MFC程式裡的菜單和工具欄

  MFC預設生成的Ribbon功能少,需要我們自己添加一些控件和圖檔等元素使界面好看

  看下面的一個界面,是VC2010示例裡的

MFC Ribbon界面設計

  看到它與預設Ribbon樣式的差別:

  工具自己設計,MFC提供的Ribbon控件基本都用上了;圖檔(位圖)也是原資源沒有的

  那到底怎麼實作呢?

  可以注意到的是:類别由面闆組成,面闆由按鈕或文本編輯框或進度條等控件組成

  按鈕都是有圖檔和文字組成,按鈕通過按鈕集合可以産生類似于下拉菜單的作用

  觀察這些按鈕,可以發現有兩類:小圖示的按鈕和大圖示的按鈕

  小圖示:像素16×16,32位

  大圖示:像素32×32,32位

  關鍵問題是如何制作這些BitMap以及如何将他們加載到Ribbon界面中。

  1. 制作工具欄BitMap

  在網上找了IconWorkshop這個軟體,很好用,可以制作icon圖示,也可以用多個icon圖示制作位圖BitMap。這正是我想要的功能

  自己不會美工,是以在網上找了些素材,做了以下一個工具欄樣的32×32像素32位的BitMap

MFC Ribbon界面設計

  看到木有,跟程式預設生成的幾個位圖很像啊,内牛滿面啊

  将這個位圖加載到資源中,ID改為IDB_BIG

  2. 修改Ribbon内的按鈕圖示

  首先,修改類别屬性,Large Images和Small Images,Large Images就是大圖示,Small Images是小圖示。在Large Images中的下拉菜單中選擇IDB_BIG

  然後修改面闆中的按鈕屬性,在Large Images屬性選項中選擇一個合适的圖示即可

  小圖示也是一樣的道理,修改各自Small Images屬性即可

  3. 實作下拉菜單

  按鈕屬性中有個行為的屬性,在裡面添加相應的菜單(或間隔符)即完成了類似下拉菜單

  還有一些快捷方式的按鍵(兩個向下的箭頭、最左上角的圖示按鈕)也可以設定它們的功能項

  我做出來的界面如下所示

MFC Ribbon界面設計

  4. 将按鈕ID和菜單上的ID比對

  Ribbon中的菜單ID是不能自己設定的,必須綁定在某個菜單上,對菜單的事件響應就是對響應的Ribbon上按鈕的響應,是以按了Ribbon界面上的某個按鈕就等同于按鈕對應的某個菜單

  是以必須将菜單欄也制作完整,給其添加事件消息,将Ribbon中按鈕的ID改為對應菜單的ID。菜單不在界面中顯示出來不代表它就沒用,沒它還不行,不知道以後能不能擺脫菜單直接在Ribbon按鈕上添加事件。

  5. 修改最小化工具欄上的圖示

  上圖雖然修改了左上角的按鈕圖示,但是電腦工具欄上還是現實的MFC圖示,使用下面代碼進行修改

C++代碼

HICON m_hIcon;  

m_hIcon = AfxGetApp()->LoadIcon(IDI_HAHA);  

SetIcon(m_hIcon, TRUE); // Set small icon  

//SetIcon(m_hIcon, FALSE); // Set big icon