MFC入门之 Ribbon界面设计

article/2025/9/20 10:43:21

Ribbon是类似于office2007样 式的界面,它替代了传统的MFC程序里的菜单和工具栏MFC默认生成的Ribbon功能少,需要我们自己添加一些控件和图片等元素使界面好看。看下面的一个界面,是示例里的

MFC Ribbon界面设计

  看到它与默认Ribbon样式的区别:

  工具自己设计,MFC提供的Ribbon控件基本都用上了;图片(位图)也是原资源没有的

  那到底怎么实现呢?

  可以注意到的是:类别由面板组成,面板由按钮或文本编辑框或进度条等控件组成

  按钮都是有图片和文字组成,按钮通过按钮集合可以产生类似于下拉菜单的作用

  观察这些按钮,可以发现有两类:小图标的按钮和大图标的按钮

  小图标:像素16×16,32位

  大图标:像素32×32,32位

  关键问题是如何制作这些BitMap以及如何将他们加载到Ribbon界面中。

有两个方法:一是自己动手制作,二是利用现成的组件ToolKit Pro,BCGControlBar,QitanRibbon后文会有详细介绍!

 一、 制作工具栏BitMap

  在网上找了IconWorkshop这个软件,很好用,可以制作icon图标,也可以用多个icon图标制作位图BitMap。这正是我想要的功能

  自己不会美工,所以在网上找了些素材,做了以下一个工具栏样的32×32像素32位的BitMap

MFC Ribbon界面设计

  看到木有,跟程序默认生成的几个位图很像啊,内牛满面啊

  将这个位图加载到资源中,ID改为IDB_BIG

   修改Ribbon内的按钮图标

  首先,修改类别属性,Large Images和Small Images,Large Images就是大图标,Small Images是小图标。在Large Images中的下拉菜单中选择IDB_BIG

  然后修改面板中的按钮属性,在Large Images属性选项中选择一个合适的图标即可

  小图标也是一样的道理,修改各自Small Images属性即可

实现下拉菜单

  按钮属性中有个行为的属性,在里面添加相应的菜单(或间隔符)即完成了类似下拉菜单

  还有一些快捷方式的按键(两个向下的箭头、最左上角的图标按钮)也可以设置它们的功能项

  我做出来的界面如下所示

MFC Ribbon界面设计

   将按钮ID和菜单上的ID匹配

  Ribbon中的菜单ID是不能自己设置的,必须绑定在某个菜单上,对菜单的事件响应就是对响应的Ribbon上按钮的响应,所以按了Ribbon界面上的某个按钮就等同于按钮对应的某个菜单

  所以必须将菜单栏也制作完整,给其添加事件消息,将Ribbon中按钮的ID改为对应菜单的ID。菜单不在界面中显示出来不代表它就没用,没它还不行,不知道以后能不能摆脱菜单直接在Ribbon按钮上添加事件。

   修改最小化工具栏上的图标

  上图虽然修改了左上角的按钮图标,但是电脑工具栏上还是现实的MFC图标,使用下面代码进行修改

C++代码

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

二、利用组件

在平时练习的时候我们可以自己手动进行,但是一旦接受一些项目,应用程序开发等,对界面的要求就会高出许多。这时候就有必要借助这些“半成品”实现界面美化提升效率。这里简单介绍一下,具体可点进去查看每个的详情以及教程,案例!

Toolkit Pro

Codejock软件公司的Xtreme Toolkit Pro是屡获殊荣的VC界面库,是MFC开发中最全面界面控件套包,它提供了Windows开发所需要的11种主流的Visual C++ MFC控件,包括Command Bars、Controls、Chart Pro、Calendar、Docking Pane、Property Grid、Report Control、Shortcut Bar、Syntax Edit、Skin Framework 和Task Panel。(点这下载)

BCGControlBar

BCGControlBar ("Business Components Gallery ControlBar")是MFC扩展库,使您可以创建具有完全自定义选项(功能区、可自定义工具栏、菜单等)以及一组专业设计的丰富Microsoft Office和Microsoft Visual Studio的应用程序 GUI控件,例如图表、日历、网格、编辑器、甘特图和许多其他控件。
BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。可以轻松地集成到你的应用程序中,并为你节省数百个开发和调试时间。(点这下载)

QtitanRibbon:

QtitanRibbon是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。

本文转载自:鸡啄米


http://chatgpt.dhexx.cn/article/oIoOAXYk.shtml

相关文章

DevExpress 设计Ribbon界面

Ribbon上包含以下一些元素,如图所示: 元素对应API: Element Ribbon API Quick Access ToolbarRibbonControl.Toolbar RibbonQuickAccessToolbar.ItemLinksApplication ButtonRibbonControl.ShowApplicationButton RibbonControl.Application…

Ribbon界面1

收费工具,一百大洋。学生党勿扰。 1 概述 应客户要求,写了一个Ribbon风格的界面。 2 截图

Ribbon界面2

1 概述 Qt实现的Ribbon界面。 2 截图 office2003风格 office2003风格 office2005风格 office2005风格 office2013风格

Ribbon界面开发(C++)

