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.
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:
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.
Make sure that you have imported the namespace of the types you are going to use. Here, my emp indicated my namespace for EmployeeClasses.
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:
<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.
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 :).
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.
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.
