blocks|key|394691|text|在声明splitButton时，将size属性设置为"small“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|394692|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

When declaring the splitButton, set the size attribute to "small"

blocks|key|3373305|text|我认为ControlSize+proeprty只有两个选择，要么是常规的，要么是大型的。因此，只需使用常规大小，并添加一个图像到您的分割按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3373306|更多详情请参考此接口：|3373307|http://msdn.microsoft.com/en-us/library/microsoft.office.tools.ribbon.ribbonsplitbutton.controlsize|offset|length|3373308|使用Ribbon+XML的自定义UI示例|3373309|<splitButton+id="splitButton">+
+++++<button+id="splitButton__btn"+imageMso="AlignLeft"+label="SplitButton"+onAction="splitButton_Click"+/>+
+++++<menu+id="splitButton__mnu">+
+++++<button+id="btnAlignLeft"+imageMso="AlignLeft"+onAction="btnAlign_Click"+label="Left"+/>+
++++++</menu>+
</splitButton>+|code-block|syntax|javascript|3373310|MSDN上的功能区XML|3373311|http://msdn.microsoft.com/en-us/library/aa942866.aspx|3373312|http://msdn.microsoft.com/en-us/library/gg327872|3373313|也许你想试试<MenuSection>标签|style|CODE|3373314|<MenuSection
+DisplayMode=["Default"+%7C+"Small"+%7C+"Medium"++%7C+"Large"++%7C+"Text"++%7C+"Menu"++%7C+"Menu16"++%7C+"Menu32"++%7C+"Thin"]
+Id="String"
+MaxHeight="String"
+Scrollable="true"
+Sequence="Integer"
+Title="String">
+[<Controls+/>+%7C+<Gallery+/>]
</MenuSection>|3373315|看起来你可以定义不同类型的显示模式。|3373316|http://msdn.microsoft.com/en-us/library/gg334378.aspx|3373317|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3^0|0|0|0|2R|0|0|0|0|0|0|1H|1|0|0|1C|2|0|6|D|0|0|0|0|1H|3|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@$F|1H|G|1I|1|1J]]|A|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1L|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@$F|1O|G|1P|1|1Q]]|A|$]]|$1|S|3|T|5|6|7|1R|8|@]|9|@$F|1S|G|1T|1|1U]]|A|$]]|$1|U|3|V|5|6|7|1V|8|@$F|1W|G|1X|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1Y|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|20|8|@]|9|@$F|21|G|22|1|23]]|A|$]]|$1|14|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|E]]|1B|$5|17|18|19|A|$1A|R]]|1C|$5|17|18|19|A|$1A|T]]|1D|$5|17|18|19|A|$1A|13]]]]

I think there's only 2 options for ControlSize proeprty, either Regular or Large. So just use the Regular size, and add an image to your split button. 

Please refer to this API for more details: <a href="http://msdn.microsoft.com/en-us/library/microsoft.office.tools.ribbon.ribbonsplitbutton.controlsize" rel="nofollow">http://msdn.microsoft.com/en-us/library/microsoft.office.tools.ribbon.ribbonsplitbutton.controlsize</a>

An example for Custom UI with Ribbon XML

<pre><code>&lt;splitButton id="splitButton"&gt; 
 &lt;button id="splitButton__btn" imageMso="AlignLeft" label="SplitButton" onAction="splitButton_Click" /&gt; 
 &lt;menu id="splitButton__mnu"&gt; 
 &lt;button id="btnAlignLeft" imageMso="AlignLeft" onAction="btnAlign_Click" label="Left" /&gt; 
 &lt;/menu&gt; 
&lt;/splitButton&gt; 
</code></pre>

Ribbon XML on MSDN 
<a href="http://msdn.microsoft.com/en-us/library/aa942866.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/aa942866.aspx</a> 
<a href="http://msdn.microsoft.com/en-us/library/gg327872" rel="nofollow">http://msdn.microsoft.com/en-us/library/gg327872</a>

Perhaps you might want to try <code>&lt;MenuSection&gt;</code> tag

<pre><code>&lt;MenuSection
 DisplayMode=["Default" | "Small" | "Medium" | "Large" | "Text" | "Menu" | "Menu16" | "Menu32" | "Thin"]
 Id="String"
 MaxHeight="String"
 Scrollable="true"
 Sequence="Integer"
 Title="String"&gt;
 [&lt;Controls /&gt; | &lt;Gallery /&gt;]
&lt;/MenuSection&gt;
</code></pre>

Seems that you could define different types of display mode.

<a href="http://msdn.microsoft.com/en-us/library/gg334378.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/gg334378.aspx</a>

