BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Text Input Controls - RichTextBox

The fifty-third part of the Windows Presentation Foundation Fundamentals tutorial describes the RichTextBox control. This control permits the editing of documents with complex formatting and inserted images.

RichTextBox

The RichTextBox control has a similar appearance to a standard TextBox. However, where TextBoxes only permit you to edit plain text, RichTextBoxes allow you to create complex documents with font and paragraph formatting, page layout options and inserted elements, such as images.

When you use a RichTextBox, it is linked to a FlowDocument object. This is one of the document types supported by WPF. We'll look at documents later in the tutorial, so in this article you'll see how to access the FlowDocument but we won't go into detail about its structure.

To demonstrate the use of a RichTextBox we need a sample solution. Create a new WPF Application project in Visual Studio, naming the project, "RichTextBoxDemo". Once ready, replace the XAML in the main window with the following code:

<Window x:Class="RichTextBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RichTextBox Demo"
        Height="150"
        Width="250">   
    <Grid>
        <RichTextBox/>
    </Grid>
</Window>

The resultant window contains a RichTextBox that completely fills the available area. Try typing information into the RichTextBox. The image below shows the result of copying and pasting the above XAML from Visual Studio into the control. You can see that the formatting of the original text is preserved.

RichTextBox demo window

When editing the text in the RichTextBox, some of the more common formatting short-cut keys are supported by default. For example, you can add bold, italic or underline effects by pressing Ctrl-B, Ctrl-I or Ctrl-U respectively. You can align text with Ctrl-L, Ctrl-R, Ctrl-E and Ctrl-J. These key combinations align the text to the left or right, or centralise or justify it.

Document Property

As mentioned, RichTextBoxes edit a FlowDocument. You can access the document using the Document property. A common task that you will want to perform with the property is to save the current document or load a previously saved one. We'll add these features to the demo in the remainder of this article.

To begin, let's add Save and Load buttons to the window. To do so, replace the Grid and the RichTextBox with the XAML shown below:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="22"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <RichTextBox Name="MyRichText" Grid.ColumnSpan="2"/>
    <Button Grid.Row="1" Click="Save_Click">Save</Button>
    <Button Grid.Row="1" Grid.Column="1" Click="Load_Click">Load</Button>
</Grid>

The window now appears as shown below:

RichTextBox demo window

Switch to the code behind the window. As we'll be saving to disk, we'll be using the System.IO namespace. Add the following using directive to simplify the code:

using System.IO;

We could use a dialog box to ask the user for the location and filename to use when loading and saving the document. However, for simplicity let's just use a single path. We'll define it in a constant by adding the following to the window's class. NB: Choose a path that does not conflict with an existing file, as it will be overwritten.

const string FileLocation = @"c:\test.rtf";
15 March 2014