I'm using the Microsoft Ribbon for WPF October 2010 and have got 3 buttons next to each other, inside a RibbonControlGroup. The left and the right ones are text-only RibbonToggleButton controls, the one in the middle is an image-only RibbonButton. The buttons have a defined width to match the row above.
My code:
<r:RibbonControlGroup>
<r:RibbonToggleButton Width="110" Label="Outgoing" IsChecked="True" />
<!-- Padding and Height set to align the buttons/image -->
<r:RibbonButton Width="30" Padding="5 0" Height="24" SmallImageSource="Images\Small\arrow_swap.png" />
<r:RibbonToggleButton Width="110" Label="Incoming" />
</r:RibbonControlGroup>
The problem is that as soon as I apply the SmallImageSource to the middle button, the other two get spacings for images, causing the text not to be centered anymore. That is problem (1).
Because I didn't find a quick solution, I tried to add the image of the middle button not via SmallImageSource, but by adding it as <Image> for the content of the button. However, the button would remain empty. That is problem (2).
My third solution was to add images to the left and the right button, too. Unfortunately there is nearly no margin between the image and text, which looks quite ugly. I tried several things to enlarge the margin like adding a <Style TargetType="Image"> to the <RibbonToggleButton.Resources>, but although the editor accepts it and displays the spacing at designtime, the margin is gone again at runtime. That is problem (3).
Does anybody have an appropiate solution to any of the three problems? I cannot get it to work. The number of the problems is also the preference of the alternatives, (1) being the most favourite to use with an appropiate hack.
It seems you cannot do that. Its by design.
As per MSDN (here about half way down the page):
Related ribbon controls can be grouped together in a RibbonControlGroup. When a control group is resized, one RibbonControlSizeDefinition is applied to all of the controls in the RibbonControlGroup. The RibbonControlGroup is positioned in the RibbonGroup as if it were one control.
All the controls in a RibbonControlGroup shares the same RibbonControlSizeDefinition. Hence, in your case image will be added for all the buttons.
You may use RibbonGroup instead if you do not want to glue all your controls very closely. This way you can customize each button container by using different RibbonControlSizeDefinitions.