Silverlight 5.0 RC: Implicit Templates and Effective Data Representation
Posted by: Mahesh Sabnis
in Category Silverlight 2, 3, 4 and 5
Abstract: Silverlight 5 RC Implicit Templates are DataTemplates and are associated with a specific DataType. They are a powerful addition to the Silverlight 5 templating abilities and in this article, we will explore the same
A couple of months ago, I was working on a requirement using Silverlight 4, which contained a ListBox with Employees information in it. This ListBox contained Employee’s category information like Manager, Operator etc and the data was displayed in the ListBox using DataTemplates. A part of the requirement was to use a style for every Employee Category, which I found difficult to implement in SL 4, once the DataTemplate for the ListBox was set. I somehow implemented the styling programmatically.
A couple of days ago, while exploring Silverlight 5 RC and looking at the new Implicit Templates feature, I remembered the requirement I just described. Implicit Templates are DataTemplates and are associated with a specific DataType. They are applied on the control which has a DataTemplate containing this DataType. I decided to use Implicit Templates for the above requirement.
Step 1: Open VS2010 and create a new Silverlight Application, name it as ‘SL5_Implicit_Template’. Make sure that you select Silverlight 5 version as shown below:
Step 2: In this project add a new class file, name it as ‘SourceClass.cs’. This file contains classes used for the DataBinding:
The above code defines an ‘Employee’ base class and Manager and Operator classes inherit from it.
Step 3: Open MainPage.xaml.cs and write the following code:
The above code defines a collection of Employees with various categories.
Step 4: Open MainPage.Xaml and declare an Application namespace in the UserControl XAML tag as below:
Step 5: Add the TextBlock and ListBox on the Page and Set the ItemsSource property of the ListBox to the ‘Employees’ collection. The XAML code is as shown below:
Step 6: Run the application and the following result will be displayed:
The above result is logically correct, since the Employees collection is defined for an Employee base class and Operator and Manager Classes are inherited from it.
Step 7: Now to apply different look and feel for every Employee based upon the category, we need to define separate DataTemplate for each category Data type e.g. Employee, Manager and Operator.
To do this in the UserControl Resources, add the DataTemplates given below. Make sure that these templates need to be automatically applied to the specific DataType, so you should not define ‘x:key’ for any DataTemplate.
Step 8: Now run the application again and the result will be as shown below:
The above image proves two things – Implicit templates in Silverlight is cool and that I am not a good UI designer :)
Conclusion: Using the Implicit Template feature, we can provide a rich UI display to the DataTemplates.
The entire source code of this article can be downloaded over here