Applied Magic

WPF and Silverlight both have a set of controls that are used to display content and collections of content. The cool thing about these controls, is that they can display any form of content, not just other UI controls.

In the samples below, the domain model contains a Person class, and 2 derived classes of Teacher and Student. The People collection has a mix of Person, Teacher and Student instances.

To add content directly to a control:

<ItemsControl Grid.Row="1" ItemsSource="{Binding People}" />

<ContentControl Content="{Binding People[0]}" />

By default (for non-visual objects), content is rendered  by displaying the text returned by the ToString() method. Controls are not omnipotent and do not magically know how to display the Person objects - they need instructions in the form of DataTemplates.

From MSDN:

You use a DataTemplate to specify the visualization of your data objects. DataTemplate objects are particularly useful when you are binding an ItemsControl such as a ListBox to an entire collection. Without specific instructions, a ListBox displays the string representation of the objects in a collection. In that case, you can use a DataTemplate to define the appearance of your data objects. The content of your DataTemplate becomes the visual structure of your data objects.

Explicit DataTemplates

DataTemplates are usually defined in a resource, but can also be created directly in the control definition. The following XAML snippet defines a DataTemplate resource:

<DataTemplate x:Key="personTemplate">
  <Grid Background="Azure" Margin="5">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock Text="First Name:" Grid.Row="0" Grid.Column="0" />
    <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
    <TextBlock Text="Last Name:" Grid.Row="1" Grid.Column="0" />
    <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
  </Grid>
</DataTemplate>

You then explicitly instruct the controls to use the template by setting the DataTemplate property:

<ItemsControl Grid.Row="1" ItemsSource="{Binding People}"
      ItemTemplate="{StaticResource personTemplate}" />
  :
  :
<ContentControl Content="{Binding People[0]}"
      ContentTemplate="{StaticResource personTemplate}" />

Explicitly setting the DataTemplate works great if your items are homogenous. But what if your working with heterogeneous data (such as mix of Person, Student, and Teacher objects)?

Implicit DataTemplates

WPF controls can automatically determine which DataTemplate should be applied to a control based on the type of content.  Unfortunately, this feature is not implemented in Silverlight. 

To enable this automatic behavior, the DataTemplate resource must be declared with the DataType attribute instead of the Key attribute:

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

The controls automatically select a DataTemplate, so remove the explicit declarations:

<ItemsControl Grid.Row="1" ItemsSource="{Binding People}" />
  :
  :
<ContentControl Content="{Binding People[0]}" />

This sample application is using a different DataTemplate for Person, Student, and Teacher objects:

 DataTemplate Properties

Here are some of the WPF and Silverlight controls that have DataTemplate properties:

You can read more about DataTemplates on MSDN, in WPF in Action chapter 12 and in Silverlight in Action chapter 5.