Click here to Skip to main content
Click here to Skip to main content

Implicit DataTemplates in Silverlight 5, With practical case study

, 20 Apr 2011
Rate this:
Please Sign up or sign in to vote.
As we know Silverlight 5 Beta got released with some exciting features for developers .Based on the 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 lo

As we know Silverlight 5 Beta got released with some exciting features for developers .Based on the 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 DataTemplete  feature .

DataTemplete , Overview for Newbie

DataTempletes 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 work around.

Implicit Data Templates

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

DataTemplete Evolved , Implicit DataTemplete

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

Implicit DataTemplete , the Key Points

  • Implicit Datatemplete 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 a application that shows up the list of my employee with their respective information.And based on our policy the employees can be of two type

  • Regular Employee
  • Hourly Employee(Contractual)

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

Based on above requirement the class diagram comes up with somehow as bellow

Implicit Data Templates

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

Implementing DataTemplete

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 first step i am going to define a DataTemplete in App.Xaml Resource.As earlier we used to do, the DataTemplete usually carries a key and the key used to be assigned to control .But ..

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

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 datatempletes defined for 2 different type such as HourlyEmplyee and RegularEmployee.Each of the template defined in such a way that the employees can be identified easily with in a collection.

A typical piece of DataTemplete 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 covered till here then the concept of Implicit DataTemplete is over , assigning the data type to the datatemplete will do the rest of job.Now lets check with the main page of project .

As you can check with the code bellow the main page with 2 controls doesnot have any logic or whatsoever in the xamlImplicit Data Templates

In this sample the data has been assigned to the both 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 Smile.

        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 any where else.

Implicit Data Templates

Conclusion

The feature gives us a 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 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)

About the Author

Manas_Patnaik
Software Developer (Senior) Infosys
India India
Nothing special .. I like challenges and love my critics.
 
Associate Consultant | Microsoft | Bangalore | India

Blog : http://manaspatnaik.com/blog

Twitter@manas_patnaik
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 20 Apr 2011
Article Copyright 2011 by Manas_Patnaik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid