Silverlight 5.0 RC: Implicit Templates and Effective Data Representation

Posted by: Mahesh Sabnis , on 9/18/2011, in Category Silverlight 2, 3, 4 and 5
Views: 77127
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. 

For this article, you must have Silverlight 5 RC and Silverlight 5 RC Tools for Visual Studio 2010 SP1. By the way, you can develop Silverlight 3, 4 and 5 applications side-by-side.
On a side note, make sure you check our latest article Microsoft Silverlight 4 Tutorials You Must Read
 
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:

Silverlight 5 version

Step 2: In this project add a new class file, name it as ‘SourceClass.cs’. This file contains classes used for the DataBinding:

source class

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:

Employee collection

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:

xmlns:source="clr-namespace:SL5_Implicit_Template"

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:

listbox itemssource

Step 6: Run the application and the following result will be displayed:

SL5 implicit template

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.

image

Step 8: Now run the application again and the result will be as shown below:

implicit templates in silverlight 5

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
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Bhavesh Rana on Wednesday, September 21, 2011 1:43 AM
useful...This features is missing..and because of that we need to deal wiht Conveter..DataTemplateSelected etc...
This is easy to use and quick to code..
Comment posted by Ashutosh nigam on Thursday, September 22, 2011 7:40 AM
very nice post.....

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel