RadControls for WPF
Contents

Telerik RadRibbonBar provides a simple and consistent way for building interfaces similar to the RibbonBar used in Microsoft Office. The RadRibbonBar consists of various elements, one of which is the Ribbon Group. This topic discusses concepts fundamental to the Ribbon Group at first and then goes into the usage of the RadRibbonGroup class and its features.

Tip
Before proceeding with this tutorial, it is recommended to get familiar with the Visual Structure of the RadRibbonBar control.

Ribbon Group - Fundamentals

The RadRibbonBar helps end-users to quickly find the tools and options they need in order to complete a task. Tools and options are organized in logical groups that are collected together under specific tabs. Or in other words - the Ribbon Group lets you categorize the commands to be displayed for the end-users.

RibbonGroups are defined into the Ribbon Tab. A single RibbonTab usually contains many RibbonGroups to layout its content.

Each RibbonGroup may have a Header and a DialogLauncher. The DialogLauncher appears in the bottom right corner of the group.

Tip
The class that represents the ribbon group is Telerik.Windows.Controls.RadRibbonGroup.

The RadRibbonGroup is a HeaderedItemsControl and is the main part of the layout mechanism of the RadRibbonBar.

Layout Resizing

One of the most important features of the RadRibbonGroup is the dynamic resizing. It refers to the ability of the RadRibbonBar to optimize its layout depending on how much space is available.

Each RadRibbonGroup in a RadRibbonTab may have four possible sizes (Variants):

  • Large - this is the default size (Variant).
Tip
The RadRibbonGroups assume their normal (large) state whenever they can.

  • Medium

  • Small

  • Collapsed

For more information about the layout resizing mechanism, please refer to the Resizing topic. Check out the rest of the topic which is entirely dedicated to the RadRibbonGroup.

Adding RibbonGroups to a RadRibbonBar Control

As it is described in the Fundamentals section, various user commands are organized in logical groups that are collected together under specific RadRibbonTabs. So the first step before declaring the RadRibbonGroups is to add RadRibbonTabs to your ribbon control. For more information about how to add ribbon tabs, take a look at the Ribbon Tab topic.

Adding RadRibbonGroups is done through the RadRibbonTab's Items property. The next example shows how to add several RadRibbonGroups and how to set their Header property.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Clipboard" />
        <telerik:RadRibbonGroup Header="Font" />
        <telerik:RadRibbonGroup Header="Paragraph" />
        <telerik:RadRibbonGroup Header="Styles" />
        <telerik:RadRibbonGroup Header="Editing" />
    </telerik:RadRibbonTab>
</telerik:RadRibbonBar>

Enabling the Dialog Launcher

Any group can have a dialog launcher button which appears in the bottom right corner of the group. By default the dialog launcher is not visible. In order to enable it you should set the RadRibbonGroup's DialogLauncherVisibility property to Visibility.Visible.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
    <telerik:RadRibbonTab Header=" Home">
        <telerik:RadRibbonGroup DialogLauncherVisibility=" Visible" Header=" Clipboard" />
        <telerik:RadRibbonGroup DialogLauncherVisibility=" Visible" Header=" Font" />
        <telerik:RadRibbonGroup DialogLauncherVisibility=" Visible" Header=" Paragraph" />
        <telerik:RadRibbonGroup DialogLauncherVisibility=" Visible" Header=" Styles" />
        <telerik:RadRibbonGroup DialogLauncherVisibility=" Visible" Header=" Editing" />
    </telerik:RadRibbonTab>
</telerik:RadRibbonBar>
Tip
The default value of the RadRibbonGroup's DialogLauncherVisibility property is Visibility.Collapsed.

Adding Content to the Ribbon Groups

The RadRibbonGroup is a HeaderedItemsControl. Which means that the RadRibbonGroup contains a heading (or title) and multiple items. You already learned how to set the Header property. Now it's time to add some content to the RadRibbonGroup. You should do this using the RadRibbonGroup's Items property. The next example shows you how to build the "Clipboard" RadRibbonGroup.

