Ellipsis and TextWrapping in a ListView Column
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:
And, instead, we want this to happen:
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.
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:
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 Responses to Ellipsis and TextWrapping in a ListView Column
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.
Pingback: Xaml for Morons (Like Me) » New Stuff Up At Designer WPF
Bobby,
I’ve been meaning to blog on that for a while, so I went ahead and did it.
http://www.designerwpf.com/2008/02/02/how-do-i-wrap-text-in-a-listview-header/
Hope that helps. If I totally missed the point of your question, just leave another comment and I’ll try to help any way I can.
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>
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