WPF 4.0 : Editable ListBox using Commanding for Data Templates

Posted by: Mahesh Sabnis , on 7/15/2011, in Category WPF
Views: 61578
Abstract: This article demonstrates that in case of complex data representations like an Editable ListBox, using ItemsControls, we can easily configure Commanding for DataTemplates.

We often face requirements to display data in different UI Layouts. Some users like to view data in a Tabular form using DataGrid, while some like to view data in a List form record-by-record. Along with viewing, users also perform Update and Delete operations on the records displayed in the List. Now as a solution provider, it is our responsibility to make sure that the end-user requirement are fulfilled (and WPF provides a good platform for that). I came across a similar requirement when one of my old students popped up a question of creating an Editable ListBox. This question drove me to write this article.

In WPF databinding, typically for the ItemsControls family e.g. ListBox or ComboBox, we make use of DataTemplates for complex data presentation. DataTemplate represents the Visual structure of Data representation. This itself is a collection of UI elements with Databinding expressions. In this article, I have used DataTemplate with buttons which are configured with Command property.

For this article, I have used SQL server and ADO.NET EF (Entity Framework). The Schema of the EmployeeInfo Table is as below:

wpf-employee-info

Task 1 : Open VS2010 and create a new WPF windows application, name it as ‘WPF40_RecordList’. In the project, add a new ADO.NET EF model, name it as ‘CompanyEDMX.edmx’ and complete the wizard by selecting Database and the EmployeeInfo table as shown above. The final step of the wizard should display the following:

employee info

Step 2: In the project, add a new class file and name it as ‘CommandClasses’. This class file will contain classes for the DataAccess, Modeling and Commanding. Add the following class shown below in this class file. This class will make a call to ADO.NET EF and perform Read, Update and Delete operations:

wpf-modelling-commanding

Step 3: In the class file, add a new class with the name ‘MyApplicationCommand’. This class will define commanding infrastructure for the application. This class defines an ‘Action’ delegate which represents methods with no input and output parameters. This class acts as a template command class for defining Command objects for any actions. In this example, I am going to use this for Update and Delete command operations.

wpf-command-class

Step 4: Now add another class shown in the same class file created above. Name this class as ‘ApplicationModel’. This class is used to define command objects. It also makes a  call to the DataAccess class for performing Update and Delete operations. Note that the class defines void methods for Get, Update and Delete operations. It also defines ObservableCollection<T> object for Employees and SelectedEmployee public properties which are used for DataBinding on the UI. The command objects UpdateCommand and DeleteCommand are defined to bind with the UI and execute actions for Update and Delete operations defined in this class. The code is as below:

wpf-application-model

Step 5: Open MainWindow.Xaml and write the following xaml code:

wpf-editable-list-xaml

The above XAML registers the current namespace using clr-namespace with ‘src’ as a placeholder. In the windows resource dictionary, an object of the ApplicationModel class is defined and also the DataTemplate - ‘EmpTemplate’ with TextBlocks, TextBoxes and Buttons are defined. The bindings are as follows:

  • TextBoxes are bound with the properties from EmployeeInfo class available with the application using ADO.NET EF.
  • Buttons are bound with the Command objects exposed by the ApplicationModel class.
  • The ListBox ‘lstRecord’ is bound with the Employees collection exposed by the source and the DataTemplate is bound with the ItemTemplate property.
  • The SelectedItem property of the ListBox is bound with the SelectedEmployee property of the source class. This provides an EmployeeInfo object which is used to perform Update and Delete operation.

Step 6: Run the application. The output will be as shown below:

WPF Editable ListBox Demo

For performing an Update/Delete operation, you must select the Record from the ListBox as shown below:

clip_image002

Now you can change properties other than EmpNo for doing the Update operation. For the Delete operation, select a record and press the Delete button and the record will get deleted. You can confirm the same in the Database.

Conclusion: The sample shown in this proves that in case of complex data representations, using ItemsControls, we can easily configure Commanding for DataTemplates. Hence we can separate the code-behind and write application logic in a separate class (ViewModel). Since DataTemplate is a reusable declaration, we can easily use it in various List-family UI’s and provide code-less facility for Data manipulation using these controls.

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

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
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


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Roshan Kumar on Thursday, August 4, 2011 7:39 AM
Some error is comming in the line
<src:ApplicationModel x:Key="AppModel"></src:ApplicationModel>
Error: Cannot create the instance of "Application Model"

Please help.
Comment posted by Brian on Thursday, January 31, 2013 6:44 PM
The link to the code appears to retrieve code for a different article -- could you please check / update ?

tia
b

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