CopyXAML
<telerik:RadRibbonBar x:Name=" radRibbonBar">
    <telerik:RadRibbonTab Header=" Home">
        <telerik:RadRibbonGroup DialogLauncherVisibility=" Visible" Header=" Clipboard">
            <telerik:RadRibbonSplitButton LargeImage="/RadRibbonBarSample;component/Images/IconMSOffice/32/paste.png" 
                                          Size="Large"
                                          SmallImage=" /RadRibbonBarSample;component/Images/IconMSOffice/16/paste.png"
                                          telerik:ScreenTip.Description="Paste the contents of the Clipboard."
                                          telerik:ScreenTip.Title="Paste"
                                          Text=" Paste">
                <telerik:RadRibbonSplitButton.DropDownContent>
                    <telerik:RadContextMenu BorderThickness="0">
                        <telerik:RadMenuItem Header="Paste">
                            <telerik:RadMenuItem.Icon>
                                <Image Source="/RadRibbonBarSample;component/Images/IconMSOffice/16/paste.png" />
                            </telerik:RadMenuItem.Icon>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Header="Paste Special...">
                            <telerik:RadMenuItem.Icon>
                                <Image Source="/RadRibbonBarSample;component/Images/IconMSOffice/16/pastespecial.png" />
                            </telerik:RadMenuItem.Icon>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Header="Paste as Hyperlink" IsEnabled="False">
                            <telerik:RadMenuItem.Icon>
                                <Image Source="/RadRibbonBarSample;component/Images/IconMSOffice/16/pastehyperlink.png" />
                            </telerik:RadMenuItem.Icon>
                        </telerik:RadMenuItem>
                    </telerik:RadContextMenu>
                </telerik:RadRibbonSplitButton.DropDownContent>
            </telerik:RadRibbonSplitButton>

            <StackPanel>
                <telerik:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" 
                                         SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/cut.png"
                                         telerik:ScreenTip.Description="Cut the selection from the document and put it on the Clipboard."
                                         telerik:ScreenTip.Title="Cut"
                                         Text="Cut" />
                <telerik:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" 
                                         SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/copy.png"
                                         telerik:ScreenTip.Description="Copy the selection and put it on the Clipboard."
                                         telerik:ScreenTip.Title="Copy"
                                         Text="Copy" />
                <telerik:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" 
                                         SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/formatpainter.png"
                                         telerik:ScreenTip.Description="Copy formatting from one place and apply it to another.
                                         Double-click this button to apply the same formatting to multiple places in the document."
                                         telerik:ScreenTip.Title="Format Painter"
                                         Text="Format Painter" />
            </StackPanel>
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
</telerik:RadRibbonBar>

Setting Screen Tip

The Telerik RadRibbonBar's API allows you to associate screen tips with each one of the RibbonGroups. For more information, take a look at the Screen Tips topic.

Specifying Group Variants

Each RadRibbonGroup in a RadRibbonTab may have four possible sizes (Variants): Large, Medium, Small and Collapsed. Collapsed groups always look the same - only the Header and an image are shown.

The resizing of the elements is defined per RadRibbonTab. The resizing behavior of the tab is defined by setting the Variant collection to each of its RadRibbonGroups and is based on priorities. By default, if no priorities are set to the Variants of the RibbonGroups, they will be resized from right to left. In order to customize the order by which the groups will be resized, the developer needs to specify a Priority for each of the RibbonGroupVariants.

For more information and explanations about the Variants and Priorities, take a look at the Resizing topic.

Setting Collapsed Icon

When a RibbonGroup is in Collapsed state only Header and Icon (image) are shown. To set the image source for the collapsed icon you need to set the RadRibbonGroup's Icon property.

Events

Any group can have a dialog launcher button. When you want to handle the click over this button you should attach to the RadRibbonGroup's LaunchDialog event.

CopyXAML
<telerik:RadRibbonGroup DialogLauncherVisibility="Visible" 
                        Header="Clipboard"
                        LaunchDialog="RadRibbonGroup_LaunchDialog" />

The LaunchDialog event handler receives two arguments:

  • The sender argument contains the RadRibbonGroup. This argument is of type object, but can be cast to the RadRibbonGroup type.
  • The second argument is a RadRoutedEventArgs object.

For a full list of the exposed by the RadRibbonBar events, take a look at the Events - Overview topic.

Customizing the RibbonGroup

To learn how to change the default appearance of the RibbonGroup read this topic.

The RadRibbonBar is a complex control and the RibbonGroups are only a small part of it. The RadRibbonBar consists of various elements such as:

Additional features that you may find interesting are:

See Also