Getting Started

• Feb 09, 2024
• 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:

Tip

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.

Tip

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.

Select the Ribbon Control and invoke its 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.

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

XAML

<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:

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

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

XAML

<dxr:RibbonControl RibbonStyle="Office2010" >
    <dxr:RibbonPageCategory>
        <dxr:RibbonPage/>
    </dxr:RibbonPageCategory>
</dxr:RibbonControl>

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:

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.

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

XAML

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

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.

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

The following XAML code is generated.

XAML

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

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.

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

XAML

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

Customize Ribbon Elements

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

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.

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.

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.

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.

XAML

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

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.