DataTemplate

DataTemplate

Suppose we have a set of data which we want to arrange in customized way or we want a customized display of data we can use Data Template.

Before going into DataTemplate in detail I want to give examples to illustrate the importance of DataTemplate.

Here is an example for displaying an array of objects in ListView.

Simple Example for Itemsource

An array of object is defined in Windows.Resources. For more detail about WPF resources I will be posting in my blog. Or else you can refer MSDN in detail. http://msdn.microsoft.com/en-us/library/ms742538(v=vs.110).aspx
To define array we have to declare System namespace in root element section.
We have bind the ItemSource to StaticResource which is of type array. Since there is only one dimensional value in the array object, all the values will be displayed .
This is equalent to Rainbow[i].Tostring(). Tostring returns the color value for given index.

Output of Simple array ItemSource

Suppose we have a list of object of type Class which has some properties. Consider below example.

Employees Class

Here is a collection of Employee of type ObservableCollection.
We have to show the employee properties in ListBox.
We will set the DataContext to Employees class and Itemsource to employee which is of type observable collection. Here is the XAML code and its design output

Listbox without using DataTemplate

Employee Data without Data Template

The output is not same as what we expected. That is because ToString() returns the current object (reference type) instead of returning the values.
One solution to this is we can override the ToString() but there is disadvantage for that also.
Suppose in some case we want only Name of employee and in another view we want all the properties, then this solution will fail.
Another solution to this problem is using DataTemplate.
Using DataTemplate we can specify which properties to display and we can arrange in groups. In the above example we can modify to display only Name.

Use of Data Template

Employee Data After using Data Template

Similarly we can display other properties also. Let us display age with Name.
A DataTemplate can have only one child. so we can use StackPanel to display multiple properties.

Mulitple Properties for Data Template

Design View for multiple properties without orientation

But our expectation was age should come in the same row as name.
For that we have to use orientation property of StackPanel.
After setting Orientation to Horizontal (default value is Vertical), though we get the age in the same row, listbox data are not arranged in the same line.
For that we can set the width of the Textblock.

DataTemplate With StackPanel Orientation set to Horizontal