UI User Interactions
Download Source Code

In this section we will show you how to:

  • Execute the commands
  • Setup automatic UI update
  • Undo after an UI update
Execute the Commands

To execute the commands we write a CommandBase base class that we can use in the ViewModel. The base class merely passes the delegate that will be run when the command is executed:













Then in the ViewModel we declare the commands that is available for the View to bind. For example, in the CustomerViewModel we define the command to delete the customer:


Which will run the Delete() method when called. Then in the CustomerListView we specify the command to execute when the delete button is clicked:


All of the commands are set up this way to facilitate the binding of the commands to the ViewModel.

Setup Automatic UI Update

Next we need to make sure the entire UI is updated when a property of the ViewModel is changed. This is done by including a ViewModelBase class in which all the ViewModels inherits:


For example, the CustomerViewModel inherits from the ViewModelBase class:









When the FirstName property of the CustomerViewModel changes (such as when editing a customer) the entire UI should reflect such change. In the ViewModel's property we just call the OnPropertyChanged method with the property name and WPF will take care of the rest:

Undo After an UI Update

When an user cancel a change you will encounter an issue with data binding. For example, the user may change the first name of a customer in the edit customer window which will update the entire UI:


then later decide to cancel by pressing the Cancel button. With the default two-way data binding the UI will retain the changed value even though the user canceled the change.

The first thought may be to use one-time binding and commit the change only if the user clicks on the Save button. This will work except you will encounter a few more issues:
  • You will need to pass multiple values to the save command, which clutters up the xaml and you will also need to cast the multi-value being passed from the command from a list of type object
  • You will not be able to use the validation provided by WPF which requires data binding
The way to solve this is to let WPF proceed with the binding and do a rollback when the cancel button is clicked. We store the original value using MemberwiseClone() in the constructor and the Update() method of the ViewModel (although you can write your own deep copy methods if you have reference type fields):


Then the CancelCommand in the ViewModel will just call Undo() and rollback to the original value and the entire UI will be updated:


The same method is applied to the Edit Order screen. Next we will see how to perform validation.

Validation



Future series of articles on sharepoint:
    sharepoint list -- the concepts of sharepoint list and how to effectively manage it
    sharepoint version control -- the internals of sharepoint version control and how to administer and manage the versions
    sharepoint permissions -- how to manage the permissions in a large enterprise sharepoint environment
    sharepoint server farm -- how to set up a high availability sharepoint server farm
    sharepoint document library -- the details on how to get your ways around the document library in sharepoint
    sharepoint configuration -- the configurations needed for different sharepoint network scenarios
    sharepoint css -- making the most out of customizing sharepoint frontend
    sharepoint web services -- some of the most convienent ways to communicate with the internals of sharepoint