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;
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 Silverlight 4.0. Thanks for reading.