• Open the Asset Library (Window->Assets) in Expression Blend and start writing the name of the RadRibbonBar in the search box.

• Drag a RadRibbonBar on the artboard.

CopyXAML

<UserControl
    ....
     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    ....>
    <Grid x:Name="LayoutRoot" Background="White">
     <telerik:RadRibbonBar/>
    </Grid>
</UserControl>

There are two things you should pay attention to in the above code snippet. The first is the declaration of the Telerik.Windows.Controls namespace from Telerik.Windows.Controls.RadRibbonBar assembly and the second is the declaration of the RadRibbonBar control itself.

If you run your application now you will see an empty RadRibbonBar that contains no tabs, no application menu and no elements. To learn about each one of the controls, that the RadRibbonBar may contain check out the Ribbon Controls subsection in the Features section.

In order to add an application icon perform the following instructions:

• Select your control in Expression Blend.
• In the Properties Pane, find the ApplicationButtonImageSource property and select the desired image from your local hard drive.

CopyXAML

<telerik:RadRibbonBar ApplicationButtonImageSource="AppIcon.png">
</telerik:RadRibbonBar>

Note that the selected image will be included in your project.

In order to set the application title, you need to use the RadRibbonBar's Title property. This can be done in two easy steps:

• Select your ribbon control in Expression Blend
• In the Properties Pane, find the Title property and set its value.

CopyXAML

<telerik:RadRibbonBar ApplicationButtonImageSource="AppIcon.png" Title="Microsoft Word">
</telerik:RadRibbonBar>

The result can be seen on the next snapshot.

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 Tab lets you categorize the commands to be displayed for the end-users.

Note
The class that represents the ribbon tab is Telerik.Windows.Controls.RadRibbonTab.

In order to add ribbon tabs to your ribbon control in Expression Blend, you should perform the following instructions:

• Select your ribbon control.
• In the Properties Pane, find and edit the Items property.

• The "Object Collection Editor" dialog will open.

• Add two items of type RadRibbonTab.

Set their Header properties respectively to "Header" and "View". The result from the operations above is shown on the next image.

CopyXAML

<telerik:RadRibbonBar ApplicationButtonImageSource="AppIcon.png" Title="Microsoft Word">
 <telerik:RadRibbonTab Header="Home"/>
 <telerik:RadRibbonTab Header="View"/>
</telerik:RadRibbonBar>

For more information about the RadRibbonTab, check out the Ribbon Tab topic in the Ribbon Controls section

The content of the ribbon is inserted into the RadRibbonGroups which are rendered inside the RadRibbonTabs.

• In the "Object and Timeline" pane in Expression Blend, select the first RadRibbonTab.

• Using the RadRibbonTab's Items property add a new item of type RadRibbonGroup. Set its Header property to "Clipboard".

The result XAML so far is shown on the next code-snippet.

CopyXAML

<telerik:RadRibbonBar ApplicationButtonImageSource="AppIcon.png" Title="Microsoft Word">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Clipboard"/>
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View"/>
</telerik:RadRibbonBar>

For more information about the ribbon group, read the main Ribbon Group topic.

• The final step is to add content to the ribbon group. You should again use the Items property, however this time you use the Items property of the RadRibbonGroup object.

For example, the next code snippet adds a RadRibbonSplitButton as a child of the group.

CopyXAML

<telerik:RadRibbonBar ApplicationButtonImageSource="AppIcon.png" Title="Microsoft Word">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Clipboard">

            <telerik:RadRibbonSplitButton Text="Paste" LargeImage="paste.png" Size="Large"
               telerik:ScreenTip.Title="Paste(Ctrl+V)"
               telerik:ScreenTip.Description="Paste the contents the Clipboard.">
                <telerik:RadRibbonSplitButton.DropDownContent>
                    <telerik:RadContextMenu BorderThickness="0">
                        <telerik:RadMenuItem Header="Paste"/>
                        <telerik:RadMenuItem Header="Paste Form"/>
                    </telerik:RadContextMenu>
                </telerik:RadRibbonSplitButton.DropDownContent>
            </telerik:RadRibbonSplitButton>

        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View"/>
</telerik:RadRibbonBar>

There are two things you should pay attention to in the above code snippet. The first is the declaration of the RadRibbonSplitButton and its drop down content. In fact the RadRibbonBar's API exposes several buttons you could use with the ribbon. For more information, check out the RadButtons - Overview topic. The second is the declaration of the screen tips. Screen Tip is a UI feature in which a small window appears when the mouse cursor is hovered over an icon or a ribbon element (command). The popup window will provide details that explain the command's function. For more information see the Screen Tips topic.

