28

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

H.B.
  • 166,899
  • 29
  • 327
  • 400
FZdev
  • 418
  • 1
  • 5
  • 10
  • 1
    You're confusing [TextWrapping](http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock.textwrapping.aspx) and [TextTrimming](http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock.texttrimming.aspx). – Clemens Mar 09 '12 at 07:58
  • lol yes. i copied the wrong line of xaml -_- – FZdev Mar 09 '12 at 09:29
  • check out "[How can I determine if my TextBlock text is being trimmed?](http://stackoverflow.com/questions/1041820/how-can-i-determine-if-my-textblock-text-is-being-trimmed)". From there it should be possible to get it done. – hennson Mar 09 '12 at 10:06
  • 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 '...:'. – FZdev Mar 09 '12 at 10:59

3 Answers3

31

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>
Phil
  • 42,255
  • 9
  • 100
  • 100
  • 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. – FZdev Mar 10 '12 at 01:15
  • yes, I thought adding the padding sorted that out. I hope you can make it work, perhaps padding on the second TextBlock. – Phil Mar 10 '12 at 07:54
  • 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. – FZdev Mar 10 '12 at 09:15
  • 1
    Check out the and elements.. Text is composed of 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 http://stackoverflow.com/questions/3356053/binding-the-content-of-a-span – Tom A Aug 19 '15 at 21:02
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.

Doug Ferguson
  • 2,538
  • 2
  • 16
  • 23
  • And always display the colon, even if there's no ellipsis? – Clemens Mar 09 '12 at 09:32
  • 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. – FZdev Mar 09 '12 at 10:55
  • @FZdev 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. – Clemens Mar 09 '12 at 11:22
  • 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). – FZdev Mar 09 '12 at 11:43
  • 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. – FZdev Mar 09 '12 at 11:44
0

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

skst
  • 575
  • 9
  • 15