Monday, January 10, 2011

In WPF | WPF TextBlock Control TextTrimming Property | TextBlock Control


The TextBlock control of the WPF is very useful control and is used in every application we have develop or are developing as we have to show some constant value to user, suppose you are designing the user input form and you have to ask certain information to user. The static text like First name, last name, email address , contact number etc are static static and you can use the Text box , so that user can enter information, There are situations where you have to show data to the end user , like this there are many situation when you need to show data to the user.And text block control is used to show data to the end user. In this post we are going to see the important property of the text block control which is very handy and useful. The TextTrimming property of the the text block control.TextTrimming property Gets or sets the text trimming behavior to employ when content overflows the content area. The TextTrimming propery offer following three options when you use the TextTrimming property in you xaml or in your code.
1- TextTrimming.None
                      The enumeration of the TextTrimming property is the TextTrimming.None. Which is the default value of the TextTrimming property , mean if you don't use the TextTrimming property in you code or xaml then the default value TextTrimming.None is used. Which mean the text will be not trimmed, which you can see in the Image 1, In the image 1 the first line show the text of the text block of TextTrimming.None option.Here you can see  text is simply cropped to the boundary of the parent text container.

2- TextTrimming.CharacterEllipsis:
         When data is shown to user in the tabular format like that data grid control, the column size are usual fixed, So if the column has more text then the allocated size then it is nice to show ellipsis(...) at the end of the text so that user can see that there is some more text. The TextTrimming.CharacterEllipsis is used to do exactly the same job for you. The CharacterEllipsis trimmed text at a character boundary. An ellipsis (...) is drawn in place of remaining text. So you don't need to write code to show the ellipsis at the end of the text value, just used the CharacterEllipsis

3- TextTrimming.WordEllipsis:
                                  The TextTrimming.WordEllipsis is the third option of the TextTrimming property.When TextTrimming is set to WordEllipsis, text is trimmed and continued with an ellipsis at the end of the first full word closest to the trimming edge. This setting will not show partially trimmed words, but tends not to trim text as closely to the trimming edge as the CharacterEllipsis setting.

Sample code for the use of the above three option is given below. Here you can see that I have used it in the xaml, you can also specify it in the code behid or your favorite programming language such as C# or vb.net.

< TextBlock VerticalAlignment="Top" Margin="5,2,0,0" TextTrimming="None" Width="155" HorizontalAlignment="Left" FontSize="20" Text="Shane, Bond (Mr.)" />

< TextBlock VerticalAlignment="Top" Margin="5,2,0,0" TextTrimming="CharacterEllipsis" Width="155" HorizontalAlignment="Left" FontSize="20" Text="Shane, Bond (Mr.)" />

< TextBlock VerticalAlignment="Top" Margin="5,2,0,0" TextTrimming="WordEllipsis" Width="155" HorizontalAlignment="Left" FontSize="20" Text="Shane, Bond (Mr.)" />

And here is the output of the above code here you can see that when the option None is selected then the text is not trimmed as you can see the first line of the output. But when the CharacterEllipsis is used Text is trimmed at a character boundary, which is shown in the second line of the output. And at the end I have used the last option which is the WordEllipsis Text is trimmed at a word boundary, as you can see the third line line of the output screen.

Image 1

TextTrimming is nice property by the text block control, as there are situation when we need to write code to cute the length of the text shown in the grid or in some user interface.So now if you are using WPF then you don't need to write code to cute the text from the end of the text just use the TextTrimming property and use the option which fulfill your needs.

No comments:

Post a Comment