Posted by: Zeeshan Amjad | June 13, 2010

Change the style of List view Column


I came across a question of how to set the the first column of list view same as the header of the list view. I tried to find out the simple solution of it without writing a code. The quickest solution i found is the define two data template in XAML, which are very similar and uses with list view header and the column. Why can’t we use the same template with both, because we have to define the Path when use with cell template, but not with header template. Here is a XAML code to define the data template for both header and cell.

<DataTemplate x:Key="myHeaderTemplate">
	<Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
		<Border.Background>
			<LinearGradientBrush>
				<GradientStop Offset="0" Color="Wheat"/>
				<GradientStop Offset="1" Color="LightCoral"/>
			</LinearGradientBrush>
		</Border.Background>
		<TextBlock Foreground="Blue" FontWeight="Bold" Margin="5" Text="{Binding}" Width="Auto"/>
	</Border>
</DataTemplate>
<DataTemplate x:Key="myCellTemplate">
	<Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
		<Border.Background>
			<LinearGradientBrush>
				<GradientStop Offset="0" Color="Wheat"/>
				<GradientStop Offset="1" Color="LightCoral"/>
			</LinearGradientBrush>
		</Border.Background>
		<TextBlock Foreground="Blue" FontWeight="Bold" Margin="5" Text="{Binding Id}" Width="Auto"/>
	</Border>
</DataTemplate>

Here we can see that the header template didn’t define any path while binding, but cell template uses the path while doing the data binding. Now we will use these template with header and cell. Here is complete XAML code of the program.

<Window x:Class="WpfListView.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ListView" Height="300" Width="400">
    <Window.Resources>
        <DataTemplate x:Key="myHeaderTemplate">
            <Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
                <Border.Background>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="Wheat"/>
                        <GradientStop Offset="1" Color="LightCoral"/>
                    </LinearGradientBrush>
                </Border.Background>
                <TextBlock Foreground="Blue" FontWeight="Bold" Margin="5" Text="{Binding}" Width="Auto"/>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="myCellTemplate">
            <Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
                <Border.Background>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="Wheat"/>
                        <GradientStop Offset="1" Color="LightCoral"/>
                    </LinearGradientBrush>
                </Border.Background>
                <TextBlock Foreground="Blue" FontWeight="Bold" Margin="5" Text="{Binding Id}" Width="Auto"/>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListView Margin="5" ItemsSource="{Binding}">
            <ListView.View>
                <GridView ColumnHeaderTemplate="{StaticResource myHeaderTemplate}">
                    <GridViewColumn Width="Auto" Header="ID" 
                                    CellTemplate="{StaticResource myCellTemplate}"/>
                    <GridViewColumn Width="Auto" Header="Name" DisplayMemberBinding="{Binding ProcessName}"/>
                    <GridViewColumn Width="Auto" Header="Hanel Count" DisplayMemberBinding="{Binding HandleCount}"/>
                    <GridViewColumn Width="Auto" Header="Priority" DisplayMemberBinding="{Binding BasePriority}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

Here is complete C# code of the program.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Diagnostics;

namespace WpfListView
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private ObservableCollection<Process> process = new ObservableCollection<Process>();

        public Window1()
        {
            InitializeComponent();

            Process[] processList = Process.GetProcesses();

            foreach (Process p in processList)
            {
                process.Add(p);
            }

            DataContext = process;
        }
    }
}

Here is the output of the program.

ListViewOutput_08

Advertisements

Responses

  1. Great! Helped me a lot! 🙂

    • Hi Marco

      Thanks to visit my blog and like it. I am glad that it helped you.

      Regards
      Zeeshan Amjad


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: