Sunday, December 19, 2010

All you want to know to MVVM with MVVMLight

This is my attempt at helping people finding gaps in their knowledge regarding MVVM. This does not explain the items presented in bold. The objective is that if you are unclear about what I mean you will google the terms in bold and be on your way. Happy reading!

WHY (or All you ever wanted to know about MVVM)? 
Here are the Four (yes 3+1 ... bear with me) key elements in a MVVM Application :
  1. XAML which contains the binding (Often losely called View)
  2. Code behind for your xaml file (Often losely called View)
  3. View Model
  4. Model
What XAML Knows
  • Now the objective is that XAML knows nothing about your VM other than the fact that it as its datacontext. (I prefer setting it using ViewModelLocator ... it comes for free with MVVM Light. If you use the Project templates that come with MVVMLight it will add it for you). 
  • It knows nothing of the code behind. If it does... you need to make a UserControl to abstract that away. 
  • Elements that have Command property raise commands. Elements that don't should use EventToCommand that comes with MVVMLight. These commands are RelayCommands by the way. 
  • Ofcourse important properties are bound to the viewmodel and use IValueConverters when required

What code behind knows
Almost nothing. 
  • If you feel that your code behind must contain some code then there is probably a component that you are using that is not MVVM Friendly (Contains normal .net properties that you cannot bind to and get change notifications). I suggest you wrap it up in a UserControl and abstract it away into a nice bindable component. 
  • Messages. Also called the Mediator, the Messenger is useful for some events that need to start some GUI function. E.g dialog box. A dialog box should never be placed in VM because that will prevent testing functionality of the VM without resorting to GUI Tests.
What ViewModel Knows
Nothing of the View or the View Code behind or other ViewModels. Its has these means of communication with other items:
  • Bindable properties. Generally the view model will inherit from INotifyPropertyChanged and implement properties that raise the PropertyChanged event. It is preferred that you use the ViewModelBase from MVVMLight.
  • RelayCommands. A part of MVVMLight. Your XAML View raises them using Command property or EventToCommand behaviour.
  • Messages. Again some actions require GUI interaction. The VM is resposible for initiating the message for it but the View code behind is responsible for showing the stuff :) 
What the Model Knows
Your domain object. Only interaction with ViewModel. 
  • You should extend ViewModelBase (or implement INotifyPropertyChanged) for this. This will help you store instances of your model as an ObservableCollection in your ViewModel. 
  • Either there will be some ViewModel that will
    • inherit from your model or 
    • contain it as an ObservableCollection or 
    • Contain an instance as a Bindable Property. 

Finally
Now that wasn't so hard was it. Also if you know all there is to know about Binding, StaticResource, ItemTemplate you should be all set :) 

Enjoy!