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:

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.

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