Click here to Skip to main content
13,048,406 members (149,318 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 12 May 2010

Add column header to custom ViewBase (ListView.View)

, 12 May 2010
Rate this:
Please Sign up or sign in to vote.
Add column header to custom ViewBase (ListView.View)


Usually only GridView has column headers, sure you just craft a custom control and place it above the ListView, but in WPF you can place the column header with small changes to the templates.

How to do it?


Take a look to ListView Control Template in MSDN:

The GridView.GridViewScrollViewerStyleKey is used by the ListView’s ScrollViewer, it has a GridViewHeaderRowPresenter which bound to ListView.View.Columns, although this style key is designed for GridView, and only GridView has Columns field, however, if I change the template so ListView’s ScrollViewer always style as GridViewScrollViewerStyleKey, other View can get the column header using similar properties.

Update your View Derived from ViewBase

So I added the property in my VirtualWrapPanelView:

public class VirtualWrapPanelView : ViewBase
  private GridViewColumnCollection _columns = new GridViewColumnCollection();
  public GridViewColumnCollection Columns
    get { return _columns; }

To make it look better and to prevent debug message(s), you have to add a number of properties as well:

public static readonly DependencyProperty ColumnHeaderContainerStyleProperty =
public Style ColumnHeaderContainerStyle
    get { return (Style)GetValue(ColumnHeaderContainerStyleProperty); }
    set { SetValue(ColumnHeaderContainerStyleProperty, value); }

public static readonly DependencyProperty ColumnHeaderTemplateProperty =
...//Couple more properties


<Style x:Key="ColumnHeaderContainerStyle" TargetType="GridViewColumnHeader">
  <Setter Property="BorderBrush" Value="Transparent" />
  <Setter Property="HorizontalContentAlignment" Value="Stretch" />

As its name implies, its style for the column header, I set the HorizontalContentAlignment as Stretch, so the header text can align in left side, while the sort indicator arrow can align in middle top.

Update ListView Template

Then you have to change the ListView template, similar to the sample in MSDN:

<Style x:Key="{x:Type local:FileList}" TargetType="{x:Type local:FileList}" >
  <Setter Property="Template">
      <ControlTemplate TargetType="ListView">
        <Border ...>
          <ScrollViewer Style="{DynamicResource 
		{x:Static GridView.GridViewScrollViewerStyleKey}}">
            <ItemsPresenter />

Update the Actual View

Then the preparation work is done, you can then update the view, using the similar way as GridView.

<uc:VirutalWrapPanelView x:Key="SmallIconView" 

	ColumnHeaderContainerStyle="{StaticResource ColumnHeaderContainerStyle}" ...>
  <GridViewColumn Width="100" Header="Name" 

	local:FileList.SortPropertyName="sortByFullName" />
  <GridViewColumn Width="100" Header="Type" 

	local:FileList.SortPropertyName="sortByType" />
  <GridViewColumn Width="100" Header="Time" 

	local:FileList.SortPropertyName="sortByLastWriteTime" />
  <GridViewColumn Width="100" Header="Size" 

	local:FileList.SortPropertyName="sortByLength" />

The final product can be found in my FileExplorer article (0.3).

This article has been posted on . You can find a list of my articles here.


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170713.1 | Last Updated 13 May 2010
Article Copyright 2010 by Leung Yat Chun
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid