TextTrimming with Ellipsis and a Colon

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>

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.