Silverlight RichTextBox Control For Beginners

Problem:

               Need to use the RichTextBox control of the Silverlight 4 and need ways to bind the RichTextBox control to the view model properties.

Solution:

               This post is for the absolute beginner who want to use the RichTextBox control of the Silverlight in their application. So in this post I will show how you can use MVVM pattern to bind the RichTextBox to the properties of the view models and what properties of the RichTextBox are used for binding.You can see in the Image 1 that I have used two way to display text in RichTextBox control. On the left side is the simple string and on the right side is formatted string.

Image 1

First I will discuss how can you bind the simple string to the RichTextBox control. For this you have to add the Paragraph tag inside the RichTextBox control as I have done in the code in the List 1. A Paragraph element is used to group content into a paragraph.The Paragraph tag contains one or more child elements such as Run, Hyperlink,  Bold, Span etc (You can see full list of child element tag here which you can add in the Paragraph tag.). Here you can see that I have added the run as the child element to display the string. Here I have bind the Run child element text property with RichTextBoxText which I have defined in my ViewModel as string.

List 1

By using the above technique you can bind the simple string property to the RichTextBox to show the simple string but If you want to use RichTextBox just for the simple string then better to use simple TextBlock control as RichTextBox is offering more then just displaying simple text.

To display formatted text like bold the some text,underline some of the text, set some color to the some text to highlight the text then it is better to use the RichTextBox control to display formatted text. Now we are ready to display some rich content in the RichTextBox control for this we have to use the Xaml property of the RichTextBox and the Xaml property is not dependency property it mean we can't use it for binding as we did in case of display simple string in the RichTextBox control. In HomeViewModel I have second property of type string which hold the Xaml which I will display in the RichTextBox control.The Xaml which I used to display I got it by using this application which give you detail of how to use the RichTextBox control to create the text editor for the silverlight application. I have pasted my string in that application and just formatted the text and then use the Xaml property to get the Xaml.

List 2

As I have mention that Xaml property is not dependency property so you can't use it for the binding. To assign value to the the Xaml property of the RichTextBox what I did is to registered the PropertyChanged event of the ViewModel in the code behind and then check the name of the property which is changed and then assigned the value to the Xaml property RichTextBox control.

Hope you got some idea of how to getting start with the RichTextBox control.You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!