Ellipsis and TextWrapping in a ListView Column

In response to the questions:

How do I make it so that, instead of cutting off the text in my column when I shorten it, my text displays ellipsis?

and

How do I make it so that my text wraps when I shorten my columns?

I’ll deal with the first one first and the second one… second.

That sounded better in my head than it looks on the screen.

With the first question… when a column is shortened, this is what normally happens:

CellTemplate Default Text

And, instead, we want this to happen: 

CellTemplate Ellipss

To start off, you’ll need to go into the DataTemplate to which your CellTemplate points.

If you’re asking what a DataTemplate is or what a CellTemplate is, you need to check this post out first.

Once inside your DataTemplate, find the text element that displays your data and open up the extended properties.

ExtendedText Properties

Change the “TextWrapping” property to “NoWrap” and change the TextTrimming to “CharacterEllipsis” or “WordEllipsis“.

You’re done.

The second question:

Instead of the default pictured above, you want your shortened columns to look like this:

Wrap ColumnTemplate Display

Make sure that your CellTemplate points to the proper DataTemplate and that the element that contains your bound data has TextWrapping set to “Wrap” and TextTrimming set to “None“.

Go to your listview and open the extended layout section and set your HorizontalContentAlignment to “Stretch“.

All done.

5 thoughts on “Ellipsis and TextWrapping in a ListView Column

  1. Hi5 is one of the leading social networks in the world, with over 60 million registered members.
    This highly secure type of VPN is also very specialized.
    These public facing addresses usually have nothing in common with the
    addresses of devics conhnected to thhe organization’s LAN or WAN.

  2. Code sample was stripped out, 2nd attempt:

    <GridViewColumn Width=”100″>
    <GridViewColumnHeader>
    <TextBlock TextWrapping=”Wrap”>
    this is long line of text in the header
    </TextBlock>
    </GridViewColumnHeader>
    </GridViewColumn>

  3. First off, awesome articles. This is the only decent resource I’ve found that deals w/ ListView templating. One issue I can’t seem to solve is wrapping the column header text if it gets too long. I attempted to style the GridViewColumnHeader and followed the instructions you gave for wrapping ListViewItems using a TextBlock but it doesn’t work with the column headers. The only way I’ve found to wrap the column headers is to put each column header in a TextBlock – which means it’s not part of the style, like so:

    this is long line of text in the header

    Any ideas for wrapping text as part of the template/style?

    Cheers,
    Bobby

Comments are closed.