How to Handle Text Overflow in Silverlight 5 Beta

Prologue:

In this article we shall discuss one of the features in Silverlight 5 beta i.e. how to handle a TextOverflow in a Silverlight 5 application.

Short intro to TextOverflow in Silverlight 5:

Consider you are having a RichTextBox with the fixed height and width for displaying only 20 lines. If you fill the RTB with 100 lines then only the first 20 lines will be displayed because we have set the height and width for 20 lines.
 
If we need to display the remaining 80 lines we have to follow the TextOverflow feature in Silverlight 5.

Quick Note:

Handling the TextOverflow in Silverlight 5 application is only applicable for the RichTextBox control.

Preparing the Solution:

Create a solution with the name TextOverflowInSL5 as shown in the figure.


Follow the [No: #].

Make sure our application uses the Silverlight version 5.


Designing the Page [XAML]:

To demonstrate the handling of the TextOverflow feature of Silverlight 5 we have designed a page like shown here.


Here we simply placed a RichTextBox inside the StackPanel with four lines of paragraph.


In the above code part we set the height of RTB to 40. See the next screen showing what is happening while executing this.


As we have set the minimal height the paragraph has been trimmed here. We can't see the remaining 2 lines of the paragraph.

To display the remaining lines we have to do one of two possible things.

1. Increasing Height of the RTB.
2. Using new feature of Silverlight 5

As we are demonstrating the feature of Silverlight 5 application we are supposed to do the 2nd option.

Complete XAML with TextOverflow feature:


The Silverlight 5 RichTextBox [RTB] has a new property called OverflowContentTarget and RichTextBoxOverflow which helps us to handle the TextOverflow problem.

In the given figure we have the Property and the RichTextBoxOverflow Control which is bound with the OverflowContentTarget property.

After adding the Property and the Control see the paragraph displayed.


Even though we have two RTB's it is displaying as a single.

Where to use this Feature:

• Multi-Column Text
  
  
   
• Text wraps around an object in the centre [free-form text].
  
  
  

Points of Interest:

Even though we are using Master and Target controls we can't set the Text visual properties of the RichTextBoxOverflow control.


See in the above figure, we have set the Foreground to Red and FontSize to 50 for the RichTextBoxOverflow control. But while displaying the paragraph the Silverlight takes only the Master RTB's text visual properties.

Summary:

We have seen how to handle the TextOverflow issue in Silverlight applications using the new feature of the Silverlight 5.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.
 
Please rate this Article.

Thanks.