# Getting Started | WPF Controls | DevExpress Documentation

This topic shows how to create and customize a [RibbonControl](/WPF/DevExpress.Xpf.Ribbon.RibbonControl) at design time.

## Add Ribbon Control, Select Window Theme and Ribbon Style

The [ThemedWindow](/WPF/DevExpress.Xpf.Core.ThemedWindow) is a [Window](https://learn.microsoft.com/dotnet/api/system.windows.window) class descendant that supports [DevExpress WPF themes](/WPF/7406/common-concepts/themes) and Ribbon control integration. If your application uses a regular [Window](https://learn.microsoft.com/dotnet/api/system.windows.window), you can select the Window and use the [Quick Actions](/WPF/18095/whats-installed/smart-tags) to convert it to a ThemedWindow:

![Quick Actions Convert to Themed Window](/WPF/images/dxribbon-convert-to-themedwindow.png)

Tip

You can use the [Document Outline Window](https://docs.microsoft.com/en-us/previous-versions/46xf4h0w%28v=vs.110%29) to select an element for which to invoke Quick Actions.

Locate the [RibbonControl](/WPF/DevExpress.Xpf.Ribbon.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](/GeneralInformation/15615/installation/download-the-registered-version), 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](/WPF/images/dt_emptyribboncontrol16623.png)

Select the Ribbon Control and invoke its Quick Actions.

![RibbonControl Quick Actions](/WPF/images/dxribbon-dt-ribboncontrolsmarttag25958.png)

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](/WPF/images/dt_emptyribboncontrol_201016641.png)

A setter of the [RibbonControl.RibbonStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.RibbonStyle) property is added to the XAML code.

- XAML

<section id="tabpanel_791dg24YqC_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxr:RibbonControl RibbonStyle=&quot;Office2010&quot; &gt;
</code></pre></section>

## Create Ribbon Page Categories

Initially, the Ribbon Control contains a single default page [category](/WPF/7960/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/ribbon-page-categories-and-contextual-pages) ([RibbonDefaultPageCategory](/WPF/DevExpress.Xpf.Ribbon.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](/WPF/7960/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/ribbon-page-categories-and-contextual-pages) to the Ribbon:

![RibbonControl Quick Actions Add RibbonPageCategory](/WPF/images/dt_menu-addribbonpagecategory16624.png)

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

![RibbonControl Page Category](/WPF/images/dt_addednewpagecategory16625.png)

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

- XAML

<section id="tabpanel_791dg24YqC-1_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxr:RibbonControl RibbonStyle=&quot;Office2010&quot; &gt;
    &lt;dxr:RibbonPageCategory&gt;
        &lt;dxr:RibbonPage/&gt;
    &lt;/dxr:RibbonPageCategory&gt;
&lt;/dxr:RibbonControl&gt;
</code></pre></section>

You can use the [RibbonPageCategoryBase.IsVisible](/WPF/DevExpress.Xpf.Ribbon.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](/WPF/DevExpress.Xpf.Ribbon.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](/WPF/images/dt_pagecategory_color.png)

Refer to the [Ribbon Page Categories and Contextual Pages](/WPF/7960/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/ribbon-page-categories-and-contextual-pages) topic for more information about page categories.

## Create Pages

To add [pages](/WPF/7955/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/ribbon-page) to a custom category, select the category and use the **Add RibbonPage** Quick Actions command. To add [tabs](/WPF/7955/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/ribbon-page) to the default category, invoke the Quick Actions for the Ribbon.

![RibbonControl Quick Actions Add RibbonPage](/WPF/images/dt_menu-addribbonpage.png16626.png)

![RibbonControl New RibbonPage](/WPF/images/dt_addednewpage.png16627.png)

The **Add RibbonPage** command adds a new [RibbonPage](/WPF/DevExpress.Xpf.Ribbon.RibbonPage) object to the [RibbonPageCategoryBase.Pages](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.Pages) collection:

- XAML

<section id="tabpanel_791dg24YqC-2_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxr:RibbonControl RibbonStyle=&quot;Office2010&quot;&gt;
    &lt;dxr:RibbonPageCategory&gt;
        &lt;dxr:RibbonPage/&gt;
    &lt;/dxr:RibbonPageCategory&gt;
    &lt;dxr:RibbonPage Caption=&quot;Ribbon Page&quot;/&gt;
&lt;/dxr:RibbonControl&gt;
</code></pre></section>

## Create Page Groups

Page groups divide the contents of pages into sections.

Like pages, [page groups](/WPF/7956/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/ribbon-page-group) can also be created with Quick Actions. Select a page, invoke its Quick Actions and select **Add RibbonPageGroup**.

![RibbonControl Quick Actions AddRibbonPageGroup](/WPF/images/dt_menu-addribbonpagegroup16645.png)

The **Add RibbonPageGroup** command adds a new [RibbonPageGroup](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup) to the selected page’s [RibbonPage.Groups](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.Groups) collection.

![RibbonControl New PageGroup](/WPF/images/dt_addednewpagegroup16646.png)

The following XAML code is generated.

- XAML

<section id="tabpanel_791dg24YqC-3_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxr:RibbonPage Caption=&quot;Home&quot;&gt;
    &lt;dxr:RibbonPageGroup Caption=&quot;Ribbon Page Group&quot;/&gt;
&lt;/dxr:RibbonPage&gt;
</code></pre></section>

## Create Buttons

Use [bar item](/WPF/7983/controls-and-libraries/ribbon-bars-and-menu/ribbon/populating-ribbon) objects to add Ribbon elements such as commands (buttons), submenus, static text, and editors from the DXEditors library.

For instance, use the [BarButtonItem](/WPF/DevExpress.Xpf.Bars.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](/WPF/images/dt_menu_addbaritem16648.png)

Select the **Add-&gt;BarButtonItem** command to add a button.

![RibbonControl Quick Actions New Bar Item](/WPF/images/dt_addednewbarbuttonitem16650.png)

- XAML

<section id="tabpanel_791dg24YqC-4_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxr:RibbonPage Caption=&quot;Ribbon Page&quot;&gt;
    &lt;dxr:RibbonPageGroup&gt;
        &lt;dxb:BarButtonItem Content=&quot;BarButtonItem&quot;/&gt;
    &lt;/dxr:RibbonPageGroup&gt;
&lt;/dxr:RibbonPage&gt;
</code></pre></section>

## 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](/WPF/images/dt_barbuttonitem_smarttagmenu25959.png)

For instance, you can set a button’s [BarItem.Glyph](/WPF/DevExpress.Xpf.Bars.BarItem.Glyph) or [BarItem.LargeGlyph](/WPF/DevExpress.Xpf.Bars.BarItem.LargeGlyph) property. To do this, click the ellipsis button next to a properties to invoke the [DX Image Picker](/WPF/120093/common-concepts/images/devexpress-image-gallery) and select an image.

![RibbonControl Quick Actions Image Picker](/WPF/images/dt_barbuttonitem_smarttagmenu-glyph-dximagegallery25960.png)

![RibbonControl Quick Actions Bar Item Glyph](/WPF/images/dt_barbuttonitem_largeglyphset25961.png)

If you specify both small and large images, the button displays one of these images according to the [BarItem.RibbonStyle](/WPF/DevExpress.Xpf.Bars.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](/WPF/images/dt_ribbon_appearance_tab.png)

## Add Buttons to Quick Access Toolbar and Page Header Region

To add bar items to the [Ribbon Quick Access Toolbar](/WPF/7957/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-structure/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](/WPF/images/dt_menu_addtoqat16652.png)

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](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.ToolbarItems) collection.

![RibbonControl Toolbar Bar Item](/WPF/images/dt_menu_buttonaddedtoqat25962.png)

- XAML

<section id="tabpanel_791dg24YqC-5_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxr:RibbonControl RibbonStyle=&quot;Office2010&quot;&gt;
    &lt;dxr:RibbonControl.ToolbarItems&gt;
        &lt;dxb:BarButtonItem Content=&quot;BarButtonItem&quot; Glyph=&quot;{dx:DXImage SvgImages/PDF Viewer/Menu.svg}&quot;/&gt;
    &lt;/dxr:RibbonControl.ToolbarItems&gt;
</code></pre></section>

The **Add to Page Header** command adds a bar item to the [RibbonControl.PageHeaderItems](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.PageHeaderItems) collection.

## Bar Item Actions

To implement actions for bar items, handle the [BarItem.ItemClick](/WPF/DevExpress.Xpf.Bars.BarItem.ItemClick) event or specify commands with the [BarItem.Command](/WPF/DevExpress.Xpf.Bars.BarItem.Command) property.