Design Time Formatting of RichTextBox in Silverlight 4

Design Time Formatting of RichTextBox in Silverlight 4

Although Silverlight 4.0 was just released in April 2010, numerous examples abound for some of its new features. These include examples demonstrating the RichTextBox Control as well. However, what I found was that most of these examples catered to runtime aspects, such as selecting user-typed text at runtime, formatting it etc. The ubiquitous "text editor" and "notepad" examples using Silverlight RichTextBox are what you’ll mostly find if you did a Google search for the control. I looked at the MSDN documentation and that seemed pretty rudimentary too (unless you count the runtime wire up logic).  So what does one do if one wants to learn formatting a Silverlight RichTextBox at design through XAML? To solve this question, I have created a simple example. Again, this example might seem rudimentary too but it solves our objective – pure XAML code demonstrating how to format the RichTextBox. I have also thrown in a couple of other elements such as an Image and Hyperlink for good measure.

<UserControl x:Class="RichTextDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="600">
 
    <Grid x:Name="LayoutRoot" Background="White" Height="450" Width="550">
        <RichTextBox HorizontalAlignment="Left" Margin="10,12,0,0" 
           Name="contentBox" VerticalAlignment="Top" Height="330" 
           Width="390" IsReadOnly="True">

        <Paragraph FontFamily="Georgia" FontSize="12" TextAlignment="Justify">

This photograph depicting a <Run Text=" flower closeup " FontStyle="Italic" FontWeight="ExtraBold" /> belongs to the <Run Text=" macro " Foreground="Red" FontWeight="ExtraBold"/> genre of photography. Macro photography requires a great deal of precision. You need a sharp pair of lenses to capture <Run Text=" high quality closeups. " Foreground="DarkBlue" FontWeight="ExtraBold"/>

<LineBreak/>
    <InlineUIContainer>
        <Image Height="143" HorizontalAlignment="Left" Margin="144,82,0,0" 
          Name="image1" Stretch="Uniform" VerticalAlignment="Top" 
          Width="196" Source="/RichTextDemo;component/7.jpg" />
    </InlineUIContainer>
    <LineBreak/>
    <LineBreak/>
    <Hyperlink NavigateUri="http://en.wikipedia.org/wiki/Macro_photography">
                 Click here to read about macro photography</Hyperlink>
            </Paragraph> 
            </RichTextBox>
    </Grid>
</UserControl>

Let me now explain very briefly what this code is doing. It creates a RichTextBox, with some text, an image and a hyperlink. To place and format the text, firstly I use the Paragraph element, then the Run element. Note that the Paragraph element also has a Foreground property but which I have not used here. Instead I use the Run element as it’s more useful to format small chunks of text. The RichTextBox control also allows you to add elements of type Span, Bold, Underline, etc. but they have not been used here. The Run element derives from the Inline element, an Inline cannot be used directly within a RichTextBox control, however, you can use the Run element.

The LineBreak element is used to introduce line breaks.

The Image is placed inside the InlineUIContainer.

The NavigateUri property of Hyperlink is set to the link to which we want to redirect the user.

You can have as many Paragraph and Run elements as you want, in a RichTextBox  control. Using a combination of Paragraph and Run elements, you can format the text in various ways.

The output of the above application is shown below:

If you want to how to dynamically format the RichTextBox at runtime, check the MSDN documentation which includes a sample.