Getting Started with WPF RichTextBox

RadRichTextBox is a control that allows you to display and edit rich text content including sections, paragraphs, spans, italic text, bold text, inline images, tables etc. This topic will help you to quickly get started using the control. It will focus on the following:

• Assembly References
• Adding RadRichTextBox to the Project
• Using the predefined UI of RadRichTextBox
• Showing a Document in RadRichTextBox
• Tables, Track Changes and Document Protection

Assembly References

The references required to use RadRichTextBox in .NET 6 or later projects have been united. Check the .NET Support help topic for the full list of dependencies.

The minimal set of references you need to have in your application in order to have a RadRichTextBox are as follows:

• Telerik.Windows.Controls
• Telerik.Windows.Data
• Telerik.Windows.Documents
• Telerik.Windows.Documents.Core
• System.ComponentModel.Composition
• System.Drawing.Common NuGet package—Required only for .NET 6 and later and only if the Telerik assemblies are referenced manually in the project. In case you install the dlls using NuGet or the Telerik Visual Studio Extension, this package is included automatically.

In order to use the built-in pop-ups (SelectionMiniToolBar, ContextMenu, all dialogs), you should add references to the following assemblies:

• Telerik.Windows.Controls.RichTextBoxUI
• Telerik.Windows.Controls.ImageEditor
• Telerik.Windows.Controls.Input
• Telerik.Windows.Controls.Navigation
• Telerik.Windows.Controls.RibbonView

For more information on using RadRichTextBox with RadRichTextBoxRibbonUI, please refer to this article.

If you are not using the SelectionMiniToolbar, the ContextMenu and RadRichTextBoxRibbonUI, you can omit the last five assemblies.

For import from/ export to different file formats, you would need references to:

• Telerik.Windows.Documents.FormatProviders.OpenXml and Telerik.Windows.Zip for DOCX.
• Telerik.Windows.Documents.FormatProviders.Html for HTML.
• Telerik.Windows.Documents.FormatProviders.Xaml for XAML.
• Telerik.Windows.Documents.FormatProviders.Rtf for RTF.
• Telerik.Windows.Documents.FormatProviders.Pdf and Telerik.Windows.Zip for PDF (export only).

The default en-US dictionary for SpellChecking is located in:

• Telerik.Windows.Documents.Proofing.Dictionaries.En-US.

In order to be able to copy/paste rich text from desktop applications, you have to add references to Telerik.Windows.Documents.FormatProviders.Rtf and Telerik.Windows.Documents.FormatProviders.Html.

Adding Telerik Assemblies Using NuGet

To use RadRichTextBox when working with NuGet packages in .NET Framework 4.6.2, install the Telerik.Windows.Documents.for.Wpf.Xaml package. In .NET Framework 4.6.2 you will need to install packages also for the format providers and the RichTextBoxUI component. In .NET 6 these components are merged in the RichTextBox package mentioned below.

To use RadRichTextBox when working with NuGet packages in .NET 6 and later, install the Telerik.Windows.Controls.RichTextBox.for.Wpf.Xaml package.

The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

Adding RadRichTextBox to the Project

After adding references to the aforementioned assemblies, you can declare RadRichTextBox manually by writing the XAML code as in the following example or add the control by dragging it from the Visual Studio Toolbox and dropping it over the XAML view.

Adding RadRichTextBox in XAML

<telerik:RadRichTextBox x:Name="radRichTextBox" /> 

In order to use RadRichTextBox in XAML, you have to add the following namespace declaration:

Declaring Telerik Namespace

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 

When you run the application, you will see an empty RadRichTextBox.

Empty RadRichTextBox

RadRichTextBox uses UI Virtualization by creating UI elements only for the parts of the document currently visible in the viewport. For this purpose, the control should not be measured in infinity, so avoid placing it in containers that might cause this (e.g. StackPanel, ScrollViewer).

Using the Predefined UI of RadRichTextBox

In addition to its API, RadRichTextBox has a rich set of commands, exposed through its Commands property. In order to use them with a UI element which supports commanding, you have to bind the Command property of the element to the respective command of the RadRichTextBox.

To learn more about Commands read this topic.

These commands can also be used with the predefined UI that comes with RadRichTextBox - RadRichTextBoxRibbonUI, which is a ribbon control based on RadRibbonView. You can use the predefined and customizable ContextMenu and SelectionMiniToolBar as well. In order to do so, make sure your project references the following assemblies:

