WPF 4.0 : Editable ListBox using Commanding for Data Templates

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:

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:

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:

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.

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:

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

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:

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

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

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades 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), and Front-end technologies like Angular and React. Follow him on twitter @maheshdotnet or connect with him on LinkedIn