This is a bit of an advanced tutorial. I’m putting it up because I just figured out how to do it and I want to share. You can also download the project files for this tutorial (in zip format… requires .Net 3.5).

Recently, I received from my user experience designers a wireframe that looked something like this:

As you can see, there are embedded categories (categories within categories) here. I considered many solutions (hacks), but I found that a deeper understanding of the ListView and how it works would allow me to resolve this issue very simply (and without even touching the code behind).

<Exposition>

So… within every ListView, there is a Gridview that holds a set of GridViewColumns. What I didn’t realize until a couple days ago was that when you put the GridViewColumns into the GridView, you’re implicitly handing the GridView a GridViewColumnCollection.This collection is then referenced by the GridViewHeaderRowPresenter (located deep inside the ListView Template) and the GridViewRowPresenter, which is located inside the ListViewItem template (which I usually get to through the ItemContainerStyle… see here for more details).

Anyway, these two presenters databind back up to the GridView to grab the GridViewColumns that we’ve defined.

Once I understood that, I realized that I could create a GridViewColumnCollection as a resource and the reference it inside some custom templates.

At this point, I get the feeling that some readers are just hearing “blah blah blah”. It’s actually easier to demonstrate than it is to explain. So let’s get to it.

</Exposition>

We’re going to grab the header image from the New York Times RSS feed and display it in its own column while displaying all the accompanying header data under a broad Images header with sub-columns called Title, URL, and Link. It will look like this:

Resources

First, lets deal with all the resources we need. Take note that this part will be pretty XAML heavy.

Create a resources section. If mine isn’t in a separate resource dictionary, I usually just create it at the top of the window as seen below.

<Window.Resources>
</Window.Resources>

All your resources stuff will go in between those two tags. 

Create a GridViewColumnCollection in the resources:

<GridViewColumnCollection x:Key=”ImageColumnCollection“>
      <GridViewColumn Header=”Title” />
      <GridViewColumn Header=”URL” />
      <GridViewColumn Header=”Link” />
</GridViewColumnCollection>

Now, go through the motions to getting your RSS feed. Follow the steps I lay out in my post on getting the New York Times RSS feeds, except that, instead of clicking on the item(Array), click on the image section. Continue on with the “Create Data Template” option to get your RSS bindings automated.

Grab the bindings in this template and put them into the DisplayMemberBinding property in the GridViewColumns. Your GridViewColumnCollection should now look like this:

<GridViewColumnCollection x:Key=”ImageColumnCollection“>
      <GridViewColumn Header=”Title”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=title}“  />
      <GridViewColumn Header=”URL”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=url}“   />
      <GridViewColumn Header=”Link”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=link}“   />
</GridViewColumnCollection>

Now that we have our GridViewColumnCollection in place, let’s create some stuff that will actually use it.

Create a new empty Data Template. If you’re still uncomfortable digging into the XAML itself, you can just type the following in:

<DataTemplate x:Key=”MultiColumnHeaderTemplate“>
</DataTemplate>

And then go to your resources tab and double click on it to make it accessible in the design mode.

The way I set this up was very simple. I put in a grid with two rows set to auto, put a TextBlock in the top one and a GridViewHeaderRowPresenter into the other one. The TextBlock at the top is bound to the Header Content with a simple binding:

Text=”{Binding}”

The real trick is that the GridViewHeaderRowPresenter is bound to our Columns resource by simply entering the following property:

Columns=”{DynamicResource ImageColumnCollection}”

Now, each column in that collection will send its header information to be handled by this particular GridViewHeaderRowPresenter.

Our final header data template looks something like this:

<DataTemplate x:Key=”MultiColumnHeaderTemplate“>
      <Grid>
            <Grid.RowDefinitions>
                  <RowDefinition Height=”Auto” />
                  <RowDefinition Height=”Auto” />
            </Grid.RowDefinitions>
            <TextBlock Text=”{Binding}”
                  HorizontalAlignment=”Center“/>
            <GridViewHeaderRowPresenter Grid.Row=”1”
                  HorizontalAlignment=”Stretch”
                  Columns=”{DynamicResource ImageColumnCollection}” />                                      Â
      </Grid>
</DataTemplate>

