MFC Ribbon界面設計


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

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

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

看到它與默認Ribbon樣式的區別:

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

那到底怎么實現呢?

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

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

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

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

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

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

1.制作工具欄BitMap

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

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

 看到木有,跟程序默認生成的幾個位圖很像啊,內牛滿面啊

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

2.修改Ribbon內的按鈕圖標

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

然后修改面板中的按鈕屬性,在Large Images屬性選項中選擇一個合適的圖標即可

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

3.實現下拉菜單

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

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

我做出來的界面如下所示

4.將按鈕ID和菜單上的ID匹配

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

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

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

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

HICON m_hIcon;
m_hIcon = AfxGetApp()->LoadIcon(IDI_HAHA);
SetIcon(m_hIcon, TRUE); // Set small icon
//SetIcon(m_hIcon, FALSE); // Set big icon

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM