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

Posted by: Mahesh Sabnis , on 4/26/2011, in Category WPF
Views: 78684
Abstract: Prism 4 Commanding and its facility of the CommandBehavior helps us to develop End-To-End application for DML operations using controls like the WPF DataGrid. In this article, we will see a practical implementation of the same.

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.

 

 image

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:

clip_image001

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

wpf-prism-Iservice

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

wpf-prism-service1

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:

wpf-serviceadapter

 

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:

DataGrid-Custom-Command-Behavior

DataGrid-Custom-Command-Behavior1

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:

wpf-application-viewmodel

wpf-application-viewmodel1

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:

wpf-end-end-application

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

image

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:

clip_image002

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:

clip_image004

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

clip_image006

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

clip_image008

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

Give a +1 to this article if you think it was well written. 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 swapnil tayade on Sunday, March 31, 2013 5:50 AM
Hey, your article is very nice. Since I am new to wpf technology, I gone through some book and tutorials and learned some basics of wpf.

But my current project is using prism 4.0, I feel very hard to start with it. Can you please guide me how to start building application using prism 4.0

Thanks in advance :)
Comment posted by BGDC on Wednesday, June 5, 2013 5:57 AM
Error   2   Cannot implicitly convert type 'WPF_End_To_End_Application.MyRef.EmployeeInfo[]' to 'System.Collections.ObjectModel.ObservableCollection<WPF_End_To_End_Application.MyRef.EmployeeInfo>'   

please let me know what to do?

Thanks
Comment posted by sufyan ahmed on Friday, July 19, 2013 1:32 AM
very nice article.i am impressed.please provide your mail id.i am still having some doubts.i will contact you.my mail id is sufyan1975@gmail.com
Comment posted by hutz on Sunday, November 17, 2013 1:10 PM
Thank you for your article!
It is very useful, because a mix of important technologies.
Unfortunately, I could not enjoy anything, since I get similar errors as in previous comment of BGBD.
Whence comes this reference myRef?
Thank you in advance for your feedback.

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