Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextTrimming with Ellipsis and a Colon

Tags:

This is a relatively simple question:

I can trim a text with ellipsis using this:

<TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"/> 

it would give me something along the lines of:

"This sentence is too long"

=>

"This sentence i..."

That's all great and dandy, but what I actually want is this:

"This sentence ...:" / "This sentence...:"

What I'm looking for is a colon after the ellipses. Is there a simple way to achieve this?

EDIT:

sorry for the confusion.

I want to change the default ellipsis string from '...' to '...:'. As well, I'm going to include a colon in the text string itself. This way, I'll always have the colon displayed. As well, everything should be on one line in every situation.

here are a couple of results that are acceptable:

short enough:

way too l...:

like image 929
FZdev Avatar asked Mar 09 '12 07:03

FZdev


2 Answers

This works, but I needed to add some padding so that the colon always remains visible:

<TextBlock Padding="0,0,5,0" >     <TextBlock TextTrimming="CharacterEllipsis">Lorem ipsum dolor sit amet, consectetur adipisicing </TextBlock>     <TextBlock>:</TextBlock> </TextBlock> 
like image 108
Phil Avatar answered Nov 08 '22 07:11

Phil


Use two TextBlocks with the ellipses example in the first and the colon in the second.

Update:

It looks like this is a relatively simple question with plenty of complications.

One may be tempted to have some TextBlocks, the first with the target text and another two displaying ":" and "...:" and switch between with a Visibility value converter them based on whether the first TextBlock had enough space to display all of its text. This has possibilities but has the potential for unstable layouts.

Having just implemented a custom panel I can imagine a possible solution involving one designed to hold three children which would be the three TextBlocks described abovel

A custom panel inherited from Panel should override two key methods: Measure and Arrange.

In the measure method all of the children should be measured.

In the arrange method check whether there is enough room to display the first two children and if so put them side by side. If there is not enough room display the first child sized to allow the third child room to display and set the third child right aligned.

Update:

I tried the custom panel and it worked except the the first TextBox is clips partial characters.

The ultimate solution for clean formatting would be a method which adjust the display string until fits within the allotted space with the appropriate suffix applied.

like image 26
Doug Ferguson Avatar answered Nov 08 '22 07:11

Doug Ferguson