杰瑞Ribbon设计器¶

前言¶

为什么给大家分享这个工具呢，在教学EXCEL的几年时间里，总发现大家做EXCEL有自己的想法，但是苦于实现，苦于封装，比如自己做了一个非常好用的功能，要发送给别人用，如果只是把xlsm文件发过去，往往我们会插入一个ActiveX按钮，然后用户点击就能执行，但是问题在于用户只有在打开这个文件后才能操作，不能常驻顶部功能区

因此我们一般会通过加载宏的方式，自己设计Ribbon区，即在 文件→选项→自定义功能区 自己绘制按钮，并进行宏绑定，如下图：

但是上述的问题在于，功能区和顶部的按钮是分离的，当你修改了加载宏xlam文件中的代码后，可能功能区还在，但是点击执行就会报错，因为已经找不到对应的代码了，也就是说功能区和你的加载宏文件是分离的，当你把自己的宏文件发送到别人的电脑上，别人只能看见你的代码，看不见顶部功能区

为了解决上述问题，一系列Ribbon设计的工具应运而生，比如最常见的两款 ribbon xml editor的设计器如下：

上述两款工具非常强大，能解决功能区和代码同时分发的问题，同时支持打开EXCEL预览功能区，方便调试，但是也存在几个比较明显的问题：

xml代码需要自己编写，对于非计算机专业学生/职场人来说，入门并没有那么容易，且容易搞错嵌套关系
预览效果只能通过打开对应的软件进行预览（如EXCEL，WPS等），不能在设计器中看到实时渲染效果
需要自己编写回调事件，对于没有代码基础的伙伴来说，是比较头大的

当然还有更加进阶一些的，比如通过VSTO原生设计，但是对于大多数职场人而言，没有必要为了一个功能区单独学一整套系统

界面介绍¶

为了解决上述问题，我设计了一个具有可视化界面，自动回调，自动生成xml代码的Ribbon设计器，界面如下：

一、顶部功能区¶

下面介绍一下具体按钮的功能：

暗色模式：切换到暗色模式，方便在低光环境下使用
重置示例：软件默认有一个模板样式，重置后会恢复为初始状态如下

导入xlsm/xlam：如果文件之前没有设计过顶部工具栏，则预览区默认是模版，如果你之前已经通过杰瑞Ribbon设计器设计过这个文件，那导入之后会恢复出你之前设计的顶部工具栏效果
Microsoft EXCEL下拉框：可以选择通过微软EXCEL预览或者WPS预览
只看Ribbon Xml 布局下拉框：用于配置文件预览的时候是只显示布局还是要能够点击后执行代码
- 只看Ribbon Xml 布局 不会注入代码，即点击按钮后不会触发任何事件，优势是预览速度快
- 写入回调后预览 会注入代码，即点击按钮后会触发对应的代码，但是预览加载耗时稍微长一点
Excel预览：打开EXCEL预览功能区，方便落实最终效果
另存并写入Ribbon：将当前Ribbon功能区和回调代码，图标文件等都打包成对应的xlam/xlsm文件，后续分发即可

注意如果是WORD功能区，导入的就是docm/dotm文件，导入前保证文件中没有密码和VBA工程密码

二、左侧工具栏¶

左侧主要是为了方便插入控件，查看控件结构的，控件工具箱目前已经支持常见的 Tab，Group，Button，ComboBox，Togglebutton，Label，TextBox，Menu 等控件，底部控件树可以展开折叠，筛选等

这里我们通过 menu 和 button 的多层嵌套，就可以放下特别多的功能，如下图：

后续版本还增加了 MSO 控件，即 EXCEL或者WORD本身就有的控件，如条件格式，对齐等，也可以添加到Ribbon区中：

控件的添加可以通过拖动控件工具箱中的控件到预览区或者底部控件树中添加，也可以通过拖动随时更改控件的位置，删除的话可以选中后，通过点击控件工具箱中的 删除 按钮删除，也可以按 delete 键删除

三、预览区和xml区¶

对Ribbon区进行了任何的修改后，xml，预览区和左侧控件树都会同步进行变化，预览区的效果已经尽量还原 Microsoft EXCEL 中的顶部功能区效果，实际设计和顶部功能区效果对比如下图：

在设计器中，我们可以通过ctrl+拖动的方式复制tab，group等控件，也可以通过Ctrl+C复制，Ctrl+V粘贴的方式进行复制，如果你仅仅是想要移动位置，也可以通过拖动的方式进行移动，如下所示：

四、右侧属性工具栏¶

根据不同控件的属性，可以在右侧进行配置，比如按钮的文本，图标等

图标支持 Office内置的 ImageMso 图标，软件内置了1500+个供挑选，但是如果你也要WPS兼容的话，建议自定义图标，因为WPS不支持Office的部分图标，如果你用的是Office内置图标，在WPS中可能会显示为问号

如果你担心Office 的 ImageMso在 WPS中会显示为问号的话，建议统一使用嵌入方式：

统一解释一下：内联方式就是只在xml里面写入 imageMso，这样Office拿到字段之后，就从本地搜索对应的图标来进行显示，如果没有的话就会报错，所以这个跟版本有关，而嵌入方式就是我把这个图标当成一个独立的图片，嵌入到文件中，这样的话不管在Office还是WPS中，都能保证显示，所以我推荐后者

另外你也可以注意到我界面中有些浅红色的图标，这些是你可以根据自己的经验，就哪些图标我在预览的时候，发现没法预览出来（这种情况只会在内联时发生），那就是不支持的，你可以通过右上角的×标记一下，代表此图标如果用内联的方式是不可行的，这里之所以保留内联方式，是因为大部分伙伴习惯了imageMso的写法，可能还是比较青睐这种方式

当你导入xlam/xlsm文件后，工具会自动解析可以绑定的Sub过程，你只需要在这里选择对应的过程进行绑定即可

其中浅绿色的是已经绑定好的过程，同时当你选择对应过程后，会自动帮你生成回调代码，后续 另存并写入Ribbon时 会新建一个名为 JRRibbonCallbacks 的模块，用于存储回调代码

随着版本迭代，目前属性工具栏是通过选择的方式，会打开一个独立的界面，你可以在这个界面中快速定位需要绑定的过程（同样浅绿色是已经绑定的）：

五、WORD功能区和快捷工具栏¶

随着版本迭代，左上角增加了一个切换按钮，可以在EXCEL工作区和WORD工作区中进行切换，如下图所示：

此界面大体和EXCEL工作区的设计界面一致，比如一样能够生成如下这样1:1真实渲染的顶部工具栏

如果你只是设计顶部工具栏，不向快捷工具栏中拖入按钮的话，直接使用 通用导出功能 即可，简单解释一下这两种：

通用导出：微软和WPS 的docm/dotm文档都能正常显示功能区，但是快捷工具栏中设计的控件不会显示
专用导出：微软Word能同时显示出出顶部工具栏和快捷访问工具栏中的控件，但是WPS只能显示出快捷访问工具栏

xlsm/xlam不存在上述问题，所以只有 另存并写入Ribbon 这一个选项，导出文件后，不管在微软还是WPS中都能同时显示顶部功能区和快捷访问工具栏中的控件，那 docm/dotm文档之所以要这么做是因为 WPS的兼容性太差了，它目前只允许让快捷访问工具栏和顶部工具栏选项卡两者显示其一，所以官方快改改BUG吧！！

不过一般来说，我们也不用设计快捷访问功能区，可以通过设计顶部功能区后，在使用的时候再根据需要添加到快捷工具栏中，所以一般情况下，我们只用 通用导出 即可，这样在微软和WPS两端都能正常解析工具栏选项卡。