Posted by: Zeeshan Amjad | November 17, 2009

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.

ListViewOutput_03

Advertisements

Responses

  1. […] Expender control inside List View Till now are are applying template only at the list view header. This time we are going to apply template in the list view item. In this example we are going to […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: