How to: Create a RichEditControl with a Ribbon UI

• Apr 13, 2022
• 3 minutes to read

This tutorial describes how to use the WinForms Rich Text Editor to create a word processing application with the ribbon UI and adjust its appearance.

Watch Video: DevExpress WinForms: Rich Text Editor

Create a RichEditControl Application

1. Create a new Windows Forms Application project in Visual Studio.

2. Drop the RichEditControl item from the DX.24.1: Rich Text Editor toolbox tab onto the form.

   

3. Click the RichEditControl’s smart tag and select Dock in Parent Container in the invoked RichEditControl Tasks menu. This allows the RichEditControl to expand to the form’s size.

   

Create Ribbon Pages

Design Time

1. Select Create Ribbon in the RichEditControl Tasks menu to add a RibbonControl onto the form.

   

2. Select necessary ribbon pages in the RichEditControl Tasks menu or click Create All Bars to add all available rich edit ribbon pages at once. You can customize the created ribbon afterward: change the ribbon style, add new ribbon elements, modify or remove the existing items.

   

3. Click the RibbonControl’s smart tag and select Convert Form To RibbonForm in the RibbonControl Tasks menu to convert the application form to a RibbonForm.

   

Runtime

Use the RichEditControl.CreateRibbon() method overloads to add a ribbon to the RichEditControl at runtime. Paste this code to the form constructor or to the Load event handler.

C#

RibbonControl ribbon = richEditControl1.CreateRibbon();
this.Controls.Add(ribbon);

VB.NET

Dim ribbon As RibbonControl = richEditControl1.CreateRibbon()
Me.Controls.Add(ribbon)

Result

Run the Rich Text Editor and view the result. For example, type and format text, insert pictures and explore the various ribbon items.

Note

Commands executed using the 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.

Change the Application’s Appearance

Change the Application’s Skin

At Design Time	In Code
Invoke the DevExpress Project Settings page and select a desired skin in the Skin Options group.	Call the UserLookAndFeel.Default static object’s UserLookAndFeel.SetSkinStyle method: C# using DevExpress.LookAndFeel; // ... UserLookAndFeel.Default.SetSkinStyle("Office 2019 Colorful", "Yale"); VB.NET Imports DevExpress.LookAndFeel ' ... UserLookAndFeel.Default.SetSkinStyle("Office 2019 Colorful", "Yale")

Use Bitmap or Vector Icons

The newly create word processing application uses vector icons. This ensures that the application is rendered correctly on high-DPI devices.

Set the static WindowsFormsSettings.AllowDefaultSvgImages property to DefaultBoolean.False at the application’s startup to use bitmap icons in you application.

C#

static void Main()
{
    DevExpress.XtraEditors.WindowsFormsSettings.AllowDefaultSvgImages = DevExpress.Utils.DefaultBoolean.False;
    // ...
}

VB.NET

Sub Main()
    DevExpress.XtraEditors.WindowsFormsSettings.AllowDefaultSvgImages = DevExpress.Utils.DefaultBoolean.False
    ' ...
End Sub

The following images illustrate the standard RichEditControl’s ribbon UI with default vector and bitmap icons:

• SVG Icons

  

• Bitmap Icons

  

Tip

You can disable or hide any command button on a ribbon tab by specifying restriction settings. Set the required properties of the RichEditBehaviorOptions (RichEditControl.Options.Behavior) and DocumentCapabilitiesOptions (RichEditControl.Options.DocumentCapabilities) objects to the DocumentCapability value to solve this task.

Use Skinned Open/Save File Dialogs

You can replace standard WinForms Open File and Save File dialogs with skinned DevExpress counterparts.

Set the static WindowsFormsSettings.UseDXDialogs property to DefaultBoolean.True at the application’s startup to enable skinned dialogs in your application.

Note

Add the required assembly references to use skinned DevExpress dialogs. Refer to the Deployment topic for more information.

C#

static void Main()
{
    DevExpress.XtraEditors.WindowsFormsSettings.UseDXDialogs = DefaultBoolean.True;
    // ...
}

VB.NET

Sub Main()
    DevExpress.XtraEditors.WindowsFormsSettings.UseDXDialogs = DevExpress.Utils.DefaultBoolean.True
    ' ...
End Sub

As a result, the Open File and Save File dialogs match the application’s theme.

Tip

Refer to the Examples section for more examples on how to work with the Rich Text Editor.