5 minutes Guide of WPF ListView ItemTemplate

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:

<Grid>
	<ListView x:Name="myListView">
		<ListView.ItemTemplate>
			<DataTemplate>
				<StackPanel Orientation="Horizontal">
					<TextBlock Text="{Binding FirstName}" />
				</StackPanel>
			</DataTemplate>
		</ListView.ItemTemplate>
	</ListView>
</Grid>

You can specify DataTemplate in two places:

1. Inline
2. In Resources section

DataTemplate in Resources section

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="myFirstItemTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListView x:Name="myListView" ItemTemplate="{StaticResource myFirstItemTemplate}" >
        </ListView>
    </Grid>
</Window>

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.

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="myFirstItemTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="mySecondItemTemplate">
            <StackPanel Background="LightGray">
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListView x:Name="myListView">
        </ListView>
    </Grid>
</Window>

public MainWindow()
{
	InitializeComponent();

	List<ListViewItem> users = new List<ListViewItem>();
	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.