Using DataTemplate in WPF

There are mainly two types of templates in WPF:

• DataTemplate  Used to define the appearance of bound data.
• ControlTemplate   Used to define the appearance of the Control itself.

DataTemplate is used to define the appearance of displayed data. DataTemplate is defined using XAML.It describes the appearance of data.DataTemplate  can be applied to contentcontrol or itemscontrol.

When displaying values in a control such as ListBox ,it is straightforward to display property values.For example if you need to display the property called name in the ListBox then you can just use:

<ListBox ItemsSource="{Binding}" DisplayMemberPath="Name">
</ListBox>

This will display all the names of the bound object in the ListBox.

But if you want to display more complex information such as combination of properties for each ListBox item then you may need to use DataTemplate.

DataTemplate in WPF

Data templates are used with data binding ,when you want to render the bound objects in a specific way.It is derived from the class FrameworkTemplate.

Many controls in WPF have properties which are of type DataTemplate.For example ItemsControl have ItemTemplate property and DataGrid has RowDetailsTemplate property.

ItemsControl can display list of values.There are several items control in WPF.Some of the ItemsControl are ListBox and ComboBox.

ListBoxItem can display only a single field.To display a combination of fields you can use Data Tamplate.You use a ListBox control for binding to a list of items as:

<ListBox>
<ListBoxItem>ListBox Item</ListBoxItem>
</ListBox>

This will work if the type of ListBoxItem is string.For example if you have a list of Student names then you bind the list to the listbox as:

List<String> lstStudents = new List<String>{
"Marc", "John","Robin","Amit"};

you will get the values in the listbox as:

But if the type of ListBoxItem is object then you will not get the correct values in the listbox.

But if you bind a collection of objects to ListBox or other ItemsControl then the toString() method of the ItemsControl is called.If you set the ItemsSource property of the ItemsControl then you get the name of the objects in the list:

You will get the following List:

//Declare Student class

 class Student
        {
            public string Name { get; set; }
            public string RollNo { get; set; }
        }

//bind to List of Student objects
List<Student> lstStudents = new List<Student>{
new Student{Name= "Marc",RollNo="01"},
new Student{Name= "John",RollNo="01"},
new Student{Name= "Robin",RollNo="01"},
new Student{Name= "Amit",RollNo="01"
}
};
lstStudents.ItemsSource = lstStudents;

This is because you have not specified what each item in the list should display.In the absence of this information ListBox displays strings which represents the name of the objects in the source collection.

To display the fields defined in the objects of the list you use the DataTemplate.You can define the DataTemplate as:

<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Another use of DataTemplate is when you need to display combination of more than one property in the ListBox item.You can easily implement such scenario using DataTemplate as:

<ListBox.ItemTemplate> <DataTemplate>
 <StackPanel>
 <TextBlock Text="{Binding Name}" /> 
 ID:<TextBlock Text="{Binding Id}" /> 
</StackPanel>
 </DataTemplate>
 </ListBox.ItemTemplate>

 

Follow on: