Silverlight 4.0: Applying Data Templates on ListBox at Runtime

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.

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:

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.

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.

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:

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:

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

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

Mahesh is having 10 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet

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.