Text Trimming in Silverlight 4 Using VS 2010 Beta


Introduction

In Silverlight 4, a property called TextTrimming is added to TextBlock, which will help the TextBlock to Trim a string up to a defined width. In this article we will see how this feature works.

Creating Silverlight Project

Fire up Visual Studio 2010 and create a new Silverlight Application Project. Name it as TextTrimminginSL4.

TextTrimmingWPF1.gif

We will look at some TextBlocks to see how TextTrimming works in Silverlight 4.

TextTrimmingWPF2.gif

The above TextBlock is a normal TextBlock whose Width is set to Auto by default.

In design view it would look like following.

TextTrimmingWPF3.gif

Now let's examine another TextBlock whose Width is set to 290.

TextTrimmingWPF4.gif

In design view, the above TextBlock looks like the following.

TextTrimmingWPF5.gif

Now we have a TextBlock whose Width is set to 150 and whose TextTrimming property is set to "WordEllipsis".

TextTrimmingWPF6.gif

In design view it would render text as shown below.

TextTrimmingWPF7.gif

Let's run the application and resize the Browser Window.

You will see The TextBlock which has the TextTrimming property set to "WordEllipsis" will trim the width of the fully rendered string to fit into the width described by the Width property of the TextBlock control.

Without TextTrimming the width of a TextBlock whose content exceeds the width of the control, the TextBlocks view looks like the top line of the diagram below.  When we set the TextTrimming property of a TextBlock whose content exceeds the width of the control, the TextBlock View produces the ellipse shown in the last line of the diagram.


TextTrimmingWPF8.gif


Hope this article helps you understand how to take advantage of text trimming in your Silverlight Application.

Up Next
    Ebook Download
    View all
    Learn
    View all