The Application Menu is equivalent to the File menu of the traditional menu UIs. It is represented by the circular button (named Application Button) on the upper-left corner of the RadRibbonBar control. The Application Menu appears when a user clicks the Application Button. This menu displays controls used to perform actions on the entire document, like Save, Print and Send. The Application Menu also provides a list of recent documents, access to application options for changing user settings and preferences, and application exit.

To declare the Application Menu you need to set the ApplicationMenu property like the example below.

CopyXAML

<telerik:RadRibbonBar ApplicationButtonImageSource="AppIcon.png" Title="Microsoft Word">

    <telerik:RadRibbonBar.ApplicationMenu>
        <telerik:ApplicationMenu>
            <!-- set the content in right pane -->
            <telerik:ApplicationMenu.Content>
                <StackPanel Width="250">
                    <telerik:RadGroupHeader Content="Recent Pictures"/>
                    <telerik:RadRibbonButton Content="1 Untitled.png" HorizontalAlignment="Stretch"/>
                    <telerik:RadRibbonButton Content="2 TelerikLogo.png" HorizontalAlignment="Stretch"/>
                    <telerik:RadRibbonButton Content="3 Silverlight 3.png" HorizontalAlignment="Stretch"/>
                    <telerik:RadRibbonButton Content="4 Test.png" HorizontalAlignment="Stretch"/>
                </StackPanel>
            </telerik:ApplicationMenu.Content>
            <!-- set the content in footer -->
            <telerik:ApplicationMenu.FooterContent>
                <StackPanel Orientation="Horizontal">
                    <telerik:RadRibbonButton Content="Options"/>
                    <telerik:RadRibbonButton Content="Exit"/>
                </StackPanel>
            </telerik:ApplicationMenu.FooterContent>
            <telerik:RadRibbonButton LargeImage="save.png" Text="Save"/>
            <telerik:RadRibbonSplitButton LargeImage="saveas.png" Text="Save as ...">
                <telerik:RadRibbonSplitButton.DropDownContent>
                    <StackPanel>
                        <telerik:RadRibbonButton Content="PDF"/>
                        <telerik:RadRibbonButton Content="Html Page"/>
                    </StackPanel>
                </telerik:RadRibbonSplitButton.DropDownContent>
            </telerik:RadRibbonSplitButton>
        </telerik:ApplicationMenu>
    </telerik:RadRibbonBar.ApplicationMenu>

    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Clipboard">
            <telerik:RadRibbonSplitButton Text="Paste" LargeImage="paste.png" Size="Large"
               telerik:ScreenTip.Title="Paste(Ctrl+V)"
               telerik:ScreenTip.Description="Paste the contents the Clipboard.">
                <telerik:RadRibbonSplitButton.DropDownContent>
                    <telerik:RadContextMenu BorderThickness="0">
                        <telerik:RadMenuItem Header="Paste"/>
                        <telerik:RadMenuItem Header="Paste Form"/>
                    </telerik:RadContextMenu>
                </telerik:RadRibbonSplitButton.DropDownContent>
            </telerik:RadRibbonSplitButton>
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View"/>
</telerik:RadRibbonBar>

The result is shown on the next image.

You should pay attention on a few things in the above example. First is the application menu declaration. The second thing is that the application menu consists of three parts: menu items, footer content and content. For more information see the Application Menu topic.

The Quick Access Toolbar is used to render a set of RadRibbon controls (commands) that are most commonly used in the application. It is rendered right next to the Application Menu button to make it easily accessible to end-users. To declare the Quick Access ToolBar you need to set the QuickAccessToolBar property. For more information and practical example, refer to the Quick Access Toolbar topic.

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. Check out the following topics, which are tightly connected to the resizing behavior:

• Resizing
• Ordered Wrap Panel
• Collapsible Panel

If you need further customizations of the RadRibbonBar you can take a look at some of the following topics:

• Styling the RadRibbonBar
• Styling the Ribbon Button
• Styling the Ribbon Toggle Button
• Styling the Ribbon Radio Button
• Styling the Ribbon DropDown Button
• Styling the Ribbon Split Button
• Styling the Application Menu Button
• Styling the Ribbon Tab
• Styling the Ribbon Group
• Styling the Ribbon Gallery
• Styling the Ribbon ComboBox
• Styling the Ribbon Group Chrome
• Styling the Ribbon TitleBar
• Styling the Ribbon Tab Scroll Buttons
• Styling the Ribbon Tab Headers
• Templating the RadRibbonBar
• Theming

Other Resources