Lesson 1 - Create a Simple Rich Text Editor

• May 22, 2020
• 4 minutes to read

This document provides you with step-by-step instructions on how to create a simple application with RichEditControl. It also describes how you can programmatically perform basic file operations (creating, saving and loading a document) in RichEditControl.

TIP

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

This tutorial includes the following steps.

• Step 1. Create a New Project and Add a RichEditControl
• Step 2. Add Buttons
• Step 3. Create a New Document
• Step 4. Save a Document
• Step 5. Load a Document

Step 1. Create a New Project and Add a RichEditControl

1. Create a new Silverlight Application project and open the MainPage.xaml file in the Designer.

2. Add the RichEditControl object to your project. You can do this by dragging RichEditControl item from the DX.14.2: Rich Text Editor toolbox tab.

   

   Let's edit XAML for a better layout. Remove the Margins property attribute and set the RichEditControl.HorizontalAlignment and RichEditControl.VerticalAlignment properties to Stretch. This will stretch RichEditControl to fill the whole window.

   After this, your XAML should look like the following.

   XAML

   
   <UserControl x:Class="Lesson1.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="400" xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <dxre:RichEditControl HorizontalAlignment="Stretch" Name="richEditControl1" VerticalAlignment="Stretch" />
       </Grid>
   </UserControl>
   

   Note that you can add RichEditControl to the new page by overwriting your MainPage.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.v14.2.dll
   • DevExpress.Office.v14.2.Core.dll
   • DevExpress.Printing.v14.2.Core.dll
   • DevExpress.RichEdit.v14.2.Core.dll
   • DevExpress.Xpf.Core.v14.2.dll
   • DevExpress.Xpf.Printing.v14.2.dll
   • DevExpress.Xpf.Printing.v14.2.Core.dll
   • DevExpress.Xpf.Ribbon.v14.2.dll
   • DevExpress.Xpf.RichEdit.v14.2.dll

   NOTE

   You can find assembly files at the following location. C:\Program Files (x86)\DevExpress 14.2\Components\Bin\Silverlight

Now you have a simple application with RichEditControl providing a basic functionality for editing and viewing documents. You can use default keyboard shortcuts, context menu, horizontal and vertical rulers.

The following steps describe how to create, save and load a document in RichEditControl.

Step 2. Add Buttons

• Drop three Button controls ("New", "Save", "Load") from the All WPF Controls toolbox tab onto the window.

  

• Subscribe to the Click event for each button. As a result, your XAML should look like the following.

  XAML

  
  <UserControl x:Class="Lesson1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400" xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit">
  
      <Grid>
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <dxre:RichEditControl Name="richEditControl1" 
                                HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                Grid.Column="1"/>
          <Button Name="NewDocumentButton"  
                  Margin="12,12,12,0" Height="23" Width="75"
                  VerticalAlignment="Top"
                  Grid.Column="0"
                  Content="New"
                  Click="NewDocumentButton_Click"/>
  
          <Button Name="SaveDocumentButton" 
                  Margin="12,39,12,0" Height="23" Width="75" 
                  VerticalAlignment="Top"
                  Grid.Column="0"
                  Content="Save"
                  Click="SaveDocumentButton_Click"/>
  
          <Button Name="LoadDocumentButton" 
                  Margin="12,66,12,0" Height="23" Width="75" 
                  VerticalAlignment="Top"
                  Grid.Column="0"
                  Content="Load"
                  Click="LoadDocumentButton_Click"/>
      </Grid>
  </UserControl>
  

Step 3. Create a New Document

To create a new document in RichEditControl when clicking the New button, call the RichEditControl.CreateNewDocument method in the Click event handler of the corresponding button.

C#

private void NewDocumentButton_Click(object sender, RoutedEventArgs e) {
    richEditControl1.CreateNewDocument();
}

VB.NET

Private Sub NewDocumentButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    richEditControl1.CreateNewDocument()
End Sub

Step 4. Save a Document

To save a document when clicking the Save button, call the RichEditControl.SaveDocument method in the Click event handler of the corresponding button.

C#

private void SaveDocumentButton_Click(object sender, RoutedEventArgs e) {
    richEditControl1.SaveDocument();
}

VB.NET

Private Sub SaveDocumentButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    richEditControl1.SaveDocument()
End Sub

This will invoke the Save As dialog that enables you to choose the location, as well as specify the filename and destination format. Note that the Silverlight security model (unless we enable the Out-of-Browser capabilities) does not allow for the accessing of the file system without prompting the dialog for the user.

Step 5. Load a Document

To load an existing document from a file when clicking the Load button, call the RichEditControl.LoadDocument method in the Click event handler of the corresponding button as shown below.

C#

private void LoadDocumentButton_Click(object sender, RoutedEventArgs e) {
    richEditControl1.LoadDocument();
}

VB.NET

Private Sub LoadDocumentButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    richEditControl1.LoadDocument()
End Sub

This will invoke the Open dialog that enables you to choose the file to load. Note that the Silverlight security model (unless we enable the Out-of-Browser capabilities) does not allow for the accessing of the file system without prompting the dialog for the user.