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 Implicit Data Types 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).

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Data, Essentials, Mini-Tutorial, Silverlight 5 and tagged . Bookmark the permalink.

9 Responses to Implicit Data Templates (Silverlight 5)

  1. Steven says:

    Can DataTemplate instances now also be created dynamically with code behind?

    Or, is this still the only way to do this?

    http://stackoverflow.com/questions/59451/creating-a-silverlight-datatemplate-in-code

    Just looking for an example. thanks.

  2. Jonathan says:

    “Couldn’t you have saved a lot of time by linking to a WPF blog post from 2006?”

    LOL. Seriously though, what took this so long to get included in SL? Yay that it is in there but have been waiting on this forever.

  3. Pingback: DotNetShoutout

  4. Couldn’t you have saved a lot of time by linking to a WPF blog post from 2006? 🙂

  5. Dale says:

    Has the bug in Silverlight5 been isolated yet?

  6. Fallon Massey says:

    What HTML are you talking about?

Leave a Reply

Your email address will not be published.