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
- One Grid with two rows.
- First row is having one button and one checkbox.
- Purpose of button is to bold the selected text.
- 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
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;