How to Make Data More Presentable Using Data Template

Data Templates are used to present your data in a pleasing manner so that the user has a good visual experience with the application. With the data templates you can make different data look differently so that the user can identify it easily.

The Dependency controls can bind to data source. The data can be anything like person name, person object, and product object.

The control can display the data in any format. It can show the name or name and age or product name, product type etc.

This reporting format can be saved as template in the application resource and can be reused.

Advantages of Data Templates:

· Code reuse
· Easy maintenance of Data Template
· Flexible layout of controls

The sample below shows how to use data template to list the details of person in a list box control

<Window x:Class="SampleDataTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Sample for DataTemplate" Height="250" Width="300"
Loaded="WindowLoaded"
xmlns:local="clr-namespace:SampleDataTemplate">
<Grid>
<Grid.Resources>
<DataTemplate DataType="{x:Type local:Person}">
<Grid Margin="3">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0" Orientation="Horizontal">
<TextBlock FontSize="16" Foreground="Blue" Text="{Binding LastName}" />
<TextBlock FontSize="16" Foreground="Blue" xml:space="preserve">, </TextBlock>
<TextBlock FontSize="16" Foreground="Blue" Text="{Binding FirstName}" />
<TextBlock FontSize="16" Foreground="Blue" xml:space="preserve">, </TextBlock>
</StackPanel>

<TextBlock Grid.Column="1" FontSize="16" Foreground="Blue" Text="{Binding Address.Street}" />

<StackPanel Orientation="Horizontal" Grid.Column="2">
<TextBlock FontSize="16" Foreground="Blue" xml:space="preserve">, </TextBlock>
<TextBlock FontSize="16" Foreground="Blue" Text="{Binding Address.City}" />
<TextBlock FontSize="16" Foreground="Blue" xml:space="preserve">, </TextBlock>
<TextBlock FontSize="16" Foreground="Blue" Text="{Binding Address.State}" />
</StackPanel>
</Grid>
</DataTemplate>
</Grid.Resources>

<ListBox Name="personList" SelectionChanged="SelectedPersonChanged" />

</Grid>
</Window>

The key points to note in the above example are:

The grid has a resource DataTemplate for type person as

DataTemplate DataType="{x:Type local:Person}"

The Person is a class with properties of person defined. The data template defines controls for displaying attributes. They also specify the data binding.

The list box is also defined after the resource as,

<ListBox Name="personList" />

In code behind file the itemsource property is set with collection of person object.

personList.ItemsSource = collection;

Once the ItemSource property is set, the personlist automatically choose the DataTemplate from the window resource.

The code behind file for the above example is:

namespace SampleDataTemplate
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}

protected virtual void WindowLoaded(object sender, EventArgs e)
{
ObservableCollection<Person> collection = new ObservableCollection<Person>();

for (int i = 0; i < 10; i++)
{
Person p = new Person();

p.FirstName = "Ramesh" + i;
p.LastName = "Gupta";

Address a = new Address();

a.Street = "Dr Street";
a.City = "New Delhi";
a.State = "Delhi";

p.Address = a;

collection.Add(p);
}

personList.ItemsSource = collection;
}

}
}

Thus you can use data templates to present data in a more pleasing manner so that it is easy for the user to read it. Without data templates the data that is displayed will not be that much readable for the end user.