Silverlight 5 Takes DataTemplate to the Next Level with Implicit Data Templates

I recently attended DevTeach in Montreal, where I saw lots of great sessions and speakers! One of which was Laurent Duveau ( @LaurentDuveau), Laurent is a Microsoft Regional Director and a Silverlight Most Valuable Professional. He loves web technologies and currently focuses on Silverlight, RIA/Touch and Windows Phone apps. You may have seen him presenting at TechDays, user groups, or code camps. Laurent is a principal at RunAtServer and at the moment he is preparing for an upcoming Silverlight training tour in Vancouver. He agreed to take some time out of his busy schedule to show us one of the great new Silverlight 5 Features that he will be showing on the tour.

Implicit Data Template in Silverlight 5

One of the cool new features of Silverlight 5 is Implicit Data Templates. DataTemplates in Silverlight control how you display databound data. In the past, DataTemplates were defined inside a control or linked to a resource with a key.

Implicit DataTemplate allows templates to be automatically applied to databound items based on their types (this feature already exists in WPF). This is very useful when you have a list that contains objects of different types, and you want a different layout for each type.

Let’s take a look and see how it works.

The following class diagram shows a base class called SocialItem, and several derived classes: TwitterItem, FacebookItem, LinkedInItem, YoutubeItem, and RssfeedItem

 
I can bind a ListBox to a list containing items of type SocialItem, the list can contain any of SocialItem’s derived classes: TwitterItem, FacebookItem, etc…

Using an Implicit Data Template I can go…

1. From this (Silverlight 4):

2. To this (Silverlight 5):

This is accomplished by applying different XAML templates depending on the object’s type.

1. Silverlight 4

In the past you would apply a single DataTemplate with a key in Resource to all items in the ListBox:

 <UserControl.Resources>
     <DataTemplate x:Key="SocialItemTemplate">
         <StackPanel>
                 <TextBlock Text="{Binding UserName}" FontWeight="Bold"/>
             <TextBlock Text="{Binding Status}" TextWrapping="Wrap" HorizontalAlignment="Left"/>
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{Binding Name}" Foreground="#FF9F9F9F" TextWrapping="NoWrap"/>
                 <TextBlock TextWrapping="Wrap" Text=" / " Foreground="#FF9F9F9F"/>
                 <TextBlock Text="{Binding ElapsedTimeSincePost, Mode=OneWay}" Foreground="#FF9F9F9F"/>
             </StackPanel>
         </StackPanel>
     </DataTemplate>
 </UserControl.Resources>

 <ListBox ItemTemplate="{StaticResource SocialItemTemplate}" ItemsSource="{Binding Items}" />

2. Silverlight 5

Now, all DataTemplates are defined in Resource with a DataType attribute set to the target type instead of a key:

 <DataTemplate DataType="model:RssfeedItem">
     <Grid VerticalAlignment="Top" Margin="0">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="40"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
         <Image Source="/Images/rssfeed-icon.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,5,0"/>
         <StackPanel Grid.Column="1">
             <TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="14" FontFamily="Arial" FontWeight="Bold"/>
             <TextBlock Margin="0" TextWrapping="Wrap" Text="{Binding Text}" FontSize="13.333"/>
             <HyperlinkButton Content="{Binding Url}" Height="21" Margin="0" NavigateUri="{Binding Url}"/>
         </StackPanel>
     </Grid>
 </DataTemplate>
  
 <DataTemplate DataType="model:TwitterItem">
     <Grid VerticalAlignment="Top" Margin="0">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="40"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
         <Image Source="/Images/twitter-icon.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,5,0"/>
         <Border Grid.Column="1">
             <StackPanel>
                 <HyperlinkButton Content="{Binding UserName}" HorizontalAlignment="Left" Margin="0" FontWeight="Bold" />
                 <TextBlock Text="{Binding Tweet}" VerticalAlignment="Center" FontSize="16" Margin="0" TextWrapping="Wrap"/>
             </StackPanel>
         </Border>
     </Grid>
 </DataTemplate>
     
     [...] see full code in download.

 <ListBox ItemsSource="{Binding Items}" />

Note: the ListBox does not need to reference any template.

Now, if you move your DataTemplates to a ResourceDictionary, any time an object appears in a view it will pickup the correct template, that’s cool!

Also note that Implicit Data Templates are polymorphic, so you can define a template for a base class, and redefine if for a derived class.

If you want to try it out yourself…

Download my code sample (Silverlight 5 beta)

Thank you Laurent! Great blog post, and providing a link to download sample code is always appreciated by developers

Todays My 5 is of course tied to the Silverlight theme

My 5 ways to learn more about Silverlight 5 (in no particular order)

1. Watch a quick tour of the Silverlight 5 beta
2. Visit the Microsoft Silverlight site to get the latest news and downloads
3. Download the beta tools and try it out
4. Check out the Silverlight Team Blog
5. Learn from our blog author, Laurent Duveau, on his Silverlight tour