Implicit DataTemplates in Silverlight 5, With practical case study

Manas Patnaik
14y
8.5k
0
0

Article

As we know Silverlight 5 Beta has been 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 XAML binding debugging option and in this artiucle we are going to have a look into the new implicit DataTemplate feature.

DataTemplate , Overview for Newbie

DataTemplates are visual representations of data. Consider a case in which you are supposed to show all the clients in a combobox along with their Phone Number and Email Address; how will you do it?? This was practically impossible with previous technology without a bit of extra work.

So now Microsoft offers a richness for the user experience with the 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 DataTemplete then continue with the rest of this article.

DataTemplate Evolved, Implicit DataTemplate

As we know until now Silverlight supported applying DataTemplate to the controls not data but Silverlight 5 enables the template to attach itself to a data object type rather than control only. However the same feature has been in WPF for a long time but Microsoft introduced this concept to web RIA with Silverlight 5 Beta, named Implicit DataTemplete. Considering that you have a basic idea off 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

An implicit DataTemplete is a template for a Data Type, not a control.
No or Zero dependencies on Control type
Useful for a Composite collection or a collection with different Data Objects

The Case Study

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

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

Regular Employee
Hourly Employee (Contractual)

The Regular Employees have monthly salaries however the contractual employees are paid by the hour. Also regular employees have company domain mail ids.

Based on the above requirements the class diagram is as bellow:

Now one of your pages require showing all employees (within a collection of employees) with their information. And the problem with the earlier approach is that your DataTemplate for the ListBox must vary based on the data and also the visual representation for employees must be the same irrespective of controls, either in a List or a ComboBox. Here the implicit DataTemplate comes to our rescue…

Implementing DataTemplate

As mentioned above, I am going to load all employees, both Regular and Hourly, to the ListBox .The ListBox has no idea how the data is going to be displayed. In the first step I am going to define a DataTemplate in an App.Xaml resource. As previously we used to do, the DataTemplate usually carries a key and the key is assigned to the control. But ..

In the implicit method instead of Key we are going to add DataType attribute to the DataTemplate.

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

So as you can see I have two DataTemplates defined for 2 different types such as HourlyEmplyee and RegularEmployee. Each of the templates are defined in the manner allowing employees to be identified easily within a collection.

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

<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 followed untill here then the concept of an implicit DataTemplate is over; assigning the data type to the DataTemplate will do the 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:

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

1

2

3

4

5

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

Lets Run…

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

Conclusion

The feature gives us immense flexibility for data presentation; I don't know how we managed so long with out 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

Live Link –: Here

Download Source Code-: ImplicitDataTemplate.zip

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