Using data template with List view header

We just studied the basic functionality of list view and how we can display data in multiple columns in the list view. But we display our data in very simple and default format. Let’s explore it little bit more and try to customize the its display. At this stage we are going to change the header formatting and apply the data template at the header level.

To change the display of the header, we are going to set the column header template data type. Here is a piece of code to set the data template for the header of the list view.

  1: <GridView.ColumnHeaderTemplate>

  2: 	<DataTemplate>

  3: 		<Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">

  4: 			<Border.Background>

  5: 				<LinearGradientBrush>

  6: 					<GradientStop Offset="0" Color="Wheat"/>

  7: 					<GradientStop Offset="1" Color="LightCoral"/>

  8: 				</LinearGradientBrush>

  9: 			</Border.Background>

 10: 			<TextBlock Foreground="Blue" FontWeight="Bold" Margin="5" Text="{Binding}" Width="Auto"/>    

 11: 		</Border>                            

 12: 	</DataTemplate>

 13: </GridView.ColumnHeaderTemplate>

 14: 
ColumnHeaderTemplate is a DataTemplate type property of GridView class. Here is complete XAML code of the project.
  1: <Window x:Class="UIElement.Window1"

  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4:     xmlns:local="clr-namespace:UIElement"

  5:     Title="ListView Example" Height="300" Width="400">

  6:     <Grid>        

  7:         <ListView Name="list" Margin="5" HorizontalContentAlignment="Stretch">

  8:             <ListView.View>                

  9:                 <GridView>

 10:                     <GridView.ColumnHeaderTemplate>

 11:                         <DataTemplate>

 12:                             <Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">

 13:                                 <Border.Background>

 14:                                     <LinearGradientBrush>

 15:                                         <GradientStop Offset="0" Color="Wheat"/>

 16:                                         <GradientStop Offset="1" Color="LightCoral"/>

 17:                                     </LinearGradientBrush>

 18:                                 </Border.Background>

 19:                                 <TextBlock Foreground="Blue" FontWeight="Bold" Margin="5" Text="{Binding}" Width="Auto"/>    

 20:                             </Border>                            

 21:                         </DataTemplate>

 22:                     </GridView.ColumnHeaderTemplate>

 23:                     

 24:                     <GridViewColumn Width="Auto" Header="State Name" DisplayMemberBinding="{Binding Path=Name}"/>

 25:                     <GridViewColumn Width="Auto" Header="State Capital" DisplayMemberBinding="{Binding Path=Capital}"/>

 26:                     <GridViewColumn Width="Auto" Header="State Nick Name" DisplayMemberBinding="{Binding Path=NickName}"/>

 27:                 </GridView>

 28:             </ListView.View>

 29:         </ListView>

 30:     </Grid>

 31: </Window>

 32: 
Here is a complete C# code of this project.
  1: using System;

  2: using System.Collections.Generic;

  3: using System.Linq;

  4: using System.Text;

  5: using System.Windows;

  6: using System.Windows.Controls;

  7: using System.Windows.Data;

  8: using System.Windows.Documents;

  9: using System.Windows.Input;

 10: using System.Windows.Media;

 11: using System.Windows.Media.Imaging;

 12: using System.Windows.Navigation;

 13: using System.Windows.Shapes;

 14: 

 15: namespace UIElement

 16: {

 17:     /// <summary>

 18:     /// Interaction logic for Window1.xaml

 19:     /// </summary>

 20:     public partial class Window1 : Window

 21:     {

 22:         public Window1()

 23:         {            

 24:             InitializeComponent();

 25: 

 26:             List<StateInfo> statesList = new List<StateInfo>();

 27: 

 28:             statesList.Add(new StateInfo("Maryland", "Annapolis", "Old Line State", "Eastern"));

 29:             statesList.Add(new StateInfo("California", "Sacramento", "Golden State", "Pacific"));

 30:             statesList.Add(new StateInfo("Washington", "Olympia", "Ever Green State", "Pacific"));

 31:             statesList.Add(new StateInfo("Taxes", "Austin", "Lone Star State", "Central"));

 32:             statesList.Add(new StateInfo("New York", "Albany", "Empire State", "Eastern"));

 33: 

 34:             list.ItemsSource = statesList;

 35:         }

 36:     }

 37: 

 38:     public class StateInfo

 39:     {

 40:         public StateInfo()

 41:         {

 42:         }

 43: 

 44:         public StateInfo(String name, String capital, String nickName, String timeZone)

 45:         {

 46:             Name = name;

 47:             Capital = capital;

 48:             NickName = nickName;

 49:             TimeZone = timeZone;

 50:         }

 51: 

 52:         public String Name

 53:         { get; set; }

 54: 

 55:         public String Capital

 56:         { get; set; }

 57: 

 58:         public String NickName

 59:         { get; set; }

 60: 

 61:         public String TimeZone

 62:         { get; set; }

 63:     }

 64: }

 65: 
Here is the output of this program.