How to Use DataTemplate In Silverlight?

debal_saha-9451
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 18002 red flag
Rating: 5 out of 5  
 1 vote(s)

This is a simple article where I have described how we can use DataTemplate in Silverlight Control.


 Download source code for How to Use DataTemplate In Silverlight?


In my previous article I have discussed about of Template briefly.

Here we shall consider about how to use data template in a simple manner.

Ok,We know that controls are basic elements to built use interfaces in Xaml page .Modern Silverlight comes with very rich internet application and also set of core controls. Here we go some little deep to learn about  basic control classes . Basic controls are never use in Silverlight directly. We can’t do that .  Actually basic controls are those,  from which other controls are derived. So , how they used in application , we need to look at the control inheritance  hierarchy.


So this is basic inheritance hierarchy structure how controls are defined in Silverlight . We shall go to look every part of this structure one by one .

DependencyObject : 

One of the important features of Silverlight Xaml code behind is the use of Dependency Property. This is a special type of property using in Xaml Control that are defined in a typical way different from normal CLR Property. I gave also the difference between the Normal Property and Dependency Property in my previous article. Look at the difference table between Dependency Property and CLR Property here. One special thing about dependency property is its ability to enable mark up expression to assign the Property in Xaml and the Values of markup expression should be determined at the runtime. For example of Dependency Property is Textbox Text property.

This dependency Property derived from the dependency Object Class. So it will only support those object which are derived from dependency Object i.e. inherited from Dependency Object Class. This Dependency Object maintains the dependency Property by a class and registering the dependency property with it. One thing to remember is that every control that are used in Xaml page are derived from Dependency Object class, not directly via control or content control class.

User Interface Element:

The name totally implies that this class adds the functionality which enables to handle user input through keyboard, mouse or stylus and control focus. This Class is generating from Dependency Object Class. Yeah, the layout functionality for controls in our application is also added here.

FrameWork Element:

This provides additional functionality that provided by UIElement along with objects life time events. This also support for data binding via Getting Binding Expression and Set Binding Expression. The Frame Work Element Class derived from UIElement .

Control:

This is important class that most Xaml controls are inherit from it. This Class is responsible to appearance of Control by using Template property. This Class is derived from FrameWork Element.

ContentControl:

Content Controls are derived from Control Class and add  additional functionality  in derived control’s content area in their Control Template . For Example .< Button.Content > where you can put some additional items to customize it .

Thus it is obvious that, the core controls of Silverlight can’t be directly added in your application. They are called via DependencyObject in your application.

Ok, to modify a control in Silverlight application, we need to do work with Templates. Here a controversial matter can go between Styles and Templates. I describe between the Styles and template in my previous article .

Templates are allowing you to completely modify our Controls. Where Styles are allow to you to define a set of properties in your control. But templates allows you completely redefine control‘s underlying Xaml.

Two of the most Common types of Template are Control template and data template.

  • Control Template:

Control Templates are allow you to completely redefine entire Xaml for Control . So we can customize our Control using Control Template.

  • Data Template:

Data Templates are allow you to define a custom way in which the data should be display in a Control. In our application, we take a Combo box that display a list of Natures Images , though use of Data Template.

Now we are going to modify a control in our simple applications. This is our extremely simple application

1. Open Visual Studio 2010.Create a Silverlight Project . Select Silverlight Version 5. See Below Pic-1 . Be sure that you have installed Silerlight 5 RC, Silverlight 5 sdk in your machine . If not then go to the link  Silverlight 5 Sdk and   to read at a glance about Silverlight 5.


Pic-1

2. Now , Click ok our new project is ready for development . I have created 4 folders in the name of DataProvider, Images , ViewModel and Model. Add a C# class in every folder. See the Pic -2 , you can easily understand what are included in my project.


                                                                                    Pic-2

3. In my View Page I have a Combo box. .

4. In my Model Folder there is two classes in the name of Nature.cs and NatureEnumeration.cs . The Nature.cs class contains two properties in the name of NameofNature and Images .And the enumeration class contains a simple enum name of NatureEnumaration. Have a look at the code:

public enum NatureEnumeration : int

{

  Auttum,

Summer,

Winter

}

5. In Images folder,  "Nature Photo" is placed.

6. In DataProvider folder, there is a one class name of CollectionofNatures.cs . Here I write a static method GetNatureCollectionName() and it’s return type is ObservationCollection. Look at the code below

public static ObservableCollection<Nature> GetNatureCollectionName()

{

return new ObservableCollection<Nature>

{

new Nature {NameofNauters = NatureEnumeration.Auttum,Image = "/Images/1st.jpg"},

new Nature {NameofNauters = NatureEnumeration.Summer,Image = "/Images/2nd.jpg"},

new Nature {NameofNauters = NatureEnumeration.Winter,Image = "/Images/3rd.jpg"}

};

}

7.  After completing this task we come to  ViewModel Folder. Here we need to create a class in the name of NatureViewModel.cs . Here we create a property in the name of CollectionofNature and store all CollectionofNature name and images in here , and call this in ViewModel Constructor  through GetNatureCollectionName() method .Look at the code:

public class NatureViewModel

{

public NatureViewModel()

{

CollectionsofNauter = CollectionofNatures.GetNatureCollectionName();

}

public ObservableCollection<Nature> CollectionsofNauter { get; set; }

 

}

8. Looks like we are almost done. But wait we need to bind this property in View Page. Now in our MainPage.xaml(View) page we do all the necessary things one by one .

9. First we need to give the our ViewModel page namespace reference in our xaml page to bind the ViewModel with View.

xmlns:local= "clr-namespace:SilverlightDataTemplate.ViewModel"

10. Under <UserControl.Resource > we create Resource of ViewModel .Any time we can bind ViewModel class’s Property to any Element  in our UI page through this static resource key.

11. Here is the code . How to do that .

<UserControl.Resources>

<local:NatureViewModel x:Key="vm"/>

</UserControl.Resources>

12. The last step , we have to customize our Combobox, so that we can display the all Natures name along with Images in here.

13.  In this issue we can easily understand that we need to do work with DataTemplate . Because data should be coming in a specific order .So we need to define a custom way in which data should display a specific order in the Control.

14. Let’s do it .



15.It is obvious from the above Code what we want to do . In Step 1 (I give a arrow) we bind the ViewModel’s   CollectionsofNature property with ItemSource . In 2nd step we are using DataTemplate .  DataTemplate is placed under Combobox ItemTemplate because, Combo box may be contain multiple items in it’s content. Suppose we are doing work with a Datagrid and want to customize Columns of the datagrid , then me might be need to do work with <DataGridTemplateColumn.CellTemplate> and under this we need to put DataTemplate .

16.  So , here in our case the DataTemplate contains a control which is Grid. I make some row and columns. And then put Textbox and Image Control in it also bind their Text and Source Dependency Property with CLR property. See the step 3 arrow mark in the above code how the Image Source is bind with CLR property.

Build your application successfully and run it by pressing F5. See the output in below Pic-3.

Pic-3

Here simple way I defined how to do work with datatemplate. No Code Behind, just in a few steps in Xaml page. Hope, you like this, any feedback are most welcome. Download the Source Code. Be sure you have properly installed Silverlight 5 elements.

Page copy protected against web site content infringement by Copyscape

About the Author

debal_saha-9451
Full Name: DEBAL SAHA
Member Level: Starter
Member Status: Member
Member Since: 3/15/2011 4:01:43 AM
Country: India

http://silverlightpractice.blogspot.com/

Login to vote for this post.

Comments or Responses

Posted by: Anup1252000 on: 11/25/2011 | Points: 25
Nice article and very well explained. Keep it up.
Posted by: Ashoknalam on: 12/28/2011 | Points: 25
Nice.

Login to post response

Comment using Facebook(Author doesn't get notification)