That takes care of our headers… what about our item data? How do I get this data to fit into the proper columns? This was a problem I struggled with for quite some time until a friend of mine pointed out that the GridViewRowPresenter in the ItemTemplate could be extracted and used where ever I wanted to use it. Resultingly, I could place it into the CellTemplate of my Image Information column to compliment the placement of the GridViewHeaderRowPresenter in the Header of that same column.

If you’re following along and trying hard to learn, create a new DataTemplate and just toss a GridViewRowPresenter into it, binding it to the same column collection. Or you can just copy and paste the XAML below. Your choice.

<DataTemplate x:Key=”MultiColumnCellTemplate“>
      <Grid>
            <GridViewRowPresenter HorizontalAlignment=”Stretch”
                  Columns=”{DynamicResource ImageColumnCollection}” />                                      Â
      </Grid>
</DataTemplate> 

This will be the basis of our embedded column design. We’re almost there, let’s just tie up some resources loose ends.

In order to get the image to show up in the “Image” column, we need to create a handy little DataTemplate to display that image. Simply have an image in the Data Template and have the Source property point to the url binding for the image like so:

<DataTemplate x:Key=”ImageTemplate“>
      <Image Source=”{Binding Mode=OneWay, XPath=url}” />                                      Â
</DataTemplate> 

OK… we are now ready to actually do something outside of our resources. Don’t worry, this will be fast.

Main XAML Composition

If you haven’t already drawn a ListView in your main window, do so now.  Right click on the ListView and  go to Bind ItemSource to Data…

 

In the resulting pop-up choose your RSS Feed (mine is called NYTTech) and select the image option from it.  (If you haven’t added the RSS feed, just copy and paste the line below to the top of your resources.)

<XmlDataProvider x:Key=”NYTTech”
      d:IsDataSource=”True”
      Source=”http://www.nytimes.com/services/xml/rss/nyt/Technology.xml” />

Now, in the interest of time, we’re going to go right into the XAML. If you’re interested in seeing how to do this using Blend only, check this post out. Trust me, it’s not worth it.

Because we’ve already constructed most of what we need in the resources, we only need to do a couple things here. First, create two GridViewColumns, one with

Header=”Image“ 

and another with

Header=”Image Information”

In the Image column, set

CellTemplate=”{StaticResource ImageTemplate}”

In the Image Information column (which is our column with embedded columns), we just need to point to our already constructed templates like so:

<GridViewColumnHeader Header=”Image Information“Â
      HeaderTemplate=”{StaticResource MultiColumnHeaderTemplate}“Â
      CellTemplate=”{StaticResource MultiColumnCellTemplate}” >

Go ahead and run the project and you’ll see that we have one tiny little problem left.

Because the default content alignment of the header style is to center everything, all of our columns are misaligned. To solve this problem, copy the following style into your resources:

<Style x:Key=”StretchHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
      <Setter Property=”HorizontalContentAlignment” Value=”Stretch“/>
</Style>

And point to it in your ListView GridView with a :

ColumnHeaderContainerStyle=”{StaticResource StretchHeaderStyle}”

At the end, your ListView should look like this:

<ListView IsSynchonizedWithCurrentItem=”True“>
      <ListView.View>
            <GridView ColumnHeaderContainerStyle=”{StaticResource StretchHeaderStyle}” >
                  <GridViewColumn Header=”Image“
                        CellTemplate=”{StaticResource ImageTemplate}” >
                   <GridViewColumn Header=”Image Information“Â
                        HeaderTemplate=”{StaticResource MultiColumnHeaderTemplate}”
                        CellTemplate=”{StaticResource MultiColumnCellTemplate}” >Â
            </GridView>
      <ListView.View>
</ListView>

And if you hate writing XAML, you notice with a grateful heart that I’ve posted every bit of XAML you need right here. Additionally (and this is a first for this site), because of the complexity of this post, I’m offering this project as a downloadable zip file so you can tweak it or futz with it at your convenience.

Embedded Columns Project Files (in zip format… requires .Net 3.5)

In this post, we’re going to change the default color of the header (background and foreground) and make the headers look more like bubbles. Why? Because we can! (Everytime I say that, somewhere a usability expert loses a little bit of their soul.)

