Silverlight RichTextBox Scrolling Problem

Problem:

             When assigning value to the RichTextBox and there is larger text and vertical scrolling of the control display then it will scroll to bottom instead of scroll bar to top which need to fix. Which you can see in the Image 1.

Image 1

Solution:

             The solution to the above mentioned problem is very easy as when used the RichTextBox control for my one of application I also see this problem and have to fix the problem as it is not good that control go to the bottom of the text instead of showing the start of the text. I have use same example code from my last post "Silverlight RichTextBox Control For Beginners " Just modified the layout of the page so that both the RichTextBox binding string and Xaml property of the RichTextBox have vertical scroll bars.The modified code of the property changed event of the view model is listed in List 1 here  you can see that I have used the ContentStart property of the RichTextBox control to get the start of the content of the RichTextBox control.

List 1

The ContentStart are stored in the TextPointer and then in the next statement I have used the Selection.Select by providing the start pointer to the selection and it will move at the start of the content of the RichTextBox.You can see the output in the Image 2 where you can see that first RichTextBox is scrolled at bottom but the second on is scrolled at top which we want to achieved.

Image 2

As I have mentioned in my post that I have used the sample of my last post "Silverlight RichTextBox Control For Beginners " , So you can get source code from above link and test the code which I have listed in List 1  and you have to made some GUI modification as well so that both the RichTextBox control have the vertical scroll bars.

All and any comments / bugs / suggestions are welcomed!

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!