[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
   [Expand]Getting Started
   [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
   [Collapse]Examples
    [Collapse]UI Customization
      How to: Modify, Add or Remove Items in Context Menu
      How to: Create Separate Command UI for a Rich Text Editor
    [Expand]Files
    [Expand]Text
    [Expand]Formatting
    [Expand]Styles
    [Expand]Pictures
    [Expand]Text Boxes
    [Expand]Tables
    [Expand]Layout
    [Expand]Automation
     Spell Check
    [Expand]Export
    [Expand]Printing
    [Expand]Protection
    [Expand]Commands
    [Expand]Miscellaneous
  [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)

How to: Create Separate Command UI for a Rich Text Editor

This topic describes how you can add ribbon or bar UI to the WPF Rich Text Editor to provide end-users with a familiar Office-inspired interface.

Note

The newly created WPF Rich Text Editor application already contains the integrated ribbon with all available ribbon pages. You can customize the integrated ribbon user interface by adding new ribbon elements, modifying or removing the existing ones. Refer to the Lesson 2 - Customize the Integrated Ribbon UI topic for example.

This tutorial consists of the following sections:

Expanded Create a Rich Text Editor Application

  1. Create a new WPF Application project and 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.

  2. Right-click the RichEditControl object and select Layout | Reset All to stretch the RichEditControl to fill the entire window.

    After this, your XAML should look like the following. (If it does not, you can overwrite your code.)

    Note that you can add the RichEditControl by overwriting your MainWindow.xaml file with this code without dragging the RichEditControl control to the window. However, in this case, you need to manually add references to the following libraries.

    • DevExpress.Data.v19.2.dll
    • DevExpress.Mvvm.v19.2.dll
    • DevExpress.Office.v19.2.Core.dll
    • DevExpress.Pdf.v19.2.dll
    • DevExpress.Printing.v19.2.Core.dll
    • DevExpress.RichEdit.v19.2.Core.dll
    • DevExpress.Images.v19.2.dll
    • DevExpress.Xpf.Core.v19.2.dll
    • DevExpress.Xpf.Docking.v19.2.dll
    • DevExpress.Xpf.DocumentViewer.v19.2.dll
    • DevExpress.Xpf.Layout.v19.2.Core.dll
    • DevExpress.Xpf.Printing.v19.2.dll
    • DevExpress.Xpf.Ribbon.v19.2.dll
    • DevExpress.Xpf.RichEdit.v19.2.dll

    To add references, right-click the References node in the Solution Explorer and select Add Reference… in the invoked context menu. Refer to the Redistribution and Deployment article for a full list or required assemblies.

    Note

    Normally, when adding references to these assemblies, you should choose them from the Global Assembly Cache (GAC). However, if you prefer to copy them locally, or need to include them later into your product's installation, you can find copies of them in the following directory.

    C:\Program Files (x86)\DevExpress 19.2\Components\Bin\Framework\

  3. Click the RichEditControl's smart tag. In the invoked menu, under Integrated Ribbon and Reviewing Pane, select Empty from the CommandBarStyle drop-down list.

Expanded Create a Ribbon UI

Right-click the RichEditControl in the Visual Studio Designer, and select Create Ribbon Items in the invoked context menu. You can add required ribbon pages individually, or select All to add all available ribbon pages at once.

Expanded Create a Bar UI

Right-click the RichEditControl in the Visual Studio Designer, and select Create Bars in the invoked context menu. You can add required bar items individually, or select All to add all available bars at once.

Note

Commands executed using the Bar (Ribbon) user interface can throw unhandled exceptions if a problem occurs. Consider the situation when a document is being saved to a locked or read-only file. To prevent application failure, subscribe to the RichEditControl.UnhandledException event and set the RichEditUnhandledExceptionEventArgs.Handled property to true.

Expanded Delete Command UI Items

Note

This section is not applicable to the integrated Ribbon UI (created using the RichEditControl.CommandBarStyle property).

To delete the desired command UI item, right-click the corresponding bar button item at design-time and select Delete BarButtonItem in the invoked context menu...

...or comment or delete the corresponding BarButtonItem and BarButtonItemLink in your XAML file. The code sample below shows how the Open button is represented in XAML:

Expanded See Also

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