Implicit Data Templates (Silverlight 5)

A Silverlight 5 Mini-Tutorial

A new feature in Silverlight 5 is the Implicit Data Template, which allows you to target a  data template for a specific data type.  Thus, you might create a class hierarchy of Messages, Direct Messages and Replies (with the latter two derived from the first) and then modify how they are displayed in, e.g., a list box, based on the type of the message.

[Click on image for full size]

Pete Brown has a beautiful walkthrough of this idea here, my walkthrough will be much simpler, just enough to show you how it works and to hint at the potential it offers.

In the figure above, direct messages are printed in red, and replies have the original message appended to the message (e.g., in reply to message 5).

To create this, open a new Silverlight 5 application, and name it ImplicitDataTypes.

The first thing to do is to define a local namespace at the top of the Xaml page,

xmlns:local="clr-namespace:ImplicitDataTemplates"

Let’s set up the list box which will be the only control in the Xaml.  Immediately inside the list box declaration we’ll declare a ListBoxResource element which will in turn contain all the DataTemplates.

<Grid
   x:Name="LayoutRoot"
   Background="White">
   <ListBox
      x:Name="MyMessages">
      <ListBox.Resources>

Inside the ListBox.Resources element we’ll declare three DataTemplates, one for each of the types we want to support.  Each begins with the DataTemplate element which now has a DataType property.

<DataTemplate
   DataType="local:Message">
   <StackPanel
      Orientation="Horizontal">
      <TextBlock
         Text="{Binding MessageID}" />
      <TextBlock
         Text="] " />
      <TextBlock
         Text="{Binding Sender}" />
      <TextBlock
         Text=", " />
      <TextBlock
         Text="{Binding Topic}" />
      <TextBlock
         Text=": " />
      <TextBlock
         Text="{Binding Text}" />
   </StackPanel>
</DataTemplate>

The second DataTemplate is specialized for replies, and adds  TextBlocks to show the original message ID,

<DataTemplate
   DataType="local:Reply">
   <StackPanel
      Orientation="Horizontal">
      <TextBlock
         Text="{Binding MessageID}" />
      <TextBlock
         Text="] " />
      <TextBlock
         Text="{Binding Sender}" />
      <TextBlock
         Text=", " />
      <TextBlock
         Text="{Binding Topic}" />
      <TextBlock
         Text=": " />
      <TextBlock
         Text="{Binding Text}" />
      <TextBlock
         Text=" (In Reply to Message " />
      <TextBlock
         Text="{Binding OriginalMessageID}" />
      <TextBlock
         Text=")" />
   </StackPanel>
</DataTemplate>

Finally, the DirectMessage DataType sets the foreground color on the Sender and the Topic to the color Red to make these stand out,

<DataTemplate
   DataType="local:DirectMessage">
   <StackPanel
      Orientation="Horizontal">
      <TextBlock
         Text="{Binding MessageID}" />
      <TextBlock
         Text="] " />
      <TextBlock
         Foreground="Red"
         Text="{Binding Sender}" />
      <TextBlock
         Text=", " />
      <TextBlock
         Foreground="Red"
         Text="{Binding Topic}" />
      <TextBlock
         Text=": " />
      <TextBlock
         Text="{Binding Text}" />
   </StackPanel>
</DataTemplate>

Note – due to a bug in the Silverlight 5 Beta, the Xaml will show as invalid. Not to worry, it builds just fine.

The code-behind just instantiates some data for us to work with: a collection of Messages to bind to the list box, and five messages of various types to populate the list box,

private void MainPage_Loaded( object sender, RoutedEventArgs e )
{
   List<Message> Messages = new List<Message>( );
   Messages.Add( new Message( ) {
      MessageID = 1,
      Sender = "Pete Brown",
      Text = "Great job showing data templates",
      Topic = "Data Templates" } );
   Messages.Add( new DirectMessage( ) {
      MessageID = 2,
      Sender = "John Galloway",
      Text = "Pair Programming today?",
      Topic = "Full Stack" } );
   Messages.Add( new Reply( ) {
      MessageID = 3,
      Sender = "Jesse Liberty",
      OriginalMessageID = 1,
      Text = "Your write up was much prettier",
      Topic = "DataTemplates" } );
   Messages.Add( new Reply( ) {
      MessageID = 4,
      Sender = "Jesse Liberty",
      OriginalMessageID = 2,
      Text = "Yes",
      Topic = "Full Stack" } );
   Messages.Add( new Message( ) {
      MessageID = 5,
      Sender = "Joe Stagner",
      Text = "I have that disk that you need",
      Topic = "Open Source" } );

   MyMessages.ItemsSource = Messages;
}

Note that the first message is of the base type, Message, the second (line 9) is of type DirectMesssage (which derives from Message) and the third (line 14) is of type Reply (again, which derives from Message).

The actual type (Message, Reply, DirectMessage) determines which DataTemplate will be applied, but because of inheritance, the collection of Messages can hold all three types (since, as you remember from Object Oriented Programming 101, a derived type is-a base type).