Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

TextFill

The closest I got was using a splitButton with a button and a menu. 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:

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

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?

share|improve this question

3 Answers

up vote 0 down vote

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:

<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>

This gives you the following result:

box with button and menu, hovering button

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...

share|improve this answer
up vote 0 down vote

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:
http://msdn.microsoft.com/en-us/library/microsoft.office.tools.ribbon.ribbonsplitbutton.controlsize

An example for Custom UI with Ribbon XML

<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>

Ribbon XML on MSDN
http://msdn.microsoft.com/en-us/library/aa942866.aspx
http://msdn.microsoft.com/en-us/library/gg327872

Perhaps you might want to try <MenuSection> tag

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

Seems that you could define different types of display mode.

http://msdn.microsoft.com/en-us/library/gg334378.aspx

share|improve this answer
I don't really think it's about the control size. Please see the screenshot that I just added which shows the control I get. – Paul B. Sep 14 '12 at 7:11
I think you might have to go with customize UI by using Ribbon XML. My post updated with a bit example. – woodykiddy Sep 14 '12 at 8:53
This seems to be close to the approach that I used which led me to the result that's not quite matching what I am trying to achieve. Maybe I don't understand you correctly? – Paul B. Sep 14 '12 at 9:40
up vote 0 down vote

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

share|improve this answer
When I tried this Visual Studio would tell me "The 'size' attribute is invalid" (only "normal" and "large" are allowed) and my ribbon did not load at all. – Paul B. Sep 14 '12 at 6:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.