Thursday, July 01, 2010

Text Trimming in Silverlight 4

by Kunal Chowdhury via Kunal's Blog on 7/1/2010 12:25:00 AM

Have you ever tried Trimming your Text in Silverlight 2 or Silverlight 3? If yes, just recall the lines of code you wrote for trimming your text content and showing an Ellipsis (i.e. “…” three dots) at the end of the text. If you didn’t try it earlier, then just imagine what you have to do and how you will do. Also imagine the no. of lines you have to write.

In this post, I will show you how I can implement this feature the easy way. Stop!!! I will not write here a huge code nor I will use any library to do that. Microsoft has added this functionality in Silverlight 4. You just have to set the Enum value to the TextBlock property. Wao!!!

So, how to do that? Let us try it.

Create a new Silverlight Project and add one TextBox and a TextBlock. I will bind the TextBox content to the TextBlock so that, when we modify the content of the TextBox, it will immediately reflect in the TextBlock’s Text content.

You can find the code here:

<TextBox x:Name="txtMessage" Width="200" Height="25" Margin="10" />
<TextBlock x:Name="txbMessage"
           Text="{Binding Path=Text, ElementName=txtMessage}"
           TextWrapping="Wrap"
           Width="200" Height="60" Margin="10" />

<TextBox x:Name="txtMessage" Width="200" Height="25" Margin="10" />
<TextBlock x:Name="txbMessage"
           Text="{Binding Path=Text, ElementName=txtMessage}"
           TextTrimming="WordEllipsis" TextWrapping="Wrap"
           Width="200" Height="60" Margin="10" />