Click here to Skip to main content
15,867,834 members
Articles / Silverlight / Silverlight5

Implicit DataTemplates in Silverlight 5, With Practical Case Study

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
20 Apr 2011CPOL4 min read 9.5K  
Implicit DataTemplates in Silverlight5, with practical case study

As we know, Silverlight 5 Beta got released with some exciting features for developers. Based on the priority and the importance for a LOB application, I am trying to cover the features. In my last article, we discussed about XAML binding debugging option and in this post, we are going to have a look into the new implicit DataTemplate feature.

DataTemplate, Overview for Newbie

DataTemplates are visual representation of data. Consider a case you are supposed to show all the Client list in a combo box along with their Phone Number and Email Address, how will you achieve it?? This was practically impossible with previous technology until unless bit extra workaround.

Implicit Data Templates

So here, does Microsoft offer richness in User experience with DataTemplate concept. I am not going to cover the basics of DataTemplate but if you are a newbie to Silverlight and just started on Silverlight, then read some basics of DataTemplate and continue with the rest of the article.

DataTemplate Evolved, Implicit DataTemplate

As we know, until now Silverlight Supported applying datatemplate to the controls not Data but in Silverlight 5 enables the template to attach itself to data object type rather than control only. However, the same feature is there in WPF since long but Microsoft introduced this concept to web RIA with Silverlight 5 Beta, naming Implicit DataTemplate. Considering that you have a basic idea about datatemplate, I am going to put forward a practical example with implementation. Let me know if you have any other ideas or suggestions.

Implicit DataTemplate, the Key Points

  • Implicit DataTemplate means template for Data Type not control.
  • No or Zero dependency on Control type
  • Useful for Composite collection, Collection with Different Data Objects

The Case Study

Lets consider a case study for a HR of a company, for whom you are planning for LOB application.

I am the HR executive of a organisation and my job demands employees' information on my finger tip. I have an application that shows up the list of my employees with their respective information. And based on our policy, the employees can be of two types:

  • Regular Employee
  • Hourly Employee (Contractual)

The Regular Employees have salary option on a monthly basis, however the contractual employees have remuneration on an hourly basis. Also, the regular employees are going to have company domain mail ids.

Based on the above requirement, the class diagram comes up somehow as below:

Implicit Data Templates

Now, one of your pages requires to show all employees (within a collection of Employee) with their information. And the problem here with the earlier approach is that your DataTemplate for the list box must vary based on the data and also the visual representation for employees must be the same irrespective of controls, either in List or Combobox. Here, Implicit DataTemplate comes to our rescue…

Implementing DataTemplate

As mentioned above, I am going to load all employees, both Regular and Hourly to the list box. The List box has no idea how the data is going to display. In the first step, I am going to define a DataTemplate in App.Xaml Resource. As we used to do earlier, the DataTemplate usually carries a key and the key used to be assigned to the control. But ..

Here in implicit method, instead of Key, we are going to add DataType attribute to the datatemplate.

Implicit Data Templates

Make sure that you have imported the namespace of the types you are going to use. Here, my emp indicated my namespace for EmployeeClasses.

Implicit Data Templates

So as you can see, I have two datatemplates defined for 2 different types such as HourlyEmployee and RegularEmployee. Each of the templates is defined in such a way that the employees can be identified easily within a collection.

A typical piece of DataTemplate XAML wrapped inside a stackPanel and Grid can be found as below:

XML
<sdk:Label Grid.RowSpan="2" Height="28" HorizontalAlignment="Left" 
Margin="0,6,0,0" Name="lblName"
           VerticalAlignment="Top" Width="309" FontWeight="Bold" 
           Grid.ColumnSpan="4" Foreground="#FFD41313"
           Content="{Binding EmployeeName}" Grid.Column="1" />
           
<sdk:Label Grid.Row="1" Height="28" HorizontalAlignment="Left" 
Name="label2" VerticalAlignment="Top" Width="66"
           Content="Dept:" FontStyle="Italic" Grid.Column="3" 
           Margin="0,2,0,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<sdk:Label Content="Emp No:" FontStyle="Italic" Height="28" 
HorizontalAlignment="Left" Margin="0,2,0,0" Name="label3"
           VerticalAlignment="Top" Width="75" Grid.Row="1" 
           Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Column="1" />
<sdk:Label Content="Salary:" FontStyle="Italic" Height="28" 
HorizontalAlignment="Left" Name="lblcap_salary"
           VerticalAlignment="Top" Width="75" Grid.Row="2" 
           Grid.ColumnSpan="2" Grid.Column="1" 
           Margin="0,1,0,0" Grid.RowSpan="2" />
           
<sdk:Label Grid.Column="2" Grid.Row="1" Height="28" 
HorizontalAlignment="Left" Name="lblEmpNumber"
           VerticalAlignment="Top" Width="108" Margin="0,2,0,0" 
           Content="{Binding EmployeeNumber}" />
<sdk:Label Grid.Column="4" Grid.Row="1" Height="28" 
HorizontalAlignment="Left" Margin="0,2,0,0" Name="lblDept"
           VerticalAlignment="Top" Width="109" 
           Content="{Binding Department}" Grid.RowSpan="2"
           Grid.ColumnSpan="2" />
<sdk:Label Grid.Column="2" Grid.Row="2" 
Height="28" HorizontalAlignment="Left" 
Margin="0,2,0,0" Name="lblSalary"
           VerticalAlignment="Top" Width="76" 
           Content="{Binding Salary}" />
<Image Grid.RowSpan="4" Height="76" 
HorizontalAlignment="Left" Margin="3,8,0,0" Name="imgImage" 
Stretch="Fill" VerticalAlignment="Top"
            Width="79" Source="{Binding Image}" />
<HyperlinkButton  Grid.ColumnSpan="5" Grid.Row="3" 
Height="20" HorizontalAlignment="Left" Name="hbEmail"
            VerticalAlignment="Top" Width="309" 
            Grid.RowSpan="2" Margin="84,0,0,0" 
            Content="{Binding MailID}" />

Well, if you have covered till here, then the concept of Implicit DataTemplate is over, assigning the data type to the datatemplate will do rest of the job. Now let's check with the main page of the project.

As you can check with the code below, the main page with 2 controls does not have any logic or whatsoever in the XAML.

Implicit Data Templates

In this sample, the data has been assigned to both the controls on user control load event. The same can be achieved with declarative databinding too. The _employees are getting generated on pageload event with some dummy value. I hope readers will not bother about the source of data :).

C#
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    lstEmployees.ItemsSource = _employees;
    cmbEmployees.ItemsSource = _employees;
}

Let's Run…

Well, the application is ready to run with no efforts anywhere else.

Implicit Data Templates

Conclusion

The feature gives us an immense flexibility for data presentation, I don’t know how we managed so long without it. Your suggestion and comments are always welcome. Let us know how it is going to help you in your application context.

Source Code and Link

Make sure that you have downloaded the latest Silverlight SDK, if not, visit this post for more information on Silverlight 5 Beta.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Microsoft
India India
Nothing special .. I like challenges and love my critics.

Microsoft | Bangalore | India

Blog : http://manaspatnaik.com/blog

Twitter@manas_patnaik

Comments and Discussions

 
-- There are no messages in this forum --