Implementation using ‘MVVM Light” toolkit

In this third article, I describe how I implement the Conventions describe earlier using the MVVP pattern and a toolkit called ‘MVVM Light’. I show code snippets and Blend screenshots to demostrate it.

Make sure you include the VisualStudio and ExpressionBlend installations. Instructions

Project Templates
‘MVVM Light’ provides:
-    Visual Studio and Expression Blend project templates to start your projects.

ViewModel Class
‘MVVM Light’ provides:
-    ViewModelBase.cs   is a base class for all your ViewModels that provides common functionality.
-    ViewModelLocator.cs is the lifecycle management class for all ModelViews. You must register you ModelView within the locator.
-    Visual Studio code snippet ‘mvvmlocatorproperty’ to generate the code needed to register a new ViewModel

Bindable Properties
‘MVVM Light’ provides:
-    Visual Studio code snippet ‘mvvmincp’ to generate bindable attributes

As noted before, a Property is bindable if it implements the INotifyPropertyChanged event. MVVM Light provides an implementation of that event in the base class that is executed with the RaisePropertyChanged method.

Now bind this Property to the TextBox.Text property in Blend:

Commands
‘MVVM Light’ provides:
-    Class RelayCommand that is a bindable Property for  UI events
-    EventToCommand behavior for Expression Blend
 

In the following example, I define the LoginCommand and a LogoffCommand as a RelayCommands. Logoff is a basic one and Login takes an argument of type string; namely the password text. Again, this is just for demonstration purposes of the RelayCommand, you might want to implement it differently.
In the InitCommands() section, I instantiate a new LoginCommand and define two actions:
1.    The Execute() method as my local Authorize() action
2.    The CanExecute() method as my local IsAuthenticated() action

The LogoffCommand, on the other hand, has only an unconditional Execute action defined.

Execute(), in this case Authorize(), gets only executed if the CanExecute() action (IsAuthenticated()) returns true.


 

In Blend:

1. Select LoginButton
2. Add EventToCommand from Assets->Behaviours
3. Bind the Click Event to the LoginCoammand
4. In this case I added the Password component as a CommandParameter

Notifications
‘MVVM Light’ provides:
-    An integrated messenger classes that implement a publish/subscribe pattern

In this example, we publish events in the ViewModel:

 and implement the subscriber part in the code behind of the View. The reasons are:
1.    ViewModel must not know about what Views are subscribing to the Notification events
2.    The code behind is View specific and has access to all UI Components.
 

This should have given an idea of how to use Blend and MVVM Light toolkit. In teh next article, I have provided a small demo applictaion to download.