RibbonControl force buttons to desired design

Dec 23, 2008 at 10:33 AM
Hello all!
I'm looking for some tips how to force the layout to a certain design. I want to have 4 buttons on a ribbongroup. The one on the left should be a "big" one and the other three should be vertical aligned underneath. The result should look like the Clipboard-Group in Word2007 on the Start-Tab.

Regards and a merry christmas
Carsten
Dec 23, 2008 at 4:34 PM

Add a RibbonGroupSizeDefinition to the RibbonGroup:

        <ribbon:RibbonGroup Name="Clipboard" Command="{StaticResource ClipboardGroupCommand}" HasDialogLauncher="True" >
          <ribbon:RibbonGroup.GroupSizeDefinitions>
            <ribbon:RibbonGroupSizeDefinitionCollection >
              <ribbon:RibbonGroupSizeDefinition>
                <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
              </ribbon:RibbonGroupSizeDefinition>
            </ribbon:RibbonGroupSizeDefinitionCollection>
          </ribbon:RibbonGroup.GroupSizeDefinitions>

In this case, the buttons will remain the sizes specified as the window is resized.  If you want the buttons to shrink as the window shrinks, add additional RibbonGroupSizeDefinitions:

        <ribbon:RibbonGroup Name="Clipboard" Command="{StaticResource ClipboardGroupCommand}" HasDialogLauncher="True" >
          <ribbon:RibbonGroup.GroupSizeDefinitions>
            <ribbon:RibbonGroupSizeDefinitionCollection >
              <ribbon:RibbonGroupSizeDefinition>
                <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
              </ribbon:RibbonGroupSizeDefinition>
              <ribbon:RibbonGroupSizeDefinition>
                <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
              </ribbon:RibbonGroupSizeDefinition>
              <ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
            </ribbon:RibbonGroupSizeDefinitionCollection>
          </ribbon:RibbonGroup.GroupSizeDefinitions>

Hope that helps.
Carole

Dec 26, 2008 at 8:08 AM
Hello Carole,

exactly what I was looking for.

Thank you very much.

Regards
Carsten