Skip to main content

Getting Started

  • 4 minutes to read

This topic shows how to create and customize a RibbonControl at design time.

Add Ribbon Control, Select Window Theme and Ribbon Style

The ThemedWindow is a Window class descendant that supports DevExpress WPF themes and Ribbon control integration. If your application uses a regular Window, you can select the Window and use the Quick Actions to convert it to a ThemedWindow:

Quick Actions Convert to Themed Window


You can use the Document Outline Window to select an element for which to invoke Quick Actions.

Locate the RibbonControl component in the Visual Studio Toolbox and drop it onto the window.


If you add the DevExpress products via a NuGet feed instead of the Unified Component Installer, the toolbox doesn’t contain DevExpress controls until you add the corresponding NuGet package.

Go to Tools | NuGet Package Manager | Manage NuGet Packages for Solution and add the DevExpress.Wpf.Ribbon NuGet package.

Create RibbonControl

Select the Ribbon Control and invoke its Quick Actions.

RibbonControl Quick Actions

You can use Quick Actions to add ribbon elements, specify the application menu, set the ribbon style, and so on. Set the RibbonStyle property to Office2010 to apply the MS Office 2010-inspired ribbon style.

RibbonControl Quick Actions Ribbon Style

A setter of the RibbonControl.RibbonStyle property is added to the XAML code.

<dxr:RibbonControl RibbonStyle="Office2010" >

Create Ribbon Page Categories

Initially, the Ribbon Control contains a single default page category (RibbonDefaultPageCategory) (the default category’s caption is never visible). Pages displayed within the default category can be considered as main, context-independent pages. You can use Quick Actions to add custom page categories to the Ribbon:

RibbonControl Quick Actions Add RibbonPageCategory

The Add RibbonPageCategory command adds a new Page Category that contains a single page.

RibbonControl Page Category

The corresponding code is added to the XAML to create a new Page Category.

<dxr:RibbonControl RibbonStyle="Office2010" >

You can use the RibbonPageCategoryBase.IsVisible property to control the visibility of page categories (and the visibility of pages that belong to this category).

To change the background color of custom categories and pages, use the RibbonPageCategoryBase.Color property. The specified color is blended with the control’s background when captions of page categories and pages are rendered:

RibbonControl Page Category Quick Actions

Refer to the Ribbon Page Categories and Contextual Pages topic for more information about page categories.

Create Pages

To add pages to a custom category, select the category and use the Add RibbonPage Quick Actions command. To add tabs to the default category, invoke the Quick Actions for the Ribbon.

RibbonControl Quick Actions Add RibbonPage

RibbonControl New RibbonPage

The Add RibbonPage command adds a new RibbonPage object to the RibbonPageCategoryBase.Pages collection:

<dxr:RibbonControl RibbonStyle="Office2010">
    <dxr:RibbonPage Caption="Ribbon Page"/>

Create Page Groups

Page groups divide the contents of pages into sections.

Like pages, page groups can also be created with Quick Actions. Select a page, invoke its Quick Actions and select Add RibbonPageGroup.

RibbonControl Quick Actions AddRibbonPageGroup

The Add RibbonPageGroup command adds a new RibbonPageGroup to the selected page’s RibbonPage.Groups collection.

RibbonControl New PageGroup

The following XAML code is generated.

<dxr:RibbonPage Caption="Home">
    <dxr:RibbonPageGroup Caption="Ribbon Page Group"/>

Create Buttons

Use bar item objects to add Ribbon elements such as commands (buttons), submenus, static text, and editors from the DXEditors library.

For instance, use the BarButtonItem object to add a regular button.

Select a ribbon page group, invoke its Quick Actions and use the Add command to add new bar items.

RibbonControl Quick Actions Add Bar Item

Select the Add->BarButtonItem command to add a button.

RibbonControl Quick Actions New Bar Item

<dxr:RibbonPage Caption="Ribbon Page">
        <dxb:BarButtonItem Content="BarButtonItem"/>

Customize Ribbon Elements

Select a ribbon element and invoke its Quick Actions to access the element’s main settings.

RibbonControl Quick Actions Customize Bar Item

For instance, you can set a button’s BarItem.Glyph or BarItem.LargeGlyph property. To do this, click the ellipsis button next to a properties to invoke the DX Image Picker and select an image.

RibbonControl Quick Actions Image Picker

RibbonControl Quick Actions Bar Item Glyph

If you specify both small and large images, the button displays one of these images according to the BarItem.RibbonStyle property and the current Ribbon’s width. The Ribbon Control automatically swaps large images with small images when its width is reduced, and vice versa.

The Appearance tab in the Quick Actions pop-up menu contains settings such as brushes, font parameters, visibility, opacity, and so on. The Appearance tab is available for the Ribbon, bar items, and page groups.

RibbonControl Quick Actions Appearance

Add Buttons to Quick Access Toolbar and Page Header Region

To add bar items to the Ribbon Quick Access Toolbar and Page Header region (at the right edge of the Ribbon Control next to ribbon tab headers), invoke the Quick Actions for the Ribbon and use the Add to Toolbar and Add to Page Header commands.

RibbonControl Quick Actions Add Items to Toolbar

When you use the Add to Toolbar command to add a bar item to the Quick Access Toolbar, the bar item is created and added to the RibbonControl.ToolbarItems collection.

RibbonControl Toolbar Bar Item

<dxr:RibbonControl RibbonStyle="Office2010">
        <dxb:BarButtonItem Content="BarButtonItem" Glyph="{dx:DXImage SvgImages/PDF Viewer/Menu.svg}"/>

The Add to Page Header command adds a bar item to the RibbonControl.PageHeaderItems collection.

Bar Item Actions

To implement actions for bar items, handle the BarItem.ItemClick event or specify commands with the BarItem.Command property.