WPF ListViewItem template

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 [416] 849-8900

ListView control in WPF is used for display a list of items. Every list view item has its own UI for display its own data. But how every listview item is rendered, it's depend on the ItemTemplate property of ListView.

ItemTemplate property is used for get and set the DataTemplate of every list view item. DataTemplate defines how each item appears.

You defines a single DataTemplate in the ItemTemplate property and it is used by all list view items automatically.

ListView ItemTemplate example:

You can specify DataTemplate in two places:

1. Inline
2. In Resources section

DataTemplate in Resources section

The main benefit of specify DataTemplate in Resources section is reusability. You can define DataTemplate in Resource section and use it with many ListView. You need to set the ItemTemplate property by using the StaticResource extension like in the above line 13. You can set DataTemplate as both StaticResource and DynamicResource extension.

Or you can find the DataTemplate in code behind and set ListView ItemTemplate property like below.

myListView.ItemTemplate = [DataTemplate]this.FindResource["myDataTemplate"];

When WPF creates listview items at runtime using the ItemTemplate, it's copy the ItemTemplate property of the ListView to the ContentTemplate property of the each ListBoxItem. Then ContentTemplate is used by every ListViewItem for creating its UI.

You can also change the DataTemplate of each listview Item by using ContentTemplate property of every ListViewItem.

Below is the example of using two DataTemplates on alternate ListViewItems.

public MainWindow[] { InitializeComponent[]; List users = new List[]; for [int i = 0; i < 10; ++i] { var user = new User { ID = i, Name = "Name " + i.ToString[], Age = 20 + i }; ListViewItem item = new ListViewItem[]; item.Content = user; if [i % 2 == 0] { item.ContentTemplate = [DataTemplate]this.FindResource["myFirstItemTemplate"]; } else { item.ContentTemplate = [DataTemplate]this.FindResource["mySecondItemTemplate"]; } users.Add[item]; } myListView.ItemsSource = users; }

In the above XAML, I have defined two DataTemplates 'myFirstItemTemplate' and 'mySecondItemTemplate' in the Window resources.

In the code-behind, I have set the ContentTemplate property of each ListViewItem to 'myFirstItemTemplate' or 'mySecondItemTemplate' alternatively.

WPF provides various templates for customization of controls. WPF ListView ItemTemplate is in one of these. ItemTemplate of ListView is useful when we have to change the visual presentation of bound data objects.

If your WPF ListView control is bound to collection of objects using ItemsSource proeprty and you have not set the ItemTemplate property, then it will call the ToString[] method of each bound object and whatever is returned by the method it will display in the ListView.

If you want to customize the display of items, then you must set the DataTemplate by using ItemTemplate property.

Below is the simple example, in which I set the DataTemplate using ItemTemplate property of WPF ListView.

namespace WpfApplication1 { /// /// Interaction logic for MainWindow.xaml /// public partial class MainWindow : Window { private List employees; public MainWindow[] { InitializeComponent[]; employees = new List[]; employees.Add[new Employee { Id = 1, Name = "Kapil Malhotra", Age = 30 }]; employees.Add[new Employee { Id = 2, Name = "Raj Kundra", Age = 34 }]; employees.Add[new Employee { Id = 3, Name = "Amitabh Bachan", Age = 80 }]; employees.Add[new Employee { Id = 4, Name = "Deepak Khanna", Age = 72 }]; this.DataContext = this; } public List Employees { get { return employees; } } } public class Employee { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } } }

I have the code below in my App.xaml. I override the template to make the background stays the same as transparent when I click/hover on a ListViewItem.

And I asked a question yesterday How to add a underlying progressbar across two or more ListViewItem in wpf? So I wrote below and it works greatly if I didn't apply the style above. If I do so, I will see nothing in the ListView.

I do need to make the background transparent but why won't these codes work together? How can I improve?

In addition, how do you guys know what's wrong here? I have no idea where can I find reference/explanations or to study the mechanism behind xaml code..