Dhananjay Kumar

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.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>


<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.RowDefinitions>
<RowDefinition Height=”1*”/>
<RowDefinition Height=”7*” />

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

Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

Create a website or blog at WordPress.com