• Telerik.Windows.Controls
• Telerik.Windows.Controls.Input
• Telerik.Windows.Controls.Navigation
• Telerik.Windows.Controls.RibbonView
• Telerik.Windows.Controls.RichTextBoxUI

Predefined RadRichTextBoxRibbonUI

You can read more about the predefined UI by following these links - RadRichTextBoxRibbonUI, ContextMenu, SelectionMiniToolBar.

Showing a Document in RadRichTextBox

You can bind a document in XAML or directly set the Document property of RadRichTextBox in code-behind.

Binding in XAML

With the DataProvider classes you can easily bind RTF, HTML or XAML documents represented as strings to a RadRichTextBox. The DocxDataProvider works with documents represented as a byte array.

The next example shows the implementation of a sample class that will be later used as data context for RadRichTextBox.

Sample DataContext class

public class ExampleDataContext : INotifyPropertyChanged 
{ 
    private string xamlData; 
 
    public string XamlData 
    { 
        get 
        { 
            return this.xamlData; 
        } 
        set 
        { 
            if (value != this.xamlData) 
            { 
                this.xamlData = value; 
                OnPropertyChanged("XamlData"); 
            } 
        } 
    } 
 
    public event PropertyChangedEventHandler PropertyChanged; 
 
    private void OnPropertyChanged(string propertyName) 
    { 
        if (PropertyChanged != null) 
        { 
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
        } 
    } 
} 

Public Class ExampleDataContext 
    Implements INotifyPropertyChanged 
 
    Private _xamlData As String 
 
    Public Property XamlData() As String 
        Get 
            Return Me._xamlData 
        End Get 
        Set(value As String) 
            If value <> Me._xamlData Then 
                Me._xamlData = value 
                OnPropertyChanged("XamlData") 
            End If 
        End Set 
    End Property 
 
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged 
 
    Private Sub OnPropertyChanged(propertyName As String) 
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
    End Sub 
End Class 

The ExampleDataContext class implements the INotifyPropertyChanged interface and raises the PropertyChanged event every time a property value changes, in order to support two-way binding.

When you already have prepared the sample data, you can bind it to RadRichTextBox. This is done through the corresponding DataProvider.

The following example shows how to bind the XamlData property from the above example to a XamlDataProvider and a RadRichTextBox.

Using a DataProvider

<Grid> 
    <Grid.Resources> 
        <local:ExampleDataContext x:Key="ExampleDataContext"/> 
    </Grid.Resources> 
    <telerik:XamlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}"  
                              DataContext="{StaticResource ExampleDataContext}"  
                              Xaml="{Binding Path=XamlData, Mode=TwoWay}" /> 
    <telerik:RadRichTextBox Name="radRichTextBox" /> 
</Grid> 

More details on using data providers in RadRichTextBox are available here.

You can download the complete runnable project demonstrating Data Binding in RadRichTextBox from our SDK Repository.

Setting the Document in Code-Behind

The RadRichTextBox class exposes the Document property of type RadDocument that allows you to assign a document to the control in code-behind. You can import an existing document and show it in RadRichTextBox using a format provider as the next shows.

Showing an Existing Document in RadRichTextBox

RadDocument document; 
Telerik.Windows.Documents.FormatProviders.OpenXml.Docx.DocxFormatProvider provider = new Telerik.Windows.Documents.FormatProviders.OpenXml.Docx.DocxFormatProvider(); 
 
using (Stream stream = Application.GetResourceStream(GetResourceUri("sampleDocument.docx")).Stream) 
{ 
    document = provider.Import(stream); 
} 
 
this.radRichTextBox.Document = document; 

Dim document As RadDocument 
Dim provider As New Telerik.Windows.Documents.FormatProviders.OpenXml.Docx.DocxFormatProvider() 
 
Using stream As Stream = Application.GetResourceStream(GetResourceUri("sampleDocument.docx")).Stream 
    document = provider.Import(stream) 
End Using 
 
Me.radRichTextBox.Document = document 

All the supported document formats and the corresponding format providers are described in the Import/Export section.

Tables, Track Changes and Document Protection

RadRichTextBox comes with many built-in features. Here are some of them:

• You can create, modify and delete tables. For more details you can refer to this topic.

• The Track Changes functionality by default is disabled. To enable it, set the IsTrackChangesEnabled property to True.

• You can enable the Document Protection with the ProtectDocument() method.

See Also

• Document Elements
• Import/Export
• Events
• Styles and Templates