Rich Text Box in Silver Light 4.0

Objective

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

I have created a basic Silver Light 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*"/><RowDefinitionHeight="7*" /></Grid.RowDefinitions><StackPanelOrientation="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

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*"/><RowDefinitionHeight="7*" /></Grid.RowDefinitions><StackPanelOrientation="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><RichTextAreax: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;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace RichTextBoxdemo2
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
rchTxt.IsReadOnly = false;
}

private void btnBold_Click(object sender, RoutedEventArgs e)
{
if (!String.IsNullOrEmpty(rchTxt.Selection.Text))
{

rchTxt.Selection.SetPropertyValue(TextElement.FontWeightProperty, FontWeights.Bold);

}

}

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

private void chkReadOnly_Click(object sender, RoutedEventArgs e)
{
CheckBox S = (CheckBox)sender as CheckBox;
rchTxt.IsReadOnly = S.IsChecked == true;
}
}
}

Output

When only check box read is checked then inline button click event will work as

Conclusion

In this article, I explained basic of Rich text box in Silver Light 4.0. Thanks for reading.