Rich Text Box in Silverlight 4.0

In this article, I am going to show how to work with Rich Text box in Silverlight 4.0.


Objective 

In this article, I am going to show how to work with Rich Text box in Silverlight 4.0. I will show how to have inline buttons and image inside rich text box, make text box as read only and to change font of selected text. 

I have created a basic Silverlight page and it contains 
  1. One Grid with two rows. 
  2. First row is having one button and one checkbox. 
  3. Purpose of button is to bold the selected text. 
  4. Checkbox is to make rich text box read only.
Xaml is as below, 

<UserControl x:Class="RichTextBoxdemo2.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">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition  Height="7*" />
        </Grid.RowDefinitions>
        <StackPanel  Orientation="Horizontal" Grid.Row="0" Background="Blue" >
            <CheckBox x:Name="chkReadOnly" IsChecked="False" Width="100" Height="auto"  VerticalAlignment="Bottom"  Content="ReadOnly"/>
            <Button x:Name="btnBold" Content="Bold" Click="btnBold_Click" Width="100" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Bottom"   Margin="10,2,2,2" />
        </StackPanel>
        <RichTextArea Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" IsReadOnly="False" TextWrapping="Wrap"  >
        </RichTextArea>
    </Grid>
</UserControl>

Output of above Xaml 

1.gif


Paragraph in Rich Text Box

Now, I will start adding paragraph in the rich textbox.  We can add as many paragraphs as we want in Rich text box.

<Paragraph x:Name="HeadPara" TextAlignment="Center" FontSize="42"   FontFamily="Georgia">This is Rich Text Demo</Paragraph>

New Line in Rich Text Box

Now, we can use new line or line break in side paragraph of a rich text box. 

<LineBreak />

In Line Container in Rich Text Box

We can have as many other UI elements inside rich text box as we want. We need to put UI elements inside paragraph and inside paragraph inside InLIne container.  In below sample I have two UI element one button and image inside a rich text box. 

<Paragraph x:Name="ps">
 <InlineUIContainer >
  <Image x:Name="imageinText" Height="150" Width="100" Source="a.jpg"/>                   
  </InlineUIContainer>            
 <InlineUIContainer>
 <Button x:Name="inlinebtn" Click="inlinebtn_Click" Height="60" Width="100" Content="InLine Button" Background="Brown" />
 </InlineUIContainer>
</Paragraph>

Note: UI element will be active only when text box is read only. What I mean is, let us say you have a click event on button inside rich text box. This click event will only work when text box is read only. 

MainPage.Xaml

<UserControl x:Class="RichTextBoxdemo2.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">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition  Height="7*" />
        </Grid.RowDefinitions>
        <StackPanel  Orientation="Horizontal" Grid.Row="0" Background="Blue" >
            <CheckBox x:Name="chkReadOnly" IsChecked="False" Width="100" Height="auto"  VerticalAlignment="Bottom"  Content="ReadOnly" Click="chkReadOnly_Click"/>
            <Button x:Name="btnBold" Content="Bold" Click="btnBold_Click" Width="100" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Bottom"   Margin="10,2,2,2" />
        </StackPanel>
        <RichTextArea  x:Name="rchTxt"  Grid.Row ="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" IsReadOnly="False" TextWrapping="Wrap">
            <Paragraph x:Name="HeadPara" TextAlignment="Center" FontSize="42"   FontFamily="Georgia" >
                This is Rich Text Demo
            </Paragraph>           
            <Paragraph x:Name="rightpara" TextAlignment="Right" FontSize="18">
                This is right
                <LineBreak />
                text for you
                <LineBreak />
                <Italic> See I am Italic</Italic>
            </Paragraph>
            <Paragraph x:Name="ps">
                <InlineUIContainer >
                    <Image x:Name="imageinText" Height="150" Width="100" Source="a.jpg"/>                   
                </InlineUIContainer>            
                <InlineUIContainer>
                    <Button x:Name="inlinebtn" Click="inlinebtn_Click" Height="60" Width="100" Content="InLine Button" Background="Brown" />
                </InlineUIContainer>
            </Paragraph>           
        </RichTextArea>
    </Grid>
</UserControl>

Making selected text Bold 

Set the property value to bold for selected text.

private void btnBold_Click(object sender, RoutedEventArgs e)
{
    if (!String.IsNullOrEmpty(rchTxt.Selection.Text))
    {         
            rchTxt.Selection.SetPropertyValue(TextElement.FontWeightProperty, FontWeights.Bold);
    }
}

On Inline button click calling the message box

private void inlinebtn_Click(object sender, RoutedEventArgs e)
{
   MessageBox.Show("I have been clicked from In Line button in Rich text box");
}

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;