Ribbon Layout and Resizing
The ribbon uses adaptive layout and resizing to present the optimal control layout for a variety of window sizes. The ribbon provides default resizing behavior that is suitable for many common scenarios. The Microsoft Ribbon for WPF also provides a set of options that you can use to specify custom resizing behavior.
Ribbon Resizing Overview
The ribbon control dynamically resizes as the width of the application window changes. The following illustrations show how the ribbon resizes as the application window gets narrower.
When the window has enough available space, each group in the tab is shown in its largest specified size.
.png "Ribbon with large controls")
As the window gets narrower, the Clipboard and Insert groups are shown in their smaller sizes.
.png "Ribbon with medium size controls")
As the window is narrowed further, the Clipboard, Insert, and Paragraph groups are shown in their collapsed state. When a group is collapsed into a drop-down button, its largest size variation is shown when the drop-down is opened.
.png "Ribbon with collapsed groups")
Default Resizing Behavior
By default, the panels that lay out the ribbon use star sizing to show the largest possible control variation that can fit in the available space. As the width of the window changes, groups of controls are resized cyclically from right-to-left. In localized cultures that lay out right-to-left, the groups of controls are resized cyclically from left-to-right.
Star sizing is a convention whereby the available space is divided evenly between the elements that need to occupy the space. The name derives from the fact that you specify star sizing by using an asterisk (*) in XAML.
When there are no space constraints, each group shows all of its controls in their largest size. As the window shrinks, each group resizes its controls to show in their smaller variation. When there is not enough space to show each group in its smallest control variation, the groups collapse into drop-down buttons.
Specifying Custom Resizing Behavior
For complex ribbon layouts, you typically want to specify exactly how the ribbon is resized with the window. You can specify resizing behavior at the control-level, the group-level, or the tab-level. If custom resizing settings are not specified at a particular level, the default behavior is used.
The following table lists how you specify custom resizing settings at the different levels.
Level |
How to Specify Custom Resizing |
|---|---|
Set the ControlSizeDefinition property to specify the size of control to show. |
|
Set the GroupSizeDefinitions property to specify various possible combinations of control sizes that are used when resizing. |
|
Set the GroupSizeReductionOrder property to specify the order in which ribbon groups are resized. |
Control-Level Resizing
The ribbon guidelines specify three standard size variations for ribbon controls; large, medium, and small. Each control has a ControlSizeDefinition property that is set to a RibbonControlSizeDefinition object. The RibbonControlSizeDefinition object has an ImageSize property that specifies whether to show the large or small image, and an IsLabelVisible property that specifies whether the label for the control is visible.
The following table shows the RibbonControlSizeDefinition property settings for the three standard control sizes.
Size |
Description |
||
|---|---|---|---|
Large |
Has a large image and up to two lines for a label. |
true |
|
Medium |
Has a small image and one line for a label. |
true |
|
Small |
Has just a small image and no label. |
false |
The following example shows three RibbonControlSizeDefinition declarations that correspond to large, medium, and small controls.
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
Control Groups
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.
Group-Level Resizing
When the ribbon is resized, the groups in a tab are resized by using either the built-in logic of the RibbonGroupItemsPanel, user-specified resizing logic, or a combination of the two. By default, the RibbonGroupItemsPanel resizes the controls in the group to show the largest possible control variation that will fit in the available space. If specified, the groups in a tab are resized using a combination of GroupSizeReductionOrder, which specifies the order in which groups are resized, and the RibbonGroup.GroupSizeDefinitions property, which specifies various possible size configurations for the group.
The following example shows the GroupSizeDefinitions for the Clipboard group shown previously.
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" 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:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>
The GroupSizeDefinitions property contains a collection of RibbonGroupSizeDefinition objects, each of which specifies one possible configuration for the group. When the ribbon is resized, the ItemsPanel determines which RibbonGroupSizeDefinition to use in order to fit all of the controls into the available space. It then sizes the controls as specified by the RibbonControlSizeDefinition objects in the chosen RibbonGroupSizeDefinition. The control size definitions are applied to controls in the group in sequential order.
The ribbon guidelines state that every group should specify at least two predefined size variants: a large variant and a collapsed variant. When the RibbonGroup can no longer fit the controls into the available size, the group is collapsed into a drop-down. When a group is collapsed, the largest specified variant is shown when the drop-down in opened. In the third illustration shown previously, the Clipboard group is collapsed and its largest variant is shown in the drop-down.
You set the IsCollapsed property to true to specify that a group should be resized to a collapsed drop-down. Because a collapsed group always shows the largest variant when it is opened, you do not specify a collection of RibbonControlSizeDefinition objects when you set the IsCollapsed property. If a RibbonControlSizeDefinition collection is specified, the IsCollapsed property is ignored.
The GroupSizeDefinitions in the example are demonstrated in the illustrations shown previously.
In the first illustration shown previously, the first RibbonGroupSizeDefinition is applied to the Clipboard group. The three RibbonControlSizeDefinition objects are applied to the three buttons in order, and specify the button sizes as large, medium, and medium.
In the second illustration, the window has less space available, so the second RibbonGroupSizeDefinition is applied to the Clipboard group. The RibbonControlSizeDefinition objects specify the button sizes as large, small, and small.
In the third illustration, the last RibbonGroupSizeDefinition is applied. Rather than specifying the sizes of the controls, this one specifies that the group is collapsed.
Group-Level Resizing Using a Custom ItemsPanel
If you cannot achieve the desired layout using either the default resizing or by specifying GroupSizeDefinitions, you can replace the default ItemsPanel with a custom panel. For example, the Font group shown previously contains several groups of buttons, each contained in a RibbonControlGroup. As noted previously, a RibbonControlGroup is positioned in the RibbonGroup as if it were a single control. As a result, the Font group does not resize in a useful manner using the default panel. To achieve the layout that is shown, the default RibbonGroupItemsPanel is replaced with a standard WrapPanel.
The following example shows how to use a WrapPanel as the ItemsPanel of the RibbonGroup.
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
<ribbon:RibbonGroup.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" MaxWidth="300" />
</ItemsPanelTemplate>
</ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>
Tab-Level Resizing
To specify tab-level resizing, you set the RibbonTab.GroupSizeReductionOrder to specify the order in which groups change size. To specify a GroupSizeReductionOrder, each RibbonGroup must have its Name property set to a unique value. You specify the reduction order by adding the group names to the reduction order list.
The following example shows how to set the GroupSizeReductionOrder for the Home tab shown in the previous illustrations.
<ribbon:RibbonTab Header="Home"
GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
<ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
...
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
In the first illustration, the ribbon has enough space to lay out each group using its largest size variant. In the second illustration, as the window gets smaller, the first two groups specified in the GroupSizeReductionOrder, Clipboard and Insert, are shown in their smaller variants. In the third illustration, the Insert group has been reduced again, the Paragraph group has been reduced, and the Clipboard group has been reduced again.
The default ItemsPanel for a RibbonTab is a RibbonGroupsPanel. This panel is responsible for determining the available size and layout for the groups in the tab, based on the default or user-specified size reduction order.
If the GroupSizeReductionOrder collection contains a name that does not appear on one of the groups on the tab, then that name is ignored. If a group name appears in the collection more times than there are size variants for that group, the group resizes to its smallest variant and the additional times it appears in the collection are ignored. If any of the groups are not listed in the GroupSizeReductionOrder collection, those groups are reduced in size right-to-left, one-by-one, in cyclical order, after all of the user-specified reductions have occurred. This means that by default, if nothing is specified in the GroupSizeReductionOrder, each of the groups is reduced in size right-to-left, one-by-one, in cyclical order. This resizing is reversed in localized cultures that lay out from right-to-left.