[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 1 - Create a Simple Rich Text Editor

This document provides step-by-step instructions on how to create a simple WPF Rich Text Editor application and adjust its appearance.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2586.

This tutorial includes the following sections:

Expanded Create a New RichEdit 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. Drag 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 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. Note, however, that you will need to add references to the following libraries manually:

    • 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), but 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\

  4. Load a document into the RichEditControl. You can do this in XAML using the RichEditControl.DocumentSource property. Documents can be loaded from a stream, byte array or from a location specified by the full file path or Uri. An empty document is created if the RichEditControl.DocumentSource property is null.

    The following code snippet uses a pack Uri as a document source to load a sample document that was added to the root of current project as a resource file:

    In this example, WpfApplication1 is the name of the WPF project, and Document.docx is the loaded document.

  5. Run the project. The image below shows the result.

Tip

You can use the Template Gallery to create a WPF Rich Edit application. Select Template Gallery option in the Visual Studio New Project menu and select MS Word Inspired Solution template.

Expanded Remove the Integrated Ribbon

The newly created WPF Rich Edit application has an integrated ribbon UI. If you do not require ribbon UI, you can remove it by doing one of the following:

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

  • In XAML, set the RichEditControl.CommandBarStyle property to CommandBarStyle.Empty, or remove it from the markup.

Expanded Add Reviewing Pane

Click the RichEditControl's smart tag and check ShowReviewingPane box to provide the application with the built-in Reviewing Pane.

Expanded Change the Application's Appearance

Change the application's theme

The WPF Rich Text Editor control uses the Office2016White theme by default, so the DevExpress.Xpf.Themes.Office2016White.v19.2.dll library should be deployed to the client machine. Refer to the Theme List topic for a list of available themes and corresponding assemblies.

Do one of the following to apply a different theme to your application:

  • Click the ThemedWindow's smart tag, and select a desired theme from the ApplicationTheme drop-down menu.

  • Set the required theme in code via the ApplicationThemeHelper.ApplicationThemeName property:

  • Apply a theme to the RichEditControl's container (e.g., window) using the ThemeManager.ThemeName property:

Use bitmap or vector icons

The WPF Rich Text Editor application with an integrated ribbon uses vector icons by default, which ensures that the application is rendered correctly on high-DPI devices.

Set the ApplicationThemeHelper.UseDefaultSvgImages property to false at application startup to use bitmap icons everywhere in your WPF application's GUI:

The following images illustrate the standard WPF RichEditControl's ribbon UI with default vector and bitmap icons.

  • SVG Icons

  • Bitmap Icons

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