Microsoft Office Ribbon Query ?

Jul 22, 2009 at 7:42 PM

Hi,

I am using Microsoft office ribbon in my WPF application. I have a ribbon tab under which i have 8 ribbon toggle buttons. 5 buttons appear horizontally and 3 appear vertically. I want all of them to appear horizontally. How do i do that ?

Interestingly, if i add one more ribbon toggle button, all 9 ribbon toggle buttons appear horizonatlly. If i remove one as i need only 8 ribbon toggle buttons, 5 buttons appear horizontally and 3 appear vertically.

Regards,

Bhupesh.

Coordinator
Jul 22, 2009 at 8:06 PM

Hi Bhupesh,

Ribbon has standard templates for laying out the controls in a group depending on how many controls are in the group.  In the case of an 8 button group, the standard templates are L,L,L,L,L,M,M,M for the largest layout, L,L,M,M,M,M,M,M for the medium size, and L,L,M,M,M,S,S,S for the smallest.  You can easily override this behavior using a RibbonGroupSizeDefinition, like so:

<Ribbon.Resources>
<RibbonGroupSizeDefinitionCollection x:Key="Custom8Button">
   <RibbonGroupSizeDefinition> <!-- Control sizes: L,L,L,L,L,L,L,L -->
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
       <RibbonControlSizeDefinition ImageSize=”Large” IsLabelVisible=”True”/>
   </RibbonGroupSizeDefinition>
   <RibbonGroupSizeDefinition IsPopup="True" /> <!-- Collapsed -->
</RibbonGroupSizeDefinitionCollection>
</Ribbon.Resources>

...

<RibbonGroup SizeDefinitions=”{StaticResource Custom8Button}”>
   <RibbonButton />
   <RibbonButton />
   <RibbonButton />
   <RibbonButton />
   <RibbonButton />
   <RibbonButton />
   <RibbonButton />
   <RibbonButton />
</RibbonGroup>

Note that in the above example, I've only defined 2 states for my group: the large state with all 9 buttons horizontally and the collapsed state, where the buttons appear in a popup.  If you wanted to achieve the collapse behavior on resize which you find in Office, you'll want to define additional RibbonGroupSizeDefinitions with other layouts of the controls.  If you want to learn more about customizing Ribbon's control layout and resize behavior, I'd recommend the following resources:

Ribbon Feature Walkthrough http://windowsclient.net/wpf/wpf35/wpf-35sp1-ribbon-walkthrough.aspx
Ribbon Hands on Lab http://windowsclient.net/downloads/folders/hands-on-labs/default.aspx

Thanks,
Samantha

Jul 22, 2009 at 8:54 PM

Hi Samantha,

Thanks for the quick reply. It works now for me when i know the count of the ribbon buttons.

But I am adding the ribbon buttons dynamically to the ribbon group under the ribbon tab.

So I wouldn't know the number of ribbon buttons that will be there under the group.

How can i dynamically specify the Size as L, M or S ?

 

Regards,

Bhupesh.

Coordinator
Jul 22, 2009 at 11:06 PM

Hi Bhupesh,

I think you should be able to create and apply a GroupSizeDefinition from the code behind at runtime.  Or if you know the general range of how many buttons there might be, you can define the GroupSizeDefinitionCollection for each number of controls in XAML and then just apply the right one at runtime.  Also, if I remember correctly, I think the GroupSizeDefinitions are actually pretty robust, so you might be able to get away with just using one GroupSizeDefinition if you always want it to look the same regardless of how many controls there are.  For example, if you always wanted all buttons to be displayed Large in the first layout and the second layout is collapsed, you could use the GroupSizeDefinitionCollection defined above and just add more ControlSizeDefinitions until you have the same number of ControlSizeDefinitions as the maximum number of buttons (any extra ControlSizeDefinitions should be ignored in the case that you don't have the max number of controls in the group).

Thanks,
Samantha

Jul 23, 2009 at 10:17 AM

Thanks a lot Samantha. That answers my question.

Jul 23, 2009 at 3:26 PM

Samantha, just out of curiosity, how much of the current Ribbon Preview functionality will be broken by the .NET 4.0 "Ribbon 2.0" release?

Coordinator
Jul 27, 2009 at 11:42 PM

You can find a list of our intended changes here: http://wpf.codeplex.com/Wiki/View.aspx?title=Ribbon%20V1%20Roadmap&referringTitle=Home.  The main thing is that we are removing RibbonCommand and instead adding all of those visual properties onto the controls themselves.  So current implementations will be broken in that you'll have to move all of the information that was defined on RibbonCommand to the individual controls (or to Styles applied to the controls).  We'll also be making some changes to our drop-down controls to enable them to use new functionality we're adding with Gallery.  Besides that, it should mainly be new features.

Aug 10, 2009 at 8:19 PM

How do i gave equal space between ribbon buttons under one ribbon group? The text for each button varies and hence I am ending up with unequal space between each ribbon button.

Thanks,

Bhupesh.

Coordinator
Aug 12, 2009 at 7:31 PM

Hi Bhupesh,

The RibbonButton will automatically make enough space for the button's title to be displayed, so your options are to either shorten the name of the button so that it doesn't add extra space to accomodate it, or apply margins to your buttons as needed to even out the spacing.

Thanks!
Samantha