如何在自定义Ribbon（Ribbon XML）的按钮间添加小型分隔符？

要实现你说的那种按钮间的小型分隔符（比如Sample1和Sample2之间的细竖线样式），问题出在你之前使用<separator>的位置不对——默认的<separator>在group直接子层级会生成大尺寸分隔，而要得到小型分隔，必须把它放在水平布局的box内部。

具体修改方法 #

直接在水平box里的两个按钮之间插入<separator>控件即可，修改后的box1代码如下：

<box id="box1" boxStyle="horizontal">
  <button id="custombuttonF3" label="Sample1" screentip="Increase" onAction="Macro4" imageMso="UpArrow2" />
  <separator id="SmallSeparator1" />
  <button id="custombuttonF4" label="Sample2" screentip="Decrease" onAction="Macro4" imageMso="DownArrow2" />
</box>

原理说明 #

• 在boxStyle="horizontal"的水平布局容器中，<separator>默认会渲染为小型垂直分隔线（也就是你要的那种细竖线），这是Office Ribbon的内置布局规则。
• 如果你之前是在group的直接子元素位置使用<separator>，那它会生成大尺寸的垂直分隔，这就是你之前遇到的问题。

如果需要在垂直排列的按钮间添加小型水平分隔符，同理，把<separator>放在boxStyle="vertical"的垂直box内部即可，此时它会显示为细横线样式。

内容的提问来源于stack exchange，提问作者Pramod Pandit