TextTrimming with Ellipsis and a Colon

Question

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...:

Handcrafted

You're confusing TextWrapping and TextTrimming. – Trilley

lol yes. i copied the wrong line of xaml -_- – Handcrafted

check out "How can I determine if my TextBlock text is being trimmed?". From there it should be possible to get it done. – Buckeye

I'm not entirely sure that is the effect I'm looking for. I'm effectively trying to change the default ellipse string from '...' to '...:'. – Handcrafted

Answer 1

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>

Gobbledygook

ugh, this works great except that at certain points, it seems like the colon textblock gets hidden by the text textblock. regardless, it is the simplest working situation. – Handcrafted

yes, I thought adding the padding sorted that out. I hope you can make it work, perhaps padding on the second TextBlock. – Gobbledygook

the wrapper's padding definitely helps(i actually had that in place with all the other containers). adding padding to the left side of the colon TB actually made it WORSE than your implementation. Maybe by tinkering with the values and which side/s the padding is applied to may fix everything; its just not worth the effort right now though since your example is good enough for demo purposes. – Handcrafted

Check out the <Span> and <Run> elements.. Text is composed of <Span> types at a lower level that one usually works at, but which allows you to highlight substrings within a string, for instance. See "Binding the content of a Span" at #3356553 – Shallot

Answer 2

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.

Pleadings

And always display the colon, even if there's no ellipsis? – Trilley

Clemens - sorry for the confusion, but I DO want the colon to always show Doug - That is generally the effect I want. I've tried it out and at certain widths, the colon drops to the next line. that's not good enough. The two textblocks are in a horizontal wrappanel inside a dockpanel inside a listboxitem. there is also a image control docked to the left of the wrappanel. – Handcrafted

@Handcrafted then why don't you simply put the two TextBlocks in a horizontal DockPanel, with first the colon TextBlock first and second the trimmed TextBlock and proper values for DockPanel.Dock on both. Thus by default the trimmed TextBlock fills all the space not consumed by the colon. Or even better, use a Grid. – Trilley

ah, the problem with the grid and dock are that the colon and the string get separated when the string isn't very long(and the screen is very wide). – Handcrafted

using an auto-column for the colon and the text means that the text never wraps at all. It seems like there should be a way to restrict the size, but i can't think of it right now. – Handcrafted

Answer 3

If you do not include the colon in your strings, you can use Binding.StringFormat:

<TextBlock Text="{Binding, StringFormat={}{0}:}" TextTrimming="CharacterEllipsis"/>

(I realize this is a very old question, but I happened to stumble on it, so I thought I'd throw this in for anyone else who follows.)

Okra