一.简介 Ribbon:固定式工具栏界面,能够使用户更容易地使用 软件的各项常用功能,例如Word 2007中的保存,设置格式,插入图片等常用功能,都可以从Ribbon界面快速地访问到,从而提高用户的生产效率 二.项目创建 1&#x…

Ribbon界面介绍

http://hi.baidu.com/hoping/item/b257e10e99ed7312cd34ea1d Ribbons Ribbon是现代化的方式帮助用户高效和直接的查找、理解和使用工具命令——通过最少的点击,减少从“尝试-错误”(trainl-and-error)方式中恢复操作,寻找新的操作…

C#编程--ribbon界面介绍

1.梗概 最近在做一个编辑器,刚开始做两天,C#新手。觉得ribbon界面非常好看,不过网上资料非常之少。今天把这两天所学的做一下总结:一是希望能给后来者缩短入门时间。二是对这几天所做的内容进行汇总。(内容可能会有繁…

zz:保护眼睛的颜色和各种背景颜色设置方法

zz: http://tiaozhanshu.com/others/color-for-eye-protection/ 眼睛最近又疼了,无论远近都看不清楚。以前出现这种情况去医院查,医生还说我已经过了得近视的年纪,就算受到一般的刺激也不容易发生病变了。但是长期对着电脑最怕看见…

护眼色(RGB值)

为什么80%的码农都做不了架构师?>>> 护眼色:类似于绿豆沙的颜色; 色调:85;饱和度:123;亮度:205, R: 199; G: 237; B:204; 转载于:htt…

win10窗口设置眼睛保护色

经常电脑前坐着,习惯了豆沙色窗口(据说保护眼睛); 目标 记事本,ide,office等窗口颜色豆沙色;如下图 步骤 打开注册表:winr 运行“regedit”;依次打开[HKEY_CURRENT_USE…

win10 如何设置眼睛保护色(绿色)

按WindowsR打开运行窗口 3 输入Regedit进入注册表编辑器。 4 进入计算机\HKEY_CURRENT_USER\Control Panel\Colors找到window 5 双击打开窗口。 6 将数值改成 204 232 207 点击确定。 7 重启电脑,打开系统窗口即可看到背景成绿色了。

设置电脑眼睛保护色 多种颜色可选!

绿豆沙色能有效的减轻长时间用电脑的用眼疲劳! 色调:85,饱和度:123,亮度:205; RGB颜色红:199,绿:237,蓝:204; 十六进制颜色…

电脑眼睛保护色设置

眼科医生建议电脑屏幕不要用白色,因为白色对眼睛的刺激是最大的,最损伤视力! 眼科医生推荐的颜色是柔和的淡绿色,也有人叫做绿豆沙色。 按HSU 设置为: 色度(HUE): 85 饱和度(SAT): 123 亮度…

保护眼睛的颜色和各种背景颜色设置方法(转)

保护眼睛的颜色 现代人几乎每天都离不开电脑。在工作、娱乐、交友、购物,甚至在买卖股票的过程中,电脑都是我们的好帮手。但是,电脑的辐射多对眼睛的伤害很大,而许多应用软件的背景,尤其是网页的底色通常被设定为白色…

配置护眼颜色

配置护眼颜色如下: 色调:85;饱和度:123;亮度:205, R: 199 ; G:237;B:204。如下图所示: R:204 G:232 B:207。3、电脑设置护眼模式方式…

安卓手机解锁:Device is locked. Please unlock the device first

Device is locked. Please unlock the device first 在安卓P的手机上如果adb remount 不上手机并且报如上的错的话,就需要对手机进行解锁。 1.首先需要打开开发者模式中的OEM unlocking开关 2.adb reboot bootloader 3.fastboot flashing unlock 4.fastboot getva…

IP is locked 的解决办法 Vivado

IP is locked (IP核被锁定) 发生IP核锁定,一般是Vivado版本不同导致的,当用新版本打开老版本的project时,会出现下面IP核被锁的情况,下面介绍两种方法解决IP核被锁的方法: IP is locked 的解…

svn locked 怎么解决

导致原因:更新代码时候,强制终止 解决方法: 回到SVN文件夹的根目录。如图操作: 点击ok就好了。

Oracle账户被锁:the account is locked

Oracle账户被锁:the account is locked 小编同学今天在和小伙伴们安装Oracle数据库时,出现了几个比较常见的问题,比如:scott账户未解锁:ERROR:ORA-28000:the account is locked。 错误描述 1.在Oracle中&#xff…

PLL中的locked信号解析

转自:http://www.360doc.com/content/13/0509/20/9072830_284220258.shtml 今天对PLL中areset和locked详细查了下资料,发现网上这方面的资料很少,所以自己认真读了下Documentation---ug_altpll.pdf,现在我将我学到的内容总结如下:…

sqlite中的 database is locked 问题

最近写产品用到了sqlite3作为单机数据库,碰到一个挺有意思的问题。需求大体是两张表,查询需要连表查询,更新也需要连表更新;总共只有几百条数据,但运行过程中出现明显的超时和异常,以为是sqlite有问题&…