Silverlight 4.0: Applying Data Templates on ListBox at Runtime

Posted by: Mahesh Sabnis , on 7/21/2011, in Category Silverlight 2, 3, 4 and 5
Views: 84776
Abstract: DataTemplates in Silverlight are typically used for visual representation of your data. They are particularly useful when you are binding an ItemsControl such as a ListBox to a collection. I was recently asked to make use of a DataTemplate on a ListBox at runtime, for performing Update operations. In this article, I have demonstrated how to declare DataTemplates in XAML and to read and apply them at runtime

DataTemplates in Silverlight are typically used for visual representation of your data. They are particularly useful when you are binding an ItemsControl such as a ListBox to a collection. I was recently asked to make use of a DataTemplate on a ListBox at runtime, for performing Update operations.  In this article, I have demonstrated how to declare DataTemplates in XAML and to read and apply them at runtime.

Note: If you are interested in Silverlight development, make sure you check out this article - Microsoft Silverlight 4 Tutorials You Must Read

Step 1: Open VS2010 and create a new Silverlight application, name it as ‘SL4_Records_ListBox’. In the project, add a new class file and add the following classes in it:

silverlight-listbox-collection

The Employee class acts as an entity for Update Operation parameter. The EmployeeCollection class defines methods for reading all Employees and performing Update operations on the EmployeeCollection.

Step 2: Open MainPage.Xaml and define the following DataGrid and a ListBox. Define DataGrid columns bound with properties from the Employee class.

silverlight-data-template 

The above XAML defines two DataTemplates ‘EmpReadTemplate’ and ‘EmpEditTemplate’. The ‘EmpReadTemplate’ defines XAML elements to display read-only Employee record in each ListBoxItem of the List ‘lstEmployee’, using TextBlocks. It also defines an ‘Edit’ button which is used for changing the DataTemplate. The ‘EmpEditTemplate’ is used to display editable ListBoxItem for the ListBox. This DataTemplate also has a Button element which is used to update the changed value for the Employee in the EmployeeCollection.

Step 3: Open MainPage.Xaml.cs and write the following code.

silverlight-runtime-data-template

Please read the comments marked on each method to understand the flow. These comments explain the role of each method in the application.

Step 4: Run the application. The result will be as shown below:

Silverlight Data Templates

The above code shows that the ‘EmpReadTemplate’ is displayed for each ListBoxItem for the ListBox. Now click on the Edit button and the result will be as shown below:

Silverlight Data Templates

The ‘EmpReadTemplate’ is replaced by ‘EmpEditTemplate’. Now change the Salary and click on ‘Save’ button and the result will similar to the following:

Silverlight Data Templates

Conclusion: This technique of changing DataTemplate at runtime for ItemsControls comes very handy while developing UI as per our business applications.

The entire source code of this article can be downloaded over here.

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Bhavesh on Friday, July 22, 2011 11:37 AM
Nicely explain....I was having an issue where i have define DataTempate at Generic.xaml and using Convertor i am assinging tempatle to ListBox...now...all the data template have differnet style and different object assing to that..
DateTempat 1 - List < Object 1  >
DateTempat 2 - List < Object 2  >
Now...we are uisng Prism + MVVM ...Now..Both of the datatempat have button and when user click on it we need to handle event in view model...Now as this ListBox is binded to Object1/Object2 ..How i can write code which handle event in view model for both data tempalte..
Please guide..
Comment posted by sanjay on Tuesday, November 1, 2011 7:37 AM
hello i wd like to know do u have any idea how autotexbox in silverlight can be used using wcf+linq+propertylayer
Comment posted by somashekhar on Tuesday, June 12, 2012 5:36 AM
I m a beginner to silverlight.I saw this code and i m not able to copy this one so that i can see the output in visual studio.
Comment posted by Dave B. on Friday, September 7, 2012 6:19 AM
Could you either provide a downloadable version of the code or make it selectable on this page?  Thanks.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel