[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Collapse]Ribbon, Bars and Menu
   [Expand]Common Features
   [Expand]Bars
   [Collapse]Ribbon
    [Expand]Overview
    [Collapse]Ribbon Structure
      Ribbon Control
      Ribbon Page Categories and Contextual Pages
      Ribbon Page
      Ribbon Page Group
      Ribbon Quick Access Toolbar
      Ribbon Status Bar
      Ribbon Control Integration
    [Expand]Populating Ribbon
    [Expand]Ribbon Menu
    [Expand]Features
     Runtime Customization
    [Expand]Examples
   [Expand]Menus
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Ribbon Control

The RibbonControl is the main part of the Ribbon UI, designed to replace the toolbars and menus with tabbed pages. Each page contains various elements (buttons, sub-menus, in-place editors, galleries, etc.) that are combined into one or multiple groups.

Expanded Ribbon Window

The Ribbon Control is usually placed at the top of a window. We recommend that you use the ThemedWindow (see ThemedWindow) which supports integration with the Ribbon Control instead of the Window class.

Expanded Ribbon Control Elements

Visually, the Ribbon Control consists of the following regions.

  • Command Region - Displays various bar items (buttons, sub-menus, in-place editors, galleries, etc.) that are combined into groups and pages.
  • Quick Access Toolbar - Displays frequently used commands. End-users can add commands to this bar at runtime using a context menu.
  • Application Button - Used to provide a menu for the application.

In addition, you can create a Ribbon Status Bar at the bottom of the window. This bar is painted to concur with the RibbonControl's look and feel. You can add commands to this status bar, aligning them to the bar's left and right edges.

Structurally, a RibbonControl consists of page categories, which are containers of ribbon pages. There are two types of page categories:

  • Default Page Category - It is designed to display default pages, which are typically always visible during application runtime. Unlike a custom category, the default category does not support a caption. The default page is never visible, only its contents are displayed. In the image above, the Home and Settings pages belong to the default page category.
  • Custom Page Category - This category is designed to implement contextual ribbon pages, which can be temporarily made visible according to some logic. Captions are displayed for custom page categories. In addition, custom page categories and category pages' headers are painted in a different manner than the default page headers. See Ribbon Page Categories and Contextual Pages to learn more.

A page category contains pages as children, which are represented as tabs. An end-user can click a tab to access the commands displayed in it.

Ribbon pages consist of page groups. These visually divide all bar items into logical groups within each tab.

For details on each individual ribbon element, see the corresponding topics.

Expanded Ribbon Layout

The Ribbon Control provides a smart layout that maximally uses available space to display as much information as possible (items, captions, etc.). For instance, if a page has been stretched and has no place to display all available items, it automatically becomes a drop button, which can display sub-items within a drop down panel.

Simplified Mode

The Ribbon Control's Simplified Mode is an Office 2019-inspired single-line Ribbon mode.

You can use Simplified mode in the Office2007, Office2010, and Office2019 ribbon styles.

Availability

Follow the steps below to enable Simplified mode:

  1. Set the AllowSimplifiedRibbon (see RibbonControl.AllowSimplifiedRibbon) property to true.
  2. Click the Ribbon minimization button or set the IsSimplified (see RibbonControl.IsSimplified) property to true.

The following code snippet enables the Ribbon's Simplified mode:

Simplified Mode Glyphs

The Simplified Ribbon uses a 20x20 pixel glyph size. You can define it with the BarItem.MediumGlyph property. If you do not have 20x20 size glyphs, you can still use the classic 16x16 pixel size.

Ribbon Items Location

Ribbon Control provides the SimplifiedModeSettings.Location attached property (see SimplifiedModeSettings.Location), which enables you to specify the ribbon item location.

The following code snippet displays the Open ribbon item only in the Simplified mode:

Expanded Ribbon Style

The Ribbon Control supports different paint styles (e.g., Microsoft Office 2007, Microsoft Office 2010, and Microsoft Office 2019). You can choose a paint style using the RibbonControl.RibbonStyle property.

Expanded Examples

Expanded See Also

Is this topic helpful?​​​​​​​