[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
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Collapse]Rich Text Editor
   [Expand]Product Information
    Product Class Structure
    Supported Formats
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Rich Text Editor
     Lesson 2 - Customize the Integrated Ribbon UI
     Lesson 3 - Bind the RichEditControl to a Document Source using the MVVM pattern
     Lesson 4 - Create an Application Using the Instant Layout Assistant (for VS 2015 and earlier)
   [Expand]RichEditControl Document
   [Expand]Fields
    Text Formatting
    Import and Export
   [Expand]Page Layout
    Printing
    Hyphenation
    AutoCorrect
    Track Changes
    Mail Merge
    Restrictions and Protection
   [Expand]Visual Elements
    Services
    Events
    Commands
    HTML Tag Support
   [Expand]Examples
  [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)

Lesson 2 - Customize the Integrated Ribbon UI

This example demonstrates how to use bar customization actions to add, modify or remove elements of the DXRichEdit's integrated Ribbon UI.

This tutorial consists of the following sections:

Note

A complete sample project is available in the How to customize the integrated Ribbon repository on GitHub.

Expanded Create a new DXRichEdit Application

  1. Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.
  2. Add the RichEditControl object to your project. You can do this by dragging the RichEditControl item from the DX.19.2: Rich Text Editor Toolbox tab to the canvas.

  3. Right-click the RichEditControl object and select Layout | Reset All in the context menu. This stretches the RichEditControl to fill the entire window.

    As a result, you have a ready-to-use rich edit application with the integrated ribbon containing all available ribbon pages.

    Tip

    The RichEditControl comes complete with a ribbon which uses SVG icons by default. Set the ApplicationThemeHelper.UseDefaultSvgImages property to false before the Ribbon is initialized to switch to the bitmap icons.

Expanded Customize the Integrated Ribbon

Add the following XML namespace attributes to the MainWindow.xaml document:

Add the required customization actions to the RichEditControl.RibbonActions collection. The action's ElementName property specifies the name of the existing ribbon element you wish to change or remove. Element names are fields of the DevExpress.Xpf.RichEdit.DefaultBarItemNames class. You can easily deduce the required element name by following naming rules listed in the table below:

Ribbon Element Element Type Page Name Group Name Item Name DefaultBarItemNames Field
Ribbon<br> Ribbon Control RibbonControl
Page/Tab<br> Ribbon Page Home RibbonPage_Home
Contextual Tab<br> Ribbon Category Table Tools RibbonCategory_TableTools
Group<br> RibbonGroup Home Clipboard RibbonGroup_Home_Clipboard
Item<br> RibbonItem File Info Document Properties RibbonItem_File_Info_DocumentProperties

You can perform one of the following actions:

Remove a Ribbon Element

To remove an element from a Ribbon, add a RemoveAction with a specified element name to the RichEditControl.RibbonActions collection.

The action in XAML looks as follows:

Modify a Ribbon Element

To change an item's property, add an UpdateAction, specifying the element's name (the name is determined as explained previously), the property and a new value, to the RichEditControl.RibbonActions collection. The XAML that selects the View page looks as follows:

Add a New Ribbon Element

To add a new element, add an InsertAction to the RichEditControl.RibbonActions collection. The code below adds a new group "Demo" which contains a button "About" to the "View" ribbon page, assigns an image to it and subscribes to the button's ItemClick event.

Expanded See Also

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