Matthias Shapiro

I need fewer hobbies

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:

OriginalHeader

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

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

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

Opening_Header_Resources

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:

Wrap_Header_Part_2

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>
     
<Grid>
           
<TextBlock Text=”{Binding}TextWrapping=”Wrap/>
     
</Grid>
</DataTemplate>

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.

SelectHeaderInBlend

Your GridView will look like this:

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

and your listview header should now look like this:

Wrap_Header_Part_3

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:

Wrap_Header_Part_4

You’re awesome.

I’m going to sleep.

2 Responses to 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.

  2. Pingback: Feb 6th Links: ASP.NET, ASP.NET AJAX, Visual Studio, .NET, WPF - ScottGu's Blog