Displaying Rich Content Using a RichTextBox

RichTextBox is a control that enables you to intermingle rich content, including hyperlinks and inline images, with text. UIElements can also be embedded alongside other content, allowing you to display buttons and other interactive controls directly within the RichTextBox content.

Unlike Silverlight for the Browser, however, the RichTextBox control for Windows Phone is not editable. Its IsReadOnly property is always true and cannot be set to false.

RichTextBox contains a collection of Paragraph elements. Within a Paragraph object are placed text and various Inline elements. See the following example:

Click here to view code image

<RichTextBox>
    <Paragraph>
        Hi from <Underline><Bold>Windows Phone</Bold>!</Underline>
    </Paragraph>
    <Paragraph>
        Paragraph 2
    </Paragraph>
</RichTextBox>

Although more verbose, creating a RichTextBox can also be done in code, as shown:

Click here to view code image

void CreateRichTextBox()
{
    RichTextBox richTextBox = new RichTextBox();

    /* Create a Run of plain text and some underlined bold text. */
    Run run1 = new Run {Text = "Hi from "};
    Underline underline = new Underline();
    Bold bold = new Bold();
    bold.Inlines.Add("Windows Phone");
    underline.Inlines.Add(bold);
    Run run2 = new Run {Text = "!"};

    /* Place the inlines in a paragraph. */
    Paragraph paragraph = new Paragraph();
    paragraph.Inlines.Add(run1);
    paragraph.Inlines.Add(underline);
    paragraph.Inlines.Add(run2);

    richTextBox.Blocks.Add(paragraph);

    ContentPanel.Children.Add(richTextBox);
}

Within each Paragraph can be placed the following Inline elements:

Span

Bold

Italic

Underline

Hyperlink

InlineUIContainer

Run

Span, Bold, Italic, and Underline are able to nest other Inline elements.

The Hyperlink element is used to embed a hyperlink within paragraph content. It behaves in much the same way as a HyperlinkButton, and its NavigateUri property is assumed to be a relative URI to a page in the app. If the URI is external, the TargetName property must be set to _blank, as shown in the following excerpt:

Click here to view code image

<RichTextBox>
    <Paragraph>
        This is a
        <Hyperlink NavigateUri=http://danielvaughan.org
                   TargetName="_blank">Hyperlink</Hyperlink>.
    </Paragraph>
</RichTextBox>

To embed a UIElement within the RichTextBox use the InlineUIContainer. In the following example, an Image control is used to display an inline image, and a Button control is placed alongside:

Click here to view code image

<RichTextBox>
    <Paragraph>
        <InlineUIContainer>
            <Image Source="/Images/WindowsPhoneLogo.png"
                   Height="100" Width="100" />
        </InlineUIContainer>
        <InlineUIContainer>
            <Button>button</Button>
        </InlineUIContainer>
    </Paragraph>
</RichTextBox>