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 it. Also imagine the number 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 a huge code here nor will I 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" />
Be sure that you set some boundary to the TextBlock
, i.e., Height
and Width
. It will make the TextBlock
a fixed size control. Once you run your application, start typing on the TextBox
and you will notice that the TextBlock
itself is updating with the text you are entering in the TextBox
automatically. If you are writing a huge amount of text inside the TextBox
, you will notice that after the specified size, the text inside the TextBlock
is growing but not creating any Ellipsis!!!
I think you are confused again!!! Why is it not working!!! Wait a minute. We didn’t instruct the TextBlock
to trim the text. Now let us do that. We will set the enum
property “TextTrimming
” to “WordEllipsis
” and here is the code for the same:
<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" />
Once you run your application now and start typing a huge content, you will see that after a certain length of text (generally the dimension of the TextBlock
to set the content), the whole string
has been cropped and set one Ellipsis, i.e., three dots ("...") at the end of the last word. If you type more inside the TextBox
, it will not reflect in the TextBlock
content.
This is a new feature in Silverlight 4 and you will find it very useful when you want to trim some portion of text. You don’t have to write any code for it to implement. It is available by default. So, why wait? Go and try the sample code. Enjoy...