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 a .NET Core project have been united. Check the .NET Core 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
- System.ComponentModel.Composition
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 RadRichTextBox to the Project
After adding references to the aforementioned assemblies, you can declare RadRichTextBox manually by writing the XAML code in Example 1 or add the control by dragging it from the Visual Studio Toolbox and dropping it over the XAML view.
Example 1: Adding RadRichTextBox in XAML
<telerik:RadRichTextBox x:Name="radRichTextBox" />
In order to use RadRichTextBox in XAML, you have to add the following namespace declaration:
Example 2: Declaring Telerik Namespace
When you run the application, you will see an empty RadRichTextBox as the one in Figure 1.xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Figure 1: 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
Figure 2 shows what the predefined UI looks like.
Figure 2: 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. Example 3 shows the implementation of a sample class that will be later used as data context for RadRichTextBox.
Example 3: 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. Example 4 shows how to bind the XamlData property from Example 3 to a XamlDataProvider and a RadRichTextBox.
Example 4: 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 Example 5 shows.
Example 5: 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.