WPF 4: Developing End-to-End application using Prism 4 Commanding and DataGrid Custom Behavior

While discussing WPF 4 and Prism 4 with one of my clients, we got into a discussion about DelegateCommand provided in Prism 4. We discussed questions on WPF and Prism End-to-End application development where WCF, ADO.NET EF and WPF DataGrid is used for Insert and Update operations. I immediately started working on an end-to-end scenario that provides commanding facility to the WPF DataGrid for performing Update and Delete operations. This article discusses a small application around the same, with the following architecture.

In this application I have used SQL Server 2008, ADO.NET EF and WCF Services.

Creating WCF Service  

Step 1: Open VS2010 and create a blank solution. Name it as ‘WPF_Prism4_App’. To this solution, add a new WCF service Application project and call it ‘WCF_Service_DML_OP’. In this project, rename ‘IService1.cs’ to ‘IService.cs’ and ‘Service1.svc’ to ‘Service.svc’.

Step 2: In this project add a new ADO.NET Entity-Data Model and name it as ‘CompanyEDMX.edmx’. Here I have used ‘EmployeeInfo’ table with the following columns:

• EmpNo, -> Primary key, Identity column
• EmpName
• Salary
• DeptName
• Designation

The EDM designer is as shown below:

Step 3: In ‘IService.cs’ add the following interface.

Step 4: Implement this interface in Service class as shown below:

Note: The methods in the above code make calls to ADO.NET EF methods.

Step 5: Publish the service on IIS.

Creating WPF 4.0 Client Application

Step 1: In the same solution, add a new WPF application and name it as ‘WPF4_End_To_End_Application’. In this project, add Prism 4 library references as  shown below:

• Microsoft.Practices.Prism.
• Microsoft.Practices.Prism.ServiceLocation.
• Microsoft.Practices.Prism.Interactivity.
• Microsoft.Practices.Prism.UnityExtensions.
• Microsoft.Practices.Unity

Step 2: Add the reference of the WCF service you just created, in this project. In the project, add a new Folder and rename it as ‘ServiceAdapter’. In this folder add a new class file and name it as ‘ServiceAdapterClass.cs’. This class will make a call to WCF service using proxy. The code is as shown below:

Step 3: In this project, add a new class and name it as ‘DataGridCustomCommandBehavior.cs’. In this application, since the WPF DataGrid needs to directly perform Update and Insert operation without any code-behind, I have added a custom behavior to my DataGrid for the CurrentCellChanged event. The code for the custom behavior is as shown below:

The above code defines custom behavior class for DataGrid of name ‘DataGridCustomCommandBehavior’. The constructor of the class subscribe the CurrentCellChanged event. The class CurreneCellChangedClass define Command, CommandParameter and CommandBehavior attached properties for detecting action from UI thread and accepts an object associated with DataGridRow as CommandParameter .

Step 4: Rename MainWindow.Xaml to Shell.Xaml and also change the code-behind class name.

Step 5: In the same project, add a new folder of the name ‘ViewModel’. In this folder, add a new class file and name it as ‘ApplicationViewModel.cs’. This class defines the following:

• Implements INotifyPropertyChanged interface for notification with UI.
• An instance of ServiceAdaptareClass using the constructor.
• The properties used for databinding with UI.
• DelegateCommand object properties for Command binding with UI.
• Methods to make call methods to ServiceAdapter.
• Execute methods for DelegateCommand.

The code is as shown below:

Note in the above class there are two important methods as below:

• CheckEmployeeAlreadyExist - This method accepts an EmployeeInfo object and checks whether the Employee record is already available in the Employee collection. This method plays an important role during Insert and Update operation. If the Employee is already present in the collection, then that Employee row is considered for update else it is used for insert.
• CheckEmployeeRecord - This method accepts an EmployeeInfo object and checks whether the Cells in DataGrid contains values or not. This method plays an important role during Insert and Update operation using DataGrid. If any of the cells in the DataGrid is empty, then that row is not used for Update operation.
• UpdatEmployeeDone - This method accepts an EmployeeInfo objects using ‘object’ parameter. This method checks whether employee is already present or not. Based upon the existence of the Employee, it performs either Insert or Update operation using ‘UpdateEmployeeCommand’.

Step 6: Open Shell.Xaml and define an instance of the ‘ApplicationViewModel’ class in Windows Resources. Also register the current application namespace in the XAML using clr-namespace. This is required to use the custom commanding with DataGrid. Drag-Drop the DataGrid on the Window. The XAML will be as below:

The important part of the above xaml is that the DataGrid is set with its custom commands with the following expressions:

These settings will be used when the end-user changes any value in the DataGridCell. When DataGridCell changes, the UpdateCommand will be called and either Update and Insert operation takes place depending on the UpdateEmployeeDone method from the ApplicationViewModel class. For Update or Insert opration, the CommandParameter property is set to the ‘SelectedItem’ property of the DatGrid. This property will return an instance of EmployeeInfo class. Buttons ‘Load Employee’ and ‘Delete Employee’ are bound with the ‘LoadEmployeesCommand’ and ‘DeleteEmployeeCommand’ declared using DelegateCommand in ViewModel class.

Step 7: Run the application and click on the ‘Load Employees’ button. The following result will be displayed:

Change any record by clicking on any cell and using ‘TAB’ button, exit the row. The value will be updated as below: (I am doing this for EmpNo:80 for Salary property) The result will be as below:

In the last row, add values in all cells except EmpNo. A new row will be added and the result will be as below:

To delete a row, select the row to be deleted and click on the Delete Employee button. The result will be as shown below:

Conclusion: Prism4 Commanding and its facility of the CommandBehavior helps us to develop End-To-End application for DML operations using controls like DataGrid. So those who are very comfortable with an MsExcel type of UI interaction, are the ones most benifited from this kind of a UI, and I am sure there are many of us who love Excel.

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