MFC - Ribbon学习

Ribbon学习 - VC工具栏图标制作与选择

office分格的Ribbon工具栏比WindowsXP分格工具栏漂亮很多。现在开发一个程序Ribbon风格（基于单文档）的程序，由于没接触过走了不少弯路，记录一下备忘。

操作系统

• Windows 10
• visual studio 2022 （MFC）
• WPS图片（图片工具箱 - 格式转换）
• TBCreator（VC工具栏拼接工具）

创建Ribbon风格工具栏

1. 创建MFC项目，省略创建过程。注意，选择“使用功能区”（Ribbon分格工具栏）。
   

2. Ribbon工具栏的特点
   Ribbon工具栏就是一个窗口，可以用窗口工具进行添加控件（类似于对话框工具）；
   控件的从属关系如下：

• Ribbon工具栏
  • 类别
    • 面板
      • 其他控件（按钮、标签、编辑…）

如下图：

最让我喜欢的是，可以为Ribbon工具栏中的各项添加对应的icon图标；但是由于知识欠缺，添加方法着实让我摸索了很久。

3. Ribbon工具栏内的按钮添加图标（大图标、小图标）

说明：

• 首先要明确Ribbon工具栏使用的图标并非单个图标，而是一个图标拼合图，并且该拼合图需要导入资源管理器。如下图：
  
• 该图标拼合图使用VS自带的编辑器无法生成（VS自带的编辑器能编辑单个图标图像，也可以编辑图标串图像，但是不能将单个图标图像拼合为一个新的图标串图像）。因此需要使用外部工具TBCreator（VC工具栏拼接工具），将单个图标图像拼合成一个图标串图像。
  注意：VS工具手动拼合的图标串无法使用，可能是图标边界无法确定。
• Ribbon可以使用的图标尺寸为32x32（大图标）和16x16（小图标）
• 先为Ribbon工具栏的“类别”（属性页）选择大图标串图像和小图标串图像
• 再为其内部控件（属性页）选择对应的图标（大图标或者小图标）

VS工具栏图标串图像制作过程：

1. 下载图标，并保存图标

免费下载图标网址：https://www.flaticon.com
该网站为国外网站，下载需要收费。我直接在喜欢的图标上右键->图片另存为保存了图标。保存格式为.png

2. 将png格式图标转为icon

使用 WPS图片 -> 图片工具箱 -> 格式转换 -> 批量图像转换，将png图标转为32x32 icon 图标。完毕后，再将png图标转为16x16 icon 图标。
之所以需要转换2次，因为TBCreator（VC工具栏拼接工具）无法使用多种尺寸组合的icon图标。

3.将icon拼合为VC工具栏所需的bmp图标串图像

注意：32x32 icon 和 16x16 icon 需要单独拼合。

4.VS资源管理器 - Bitmap项添加2个新工具栏图像

5.Ribbon工具栏 -> 类别 -> 属性页 -> 选择大图像、小图像

6.为控件选择大图像索引或小图像索引

Ribbon工具栏图标添加完毕。