Defining and Using Data Templates

Data Templates are objects that map regular .NET objects into UIElement objects. They are used by controls that contain lists of regular .NET objects to convert these objects into UIElement objects that can be displayed to the user.

For example, the Data Template below can be used to map our DataItem objects into a StackPanel with two TextBlock elements that display the ItemName and ItemType properties of the DataItem. This is what the template definition looks like in XAML markup:

XAML	Copy Code
<UserControl x:Class="Templates.MainPage" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:C1_Silverlight="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"> <!-- Data template used to convert DataItem objects into UIElement objects --> <UserControl.Resources> <DataTemplate x:Key="DataItemTemplate" > <StackPanel Orientation="Horizontal" Height="30" > <TextBlock Text="{Binding ItemType}" Margin="5" VerticalAlignment="Bottom" Foreground="Red" FontSize="10" /> <TextBlock Text="{Binding ItemName}" Margin="5" VerticalAlignment="Bottom" /> </StackPanel> </DataTemplate> </UserControl.Resources> <!-- Page content (same as before)... -->

XAML

Copy Code

<UserControl x:Class="Templates.MainPage"
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:C1_Silverlight="clr-namespace:C1.Silverlight;assembly=C1.Silverlight">

  <!-- Data template used to convert DataItem objects into UIElement objects -->
  <UserControl.Resources>
    <DataTemplate x:Key="DataItemTemplate" >
      <StackPanel Orientation="Horizontal" Height="30" >
        <TextBlock Text="{Binding ItemType}"
          Margin="5" VerticalAlignment="Bottom" Foreground="Red" FontSize="10" />
        <TextBlock Text="{Binding ItemName}"
          Margin="5" VerticalAlignment="Bottom" />
      </StackPanel>
    </DataTemplate>
  </UserControl.Resources>

  <!-- Page content (same as before)... -->

This template tells Silverlight (or WPF) that in order to represent a source data object, it should do this:

Create a StackPanel with two TextBlocks in it.
Bind the Text property of the first TextBlock to the ItemType property of the source data object.
Bind the Text property of the second TextBlock object to the ItemName property of the source object.

That's it. The template does not specify what type of control can use it (any control can, we will use it with the ListBox and also with the C1ComboBox), and it does not specify the type of object it should expect (any object will do, as long as it has public properties named ItemType and ItemName).

To use the template, add an ItemTemplate attribute to the controls where you want the template to be applied. In our example, we will apply it to the ListBox declaration in the MainPage.xaml file:

XAML	Copy Code
<!-- ListBox on the left --> <StackPanel Grid.Row="1" Margin="5" > <TextBlock Text="ListBox Control" /> <ListBox x:Name="_listBox" ItemTemplate="{StaticResource DataItemTemplate}" /> </StackPanel> And also to the top C1ComboBox: <!-- C1ComboBox on the right --> <StackPanel Grid.Column="2" Grid.Row="1" Margin="5" > <TextBlock Text="C1ComboBox Controls" /> <!-- C1ComboBox 1 --> <C1_Silverlight:C1ComboBox x:Name="_cmb1" Margin="0,0,0,5" ItemTemplate="{StaticResource DataItemTemplate}" />

XAML

Copy Code

<!-- ListBox on the left -->
<StackPanel Grid.Row="1" Margin="5" >
  <TextBlock Text="ListBox Control" />
  <ListBox x:Name="_listBox"
           ItemTemplate="{StaticResource DataItemTemplate}" />
</StackPanel>
And also to the top C1ComboBox:
<!-- C1ComboBox on the right -->
<StackPanel Grid.Column="2" Grid.Row="1" Margin="5" >
  <TextBlock Text="C1ComboBox Controls" />

  <!-- C1ComboBox 1 -->
  <C1_Silverlight:C1ComboBox x:Name="_cmb1" Margin="0,0,0,5"
        ItemTemplate="{StaticResource DataItemTemplate}" />

Note that we can now change the appearance of the DataItem objects by modifying the template in one place. Any changes will automatically be applied to all objects that use that template, making application maintenance much easier.

Before you run the application again, let's add a template to the second C1ComboBox as well. This control contains a list of font families. We can use templates to display each item using the actual font they represent.

This time, we will not define the template as a resource. It will only be used in one place, so we can insert it inline, as shown below:

XAML	Copy Code
<!-- C1ComboBox 2 --> <C1_Silverlight:C1ComboBox x:Name="_cmb2" FontSize="12" Margin="0,0,0,5" > <C1_Silverlight:C1ComboBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" FontFamily="{Binding}" Margin="4" /> </DataTemplate> </C1_Silverlight:C1ComboBox.ItemTemplate> </C1_Silverlight:C1ComboBox>

XAML

Copy Code

<!-- C1ComboBox 2 -->
<C1_Silverlight:C1ComboBox x:Name="_cmb2" FontSize="12" Margin="0,0,0,5" >
  <C1_Silverlight:C1ComboBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding}" FontFamily="{Binding}" Margin="4" />
    </DataTemplate>
  </C1_Silverlight:C1ComboBox.ItemTemplate>
</C1_Silverlight:C1ComboBox>

Don't let the XAML syntax confuse you. This specifies that in order to create items from data, the control should use a DataTemplate that consists of a single TextBlock element. The TextBlock element should have two of its properties (Text and FontFamily) bound to the data object itself (as opposed to properties of that object).

In this case, the data object is a FontFamily object. Because the template assigns this object to the Text property and also to the FontFamily property, the TextBlock will display the font name and will use the actual font.

If you run the project now, you should see this result:

Note that if you assign a DataTemplate to the C1ComboBox, it will no longer be able to perform text-related tasks such as auto-search and editing. If you want to re-enable those features, you should provide your own ItemConverter that is a standard TypeConverter.

Styles and Templates are extremely powerful concepts. We encourage you to play and experiment with this sample. Try modifying the templates to show the data in different ways. The more you experiment, the more comfortable you will feel with these concepts and with the Silverlight/WPF application architecture.