How to Design RichTextBox in Silverlight 5

Introduction

In this article, I am going to explain how to design a RichTextBox in Silverlight. This example also demonstrates the RichTextBox control as well. It is easy to formatt a Silverlight RichTextBox at design time through XAML. In this example I have used an image to illustrate the example clearly.

<UserControl x:Class="SilverlightApplication3.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="300" d:DesignWidth="400" DataContext="{Binding}">

              <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" Background="#FFFFFF69"> 
                    <Paragraph FontFamily="Arial" FontSize="12" TextAlignment="Justify">
                   This photograph shows a
                <Run Text=" blue hills " FontStyle="Italic" FontWeight="ExtraBold" /> belongs to the
                <Run Text=" high " Foreground="blue" FontWeight="ExtraBold"/> graphic photography. High graphic photography requires a     great deal of precision.
                <LineBreak/>
                <InlineUIContainer>
                    <Image Height="143" HorizontalAlignment="Left" Margin="144,82,0,0" Name="images" Stretch="Uniform" VerticalAlignment="Top" Width="196" Source="/SilverlightApplication3;component/Images/Blue%20hills.jpg" />
                </InlineUIContainer>
                <LineBreak/>
                <LineBreak/> |
          </Paragraph> 
        </RichTextBox>
    </Grid>
</UserControl>

Now I am going to explain the code so that it can be easily understood. It creates a RichTextBox, with some text and an image. To place and format the text, I first 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. In this I use the Run element which is useful to format text. The RichTextBox control also allows you to add elements of type Bold, Underline etc.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.

 InlineUIContainer: A mandatory child element that is used to place an Image in the RichTextBox control.

 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:

  

Hope this article was useful. Thanks for reading, hope you liked it.