RadControls for WPF
Contents

One of the most important features of the RadRibbonBar is the dynamic layout resizing. It refers to the RadRibbonBar's ability to optimize its layout depending on how much space is available. This process can't be automated, however, the RadRibbonBar's API gives you the ability to specify how you would like the resizing to occur.

The resizing of the elements is defined per RadRibbonTab. The resizing behavior of one tab is independent from the resizing behavior of the rest of the tabs. A RadRibbonTab contains many RadRibbonGroups. Each group in the tabs can have four distinct sizes:

  • Large - this is the default size.
  • Medium
  • Small
  • Collapsed
Tip
The RadRibbonGroups assumes their normal (large) size whenever they can. After that they are in Medium, Small and Collapsed state.

You have the ability to customize the layout when the groups are in large, medium or small state. In collapsed state, they look the same - only image and text are shown. For more information about the groups customization, take a look at the RibbonGroup topic.

The resizing behavior of the RadRibbonTab is specified through the RadRibbonGroup's Variants collection. The collection is populated with GroupVariant objects, which have two important properties:

  • Variant - defines the variant which the group can be. The values for this property are predefined in the RibbonGroupVariant enumeration, which exposes the following fields:
  • Priority - the priority for the specified Variant.

Although the Variants collection is defined on RadRibbonGroup level, the Priority properties for each GroupVariant are applied throughout the RadRibbonTab as a whole - for all of the groups.

By default if no priorities are set for the RadRibbonGroups Variants they will be resized from right to left - e.g. when the size of the RadRibbonBar is smaller, the right-most RibbonGroup will be set to a smaller size. However, if you want to customize the resizing order, you should specify a Priority for each of the RibbonGroup Variants.

Note

A size variant can only be specified once per group.

The next example demonstrates how to set the RadRibbonGroup's Variants collection.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Clipboard">

            <telerik:RadRibbonGroup.Variants>
                <telerik:GroupVariant Variant="Small" Priority="1" />
                <telerik:GroupVariant Variant="Collapsed" Priority="5" />
            </telerik:RadRibbonGroup.Variants>

        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Header="Image">

            <telerik:RadRibbonGroup.Variants>
                <telerik:GroupVariant Variant="Small" Priority="2" />
                <telerik:GroupVariant Variant="Collapsed" Priority="6" />
            </telerik:RadRibbonGroup.Variants>

        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Header="Tools">

            <telerik:RadRibbonGroup.Variants>
                <telerik:GroupVariant Variant="Collapsed" Priority="8" />
            </telerik:RadRibbonGroup.Variants>

        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Header="Brushes">

            <telerik:RadRibbonGroup.Variants>
                <telerik:GroupVariant Variant="Medium" Priority="2" />
            </telerik:RadRibbonGroup.Variants>

        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>        
</telerik:RadRibbonBar>

In the previous example the demo would do very little; the groups would collapse only. The actual controls have been omitted for better clarity. When the group changes its Size, the elements inside are automatically resized. The elements inside each group can be positioned in the various panels that Telerik supports. For more information, take a look at the Ordered Wrap Panel and Collapsible Panel topics. Developers can also choose to create a custom logic for the resizing by using the RadRibbonButtons and by defining how they will behave when the group changes its size. For more information, please take a look at the Ribbon Buttons topic.

See Also