blocks|key|2306612|text|我不认为这是可能的做你想要的，由于定制限制…但是您可以尝试定义一个框而不是splitButton：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2306613|<box+id="BoxSplit"+boxStyle="horizontal">
++<button+id="MenuButton1"+imageMso="TextFillColorPicker"+/>
++<menu+id="Menu1"+label="Text+Fill"+itemSize="normal"+showLabel="true">
++++<button+id="MenuButton2"+label="Label2"+/>
++</menu>
</box>|code-block|syntax|javascript|2306614|这将为您提供以下结果：|2306615|​|2306616|📷|atomic|offset|length|2306617|2306618|2306619|2306620|2306621|如您所见，现在的问题是菜单和按钮没有一起突出显示。我希望这对你是可以接受的。|2306622|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/cf418dac21a6c480a64af02aa671300b.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/4779d2b55ce2b0fda4adc9d1cc385124.png^0|0|0|0|0|0|1|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1A|8|@]|9|@$N|1B|O|1C|1|1D]]|A|$]]|$1|P|3|J|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|J|5|6|7|1F|8|@]|9|@]|A|$]]|$1|R|3|L|5|M|7|1G|8|@]|9|@$N|1H|O|1I|1|1J]]|A|$]]|$1|S|3|J|5|6|7|1K|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1L|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12|13|-4]]|14|$5|Y|Z|10|A|$11|15|13|-4]]]]

I don't think it is possible to do what you want, due to customization limitations... But you can try defining a box instead of a splitButton:

<pre><code>&lt;box id="BoxSplit" boxStyle="horizontal"&gt;
 &lt;button id="MenuButton1" imageMso="TextFillColorPicker" /&gt;
 &lt;menu id="Menu1" label="Text Fill" itemSize="normal" showLabel="true"&gt;
 &lt;button id="MenuButton2" label="Label2" /&gt;
 &lt;/menu&gt;
&lt;/box&gt;
</code></pre>

This gives you the following result:

<img src="https://i.stack.imgur.com/8OgzV.png" alt="box with button and menu, hovering button">

<img src="https://i.stack.imgur.com/qZSFO.png" alt="box with button and menu, hovering button">

As you see, the problem is now that the menu and the button are not highlighted together. I hope this is acceptable for you...

blocks|key|2301750|text|如果您需要在Ribbon中准确地再现原始按钮，则可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2301751|<control+idMso="FontColorPicker"+imageMso="FontColorPicker"/>|code-block|syntax|javascript|2301752|(我到处寻找这个，但我找不到任何信息，所以我想有一天它可能会对某人有用)|2301753|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If your need is to exactly reproduce the original button in your Ribbon, you can use this code :

<pre><code>&lt;control idMso="FontColorPicker" imageMso="FontColorPicker"/&gt;
</code></pre>

(I have looked around to find this and I couldn't find any info, so I figured out it could be useful to someone one day)

I would like to create a ribbon button in Microsoft Office that reproduces the behavior e.g. of the "Text Fill" button. It is split in two areas where the left (red) will execute the default/last action and the right (blue) offers additional functions.

<img src="https://i.stack.imgur.com/79Ovd.jpg" alt="TextFill">

The closest I got was using a <code>splitButton</code> with a <code>button</code> and a <code>menu</code>. But here a get a large button with text for the default action and only a small area with a triangle for accessing the drop-down menu. Here are the ribbon code and the resulting button:

<pre><code>&lt;splitButton id="SplitButton1" size="normal" &gt;
 &lt;button id="MenuButton1" imageMso="TextFillColorPicker" label="Text Fill" /&gt;
 &lt;menu id="Menu1" label="Label1" itemSize="normal" showLabel="true"&gt;
 &lt;button id="MenuButton2" label="Label2" /&gt;
 &lt;/menu&gt;
&lt;/splitButton&gt;
</code></pre>

<img src="https://i.stack.imgur.com/TFf6r.jpg" alt="enter image description here">

For usability reasons I would like to keep the (visual) focus on the drop-down part exactly as shown in the image. Any ideas how to do it?

How to create a split Office ribbon button like Text Fill

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在Microsoft Office中创建一个功能区按钮，它可以重现“文本填充”按钮的行为。它分为两个区域，左侧(红色)将执行默认/最后一个操作，右侧(蓝色)提供附加功能。​​我得到的最接近的是使用带有button和menu的splitButton。但在这里，get是一个大按钮，带有文本用于默认操作，并且只有一个小区...

问如何创建类似文本填充的拆分Office功能区按钮
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建类似文本填充的拆分Office功能区按钮EN