Take note that anything done in this will affect the whole header. If you’re looking to do something to one individual column in the header, you need to go to this post on ColumnHeaders (coming soon). See the bottom of this post for more details.

As a point of note, the easy way in this particular case involves going directly into the XAML and the hard way involves going through the steps in Blend. The easy way is posted at the bottom.

Now for the hard way. First, go to your listview, right click on it and go to:

Edit Control Parts (Template) -> Edit a Copy…

You’ll be given the basic template of your listview. Right-click on the scrollviewer and go to:

Edit Control Parts (Template) -> Edit Template

You’ll be given the default scrollViewer template for the specialized scrollViewer used in the ListView. In addition to the normal scrollviewer parts, it has a control that acts as the holder for the header called the “GridViewHeaderRowPresenter”. 

Highlight the GridViewHeaderRowPresenter (which I am renaming “steve” so I don’t have to write that anymore) and, in the menu, go to:

Object -> Edit Other Styles -> Edit ColumnHeaderContainerStyle -> Edit a Copy…

This is where we are going to want to change the foreground and background.

Go over to the Properties panel to the right and click on foreground, giving it a solid color brush (I’m going to use a dark blue). Do the same thing with the background (light blue)and the BorderBrush (blue gradient) (you’ll see why in a moment).

Now my style looks like this in the XAML:

<Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
      <Setter Property=”Background” Value=”#FFCDE7F4” />
      <Setter Property=”Foreground” Value=”#FF07034B“/>
      <Setter Property=”BorderBrush“>
            <Setter.Value>
                  <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0“>
                        <GradientStop Color=”#FFA1CCE0” Offset=”0“/>
                        <GradientStop Color=”#FFABD5EA” Offset=”1.0“/>
                  </LinearGradientBrush>
            </Setter.Value>
         </Setter>
   <Setter Property=”Template“>
      …
</Style>

 and my column headers look like this in the composition (zoomed in to 200%):

But wait… there’s more. Right click on your ColumnHeaderContainerStyle in the Objects and Timeline panel and select:

Edit Control Parts (Template) -> Edit Template…

Finally, we are in the real guts of the header template, which means we have all the bits and pieces to make it work.

Note: I’ve recently had a comment on how to style the header gripper (the part of the column header that allows you to resize the column), but this post is already getting way too long, so I deal with it in this post over here (coming soon).

OK, so now we can really get at the look of this sucker. If you’re using Vista, you probably have some Borders with names like “UpperHighlight”, “HeaderHoverBorder”, and “HeaderPressBorder”. These are borders that alter the look of the headers when certain triggers are active. We’ll be ignoring them for the sake of simplicity.

(At this point, my readers are saying to themselves, “Simplicity? SIMPLICITY? At what juncture in this entire post have we even approached simplicity.” To which I reply “Hey, don’t kill the messenger.”)

So go to the highest border (in my case, it’s called the “HeaderBorder”) and do the following:

• BorderThickness=”1,1,1,1“
• CornerRadius= “6,6,6,6“
• Margin=”2,0,2,0“

The header now looks like this:

This is the hard way because it uses Blend exclusively without touching the XAML.

The Easy Way

The easy way is also the better way from a XAML perspective. Simply create a  create a Style like so:

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

and add it to your ListView like this:

<ListView>
      <ListView.View>
            <GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}“>
            ….

Access it though your resources tab to get to the visual designer interface for your new style:

Once you’ve done this, you can skip directly to the part of the tutorial where you start changing the foreground and background.

Hopefully, at this point you feel like you have a pretty decent handle on the basics of styling your header section. Because it’s getting really late and I’m getting really tired.

But before I go, let’s get one thing absolutely clear: When it comes to ListView headers, you can technically do most of this in the data template, but if you do, you’ll make baby Jesus cry.

Here is why. By doing things as we have done them above, we get the following:

If we do all this work in the data template, we instead get this:

Which brings about the aforementioned consequences. You’ve been warned.

Questions about column headers:

• How do I wrap text in a header?
• How do I make headers sort columns (and how do I style for that)? (coming soon)
• How do I make one header look different than the other headers? (coming soon)