Getting started with MVVM in WPF

Hell lot of time passed since i updated my blog with a new post.  This time while working with WPF, i feel like write something on what is called MVVM Design pattern.

MVVM has got three components:

  • Model: Data+Classes; Nothing WPF sepcific.
  • View: This is the User Interface element visible to the user. Its DataContext is its ViewModel.
  • ViewModel: It contains all the data that needs to be displayed and procedures to modify the model at will. ViewModel knows nothing about the View.

This is very loosely coupled design pattern. The View knows the ViewModel but the ViewModel does not know the View. You can very easily replace the View without affecting the ViewModel. This is very useful in Developer/Designer teams where the Developer improves the ViewModel and the Designer enhances the View.

The fact that the ViewModel does not know anything about the View comes as a bit of surprise. A typical View in MVVM does not need have a code-behind (except for the general code that calls the InitializeComponent() method from the constructor)!!

You may be wondering how the view updates itself when the ViewModel changes and how it handles user interaction like button clicks etc. This is what makes MVVM specific to WPF.

The controls in the View bind themselves to the corresponding properties in the ViewModel. The changes in ViewModel will be reflected in the view, thanks to Data Binding in WPF. (Otherwise we would have had to handle every event and then update the view accordingly.)

As for user interaction, we always have had commands in WPF. MVVM leverages on this feature. Instead of writing event handling code for button clicks, we bind the buttons (or MenuItems) to Commands in the ViewModel. Every button binds itself to a command which the ViewModel exposes. This command delegates its job to a method in the ViewModel that gets the work done. But the problem is that there is no built-in command in WPF that does that. We have a RoutedCommand that targets UIElements but not methods. Here comes to the scene a new command that targets methods, the DelegateCommand or the RelayCommand. Controls can bind the RelayCommand (that the ViewModel exposes) and invoke methods in the ViewModel.

The DelegateCommand implements the ICommand interface and delegates the Execute and CanExecute methods in the interface to methods in the ViewModel.

That’s all with the theory and understanding i have. The sample code snippets i will update soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s