How Do I Wrap Text in a ListView Header?

OK, it’s really late and I want to get this done, so we’re going to go through the easy way, which will require some XAML, but I’ll try to keep it as Blend-y as possible.

So you have a column header and you want the text inside to wrap when the header space gets too short for the content. Your header probably looks something like this:


First, go to wherever your resources are being held and type the following in:

<Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}>

Now, go over to your resources tab (usually on the far right) and click on your “CustomHeaderStyle”:


Blend will take you into the Design mode for your style. Go to the “Layout” section and expand the advanced properties. You’ll see that the HorizontalContentAlignment is, by default, set to “Center”. Let’s go ahead and change that to “Stretch”.

Header Content Alignment

Now go to your ListView in the XAML and find your GridView. Assign the following property to your GridView:

<GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}>

Now, your header looks like this:


Now we just need to tell the DataTemplate holding the actual text that it is OK to let that text wrap. In your resources, create a DataTemplate like the one below.

<DataTemplate x:Key=”WrappingHeaderTemplate>
<TextBlock Text=”{Binding}TextWrapping=”Wrap/>

Highlight your target ListView in the Objects and Timeline window and scroll all the way down in the properties window, expanding the “View (GridView)” section at the bottom.

Click on the box to the right of the ColumnHeaderTemplate property, expand the “Local Resource” section and select your new data template.


Your GridView will look like this:

<GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}” 
      ColumnHeaderTemplate=”{DynamicResource WrappingHeaderTemplate}>

and your listview header should now look like this:


If you’re really picky and you want your header to be centered (see how “Title” is left aligned?) , go back into your DataTemplate (as seen above) and set your Grid to the following:

<Grid HorizontalAlignment=”Center>

Your header should now look like this:


You’re awesome.

I’m going to sleep.

2 thoughts on “How Do I Wrap Text in a ListView Header?

  1. Modest would any individual be aware that these kind of toy crs will be an enormous contend inside of athletucs along with technology industries.
    This article aims to share with you baaic tips with regard to these two
    features of RC for you to make a more informmed decision.
    For those who have enough money, any cost will do
    as long as the car is what they need.

Comments are closed.