MFC Ribbon介面設計

2021-08-03 05:45:32 字數 1606 閱讀 9324

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圖示,使用下面**進行修改

UI介面設計 介面設計流程

人類社會逐步向非物質社會邁進,網際網路資訊產業已經走入我們的生活。在這樣乙個非物質社會中,與軟體這些非物質產品再也不象過去那樣緊緊靠技術就能處於不敗之地。工業設計開始關注非物質產品。但是在國內依然普遍存在這樣乙個稱呼 美工 工 的意思就是沒有思想緊緊靠體力工作的人。這是乙個很愚昧的做法,愚昧在於稱呼...

MFC Ribbon 使用者介面

visual studio 2010 mfc ribbon 使用者介面 新增windows7樣式,操作方便,效果也很漂亮。但在透明圖標的製作卻讓初學者頭疼。使用普通的bmp點陣圖做圖示背景不透明,很難看。其實ribbon上用的圖示是32位的點陣圖序列,包含alpha通道。visual studio ...

介面設計定理

介面設計定理 模組分解原理探索 模組分解原理與三權分立 介面關係穩定原理探索 前面幾篇文章中講過模組分解原理和介面關係穩定原理,這篇文章中將使用模組分解原理和介面關係穩定原理來推導乙個重要的定理 介面設計定理。在講解介面設計定理前,先看一下robert c.martin著的 敏捷軟體開發 一書中提到...