Character ellipsis trimming in Windows Store apps

As a relatively new platform, WinRT is missing some of the features that WPF and even Silverlight developers are used to. One of those features is definitely the character ellipsis trimming feature for TextBlocks. I did a little research on that matter for one of my recent projects, and here’s what I’ve come up with.

There are two types of trimming. One is called word ellipsis, in which the string is trimmed by cutting of all the words that don’t fit completely. So, it’s basically using a space char to identify words and then just cuts of the whole words which don’t fit adding ellipsis to the end of the string. (implementation probably differs from my description).  I put a border around a TextBlock to demonstrate how much space is left unused.

Most of the times this is good enough, but sometimes when you have longer words and less space (snapped view for example), you want to use a different type of trimming.

That other type is called character ellipsis, which means it cuts of only the characters which don’t fit, using the whole available width. It’s different from not using the trimming at all because it puts ellipsis to the end of the string.

So, how to accomplish this, considering it’s not available for Windows Store apps? Simply, trying to find a similar thing for Silverlight did the trick (a colleague of mine said that Silverlight may be dead, but it lives in others :) ) . And I found it, after a lot of time wasted, so I am sharing it with you today.

EDIT: Seems like it is already available in Callisto, and I didn't notice. Thanks to @xyzzer for letting me know in the comments!

On this nicely designed blog, there’s a Silverlight implementation by Robby Ingebretsen. It’s under MIT license.

I had to change it only a bit to be able to use it in WinRT. First, the namespaces:

using System;  
using System.Net;  
using System.Windows;  
using Windows.Foundation;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;

And then added one null check for reducedText in MeasureOverride which caused a NullReferenceException in some cases:

protected override Size MeasureOverride(Size availableSize)  
            // just to make the code easier to read
            bool wrapping = this.TextWrapping  TextWrapping.Wrap;

            Size unboundSize = wrapping ? new Size(availableSize.Width, double.PositiveInfinity) : new Size(double.PositiveInfinity, availableSize.Height);
            string reducedText = this.Text;

            // set the text and measure it to see if it fits without alteration
            <strong>if (reducedText  null)
                return base.MeasureOverride(availableSize);</strong>

            this.textBlock.Text = reducedText;

And it works beautifully! It might hit the performance a bit if you have a lot of those on the same page, but nothing easily noticeable.

Here’s how to use it:

<Page x:Class="App.MainPage"  

    <Grid Name="st" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Border Width="380"
            <px:DynamicTextBlock Width="380"
                                 Text="The quick brown fox jumps over the lazy dog"
                                 TextWrapping="NoWrap" />

So, almost 4 years old code for Silverlight is working quite nice on WinRT!

EDIT: Character trimming is coming in Windows 8.1!

About Igor Ralic

Software engineer at Microsoft. Running for Office. Passionate about making an impact with great apps & services. Stays close to coffee and away from coriander. Opinions expressed here are my own.