DataTemplate in WPF: Comprehensive Guide

In WPF (Windows Presentation Foundation), a DataTemplate is used to define the visualization of data objects. It allows you to specify how the data should be displayed in the UI, typically in controls like ListBox, ComboBox, DataGrid, etc. A DataTemplate is essentially a blueprint for rendering a particular type of data.

Here’s a basic example to help illustrate what a DataTemplate is and how to use it.

DataTemplate in WPF

Getting Started

The WPF DataTemplate model provides great flexibility for defining the presentation of your data. It is a piece of XAML that describes how bound data should be displayed.

Basically, a DataTemplate is used to specify the appearance of data displayed by a control not the appearance of the control itself. It can contain elements that are each bound to a data property, along with additional markup that defines layout, colors, and other aspects of appearance.

Therefore, a DataTemplate can be applied to ContentControls or ItemsControls or ItemTemplate. Let's discuss ContentControls and ItemsControls a bit, because it's important to understand them before continuing our discussion about DataTemplates.

A WPF ContentControl is a base class in WPF that can hold a single piece of content — this could be text, a UI element (like a Button, Image, or even a Grid), or complex XAML content. It’s one of the most flexible and commonly used control types in WPF.

Example

 <ContentControl>  
   <StackPanel>  
     <TextBlock Text="Hello, WPF!" />  
     <Button Content="Click Me" />  
   </StackPanel>  
 </ContentControl>  

WPF ItemsControl is a base class for all controls in WPF that display a collection of items. Think of it as the simplest list-based control. It doesn’t have selection features (like ListBox) or built-in headers (like ListView) — it just displays items exactly as you tell it to, using templates and layout panels.

Example

 <ItemsControl>   
   <ItemsControl.ItemTemplate>   
    <DataTemplate>   
     <StackPanel Orientation="Horizontal">   
      <Button Content="Click Here" />   
     </StackPanel>   
    </DataTemplate>   
   </ItemsControl.ItemTemplate>   
  </ItemsControl>   

DataTemplate With ContentControl?

Suppose you have a class:

 public class Person  
 {  
   public string Name { get; set; }  
   public int Age { get; set; }  
 }  

And in your XAML, you’re binding a ContentControl to a Person object.

 <ContentControl Content="{Binding SelectedItem}">  
   <ContentControl.ContentTemplate>  
     <DataTemplate>  
       <StackPanel>  
         <TextBlock Text="{Binding Name}" FontWeight="Bold"/>  
         <TextBlock Text="{Binding Age}" />  
       </StackPanel>  
     </DataTemplate>  
   </ContentControl.ContentTemplate>  
 </ContentControl>  

DataTemplate With ItemsControl

Here we will be binding a ListBox to a list of Person objects .

 <ItemsControl ItemsSource="{Binding People}">  
   <ItemsControl.ItemTemplate>  
     <DataTemplate>  
       <StackPanel Orientation="Horizontal">  
         <TextBlock Text="{Binding Name}" FontWeight="Bold"/>  
         <TextBlock Text=" - " />  
         <TextBlock Text="{Binding Age}" />  
       </StackPanel>  
     </DataTemplate>  
   </ItemsControl.ItemTemplate>  
 </ItemsControl>  

A DataTemplate in WPF is a piece of XAML that defines how bound data should be displayed in the WPF UI. I hope you now have a clear understanding of DataTemplates.

Thanks