Using XAML RichTextBox in WPF

XAML RichTextBox in WPF

A XAML RichTextBox represents a rich text box. This tutorial shows you how to use a RichTextBox control available in WPF.

Introduction

The RichTextBox control allows you to view and edit text, paragraph, images, tables and other rich text format contents.

The RichTextBox tag represents a RichTextBox control in XAML.

<RichTextBox></RichTextBox>

The Width and Height properties represent the width and the height of a RichTextBox. The Name property represents the name of the control, that is a unique identifier of a control. The Margin property tells the location of a RichTextBox on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

The following code snippet sets the name, height and width of a RichTextBox control. The code also sets the horizontal alignment to left and the vertical alignment to top.

<RichTextBox Margin="10,10,0,13" Name="RichTextBox1" HorizontalAlignment="Left"
                 VerticalAlignment="Top" Width="500" Height="300" />

Displaying and Edit Text

A RichTextBox control hosts a collection of RichTextBoxItem. The following code snippet adds items to a RichTextBox control.

<RichTextBox Margin="10,10,0,13" Name="RichTextBox1" HorizontalAlignment="Left"
             VerticalAlignment="Top" Width="500" Height="300">
    <FlowDocument>
        <Paragraph>
            I am a flow document. Would you like to edit me?
            <Bold>Go ahead.</Bold>
        </Paragraph>

        <Paragraph Foreground="Blue">
            I am blue I am blue I am blue.
        </Paragraph>
    </FlowDocument>
</RichTextBox>

The preceding code generates Figure 1 where you can begin editing text right away.



Figure 1. RichTextBox with editable text

Creating and Using RichTectBox Dynamically

In the previous section, we saw how to create and use a RichTextBox in XAML. WPF provides the RichTextBox class that represents a RichTextBox control. In this section, we will see how to use this class to create and use a RichTextBox control dynamically. 

The code listed in Listing 1 creates a FlowDocument, adds a paragraph to the flow document and sets the Document property of the RichTextBox to FlowDocument.

private void CreateAndLoadRichTextBox()
{
    // Create a FlowDocument
    FlowDocument mcFlowDoc = new FlowDocument();

    // Create a paragraph with text
    Paragraph para = new Paragraph();
    para.Inlines.Add(new Run("I am a flow document. Would you like to edit me? "));
    para.Inlines.Add(new Bold(new Run("Go ahead.")));

    // Add the paragraph to blocks of paragraph
    mcFlowDoc.Blocks.Add(para);

    // Create RichTextBox, set its hegith and width
    RichTextBox mcRTB = new RichTextBox();
    mcRTB.Width = 560;
    mcRTB.Height = 280;

    // Set contents
    mcRTB.Document = mcFlowDoc;

    // Add RichTextbox to the container
    ContainerPanel.Children.Add(mcRTB);
}

Listing 1.

The output of Listing 1 generates Figure 2.



Figure 2

Enable Spelling Check

A RichTextBox control comes with spell check functionality out-of-the-box. By setting the SpellCheck.IsEnabled property to true enables spell checking in a RichTextBox.

SpellCheck.IsEnabled="True"

You can set this in code as follows:

mcRTB.SpellCheck.IsEnabled = true;

Now if you type some text, the wrong word would be underlined with the Red color. See in Figure 3.



Figure 3. RichTextBox with Spell Check Enabled

Loading a Document in RichTextBox

We can use the RichTextBox.Items.Remove or RichTextBox.Items.RemoveAt methods to delete an item from the collection of items in the RichTextBox. The RemoveAt method takes the index of the item in the collection.

Now, we modify our application and add a new button called Delete Item. The XAML code for this button looks as in the following:

private void OpenMenuItem_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog dlg = new OpenFileDialog();
    dlg.InitialDirectory = "c:\\";
    dlg.Filter = "Text files (*.txt)|*.txt|All Files (*.*)|*.*";
    dlg.RestoreDirectory = true;
    if (dlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)
    {

        LoadTextDocument(dlg.FileName);
    }
}


private void LoadTextDocument(string fileName)
{
    TextRange range;
    System.IO.FileStream fStream;
    if (System.IO.File.Exists(fileName))
    {
        range = new TextRange(RichTextBox1.Document.ContentStart, RichTextBox1.Document.ContentEnd);
        fStream = new System.IO.FileStream(fileName, System.IO.FileMode.OpenOrCreate);
        range.Load(fStream, System.Windows.DataFormats.Text );
        fStream.Close();
    }
}

Summary

In this article, I discussed how to create and use a RichTextBox control available in WPF. We saw how to load text programmatically or load a text file.