MVVM in WPF

As the software world continues to adopt WPF at an increasing rate, the WPF community has been developing its own ecosystem of patterns and practices. In this article, I'll review some of those best practices for designing and implementing client applications with WPF. By leveraging some core features of WPF in conjunction with the Model-View-ViewModel (MVVM) design pattern.

Why MVVM?

Once a developer becomes comfortable with WPF and MVVM, it can be difficult to differentiate the two. MVVM is well suited to the WPF platform, and WPF was designed to make it easy
to build applications using the MVVM pattern.

The most important aspect of WPF that makes MVVM a great pattern to use is - the data binding infrastructure, which allows the View (the presentation of to the user) to be separated from the data and the logic. The View can be designed in Expression Blend while the ViewModel can be developed in Visual Studio .NET. And the other features of WPF are data templates and the resource system.

MVVM Architecture:



Difference between MVP, MVC and MVVM:

Mostly it is very confusing to know the difference between MVP (Model-View-Presenter), MVC (Model-View-Controller) and MVVM (Model-View-View-Model). Here I am trying to clear all the 3 with the help of diagram:

MVP (Model-View-Presenter)

In the MVP pattern the User sends the input to the view, the view forward it to presenter and presenter than modify the view or the model depending on the type of user action. The view and the presenter are tightly coupled through bi-directional relationship. The model does not know about the presenter. The view itself is passive, thats why it's called presenter pattern, since the presenter pushes the data into the view.

Diagram:



MVC (Model-View-Controller:

In this pattern there is only one controller that gets all the inputs directly, it modifies the data in the model depending upon the type of the input. Both the model and the view are created by the controller. The view only knows about the model, but the model does not know about any other objects.

Diagram:



MVVM (Model-View-ViewModel):

The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft which is specialized in the Presentation Model design pattern. It is based on the Model-view-controller pattern (MVC), and is targeted at modern UI development platforms (WPF and Silverlight) in which there is a UX developer who has different requirements than a more "traditional" developer. MVVM is a way of creating client applications that leverages core features of the WPF platform, allows for simple unit testing of application functionality, and helps developers and designers work together with less technical difficulties.

VIEW: A View is defined in XAML and should not have any logic in the code-behind. It binds to the view-model by only using data binding. The View contains the visual controls that will be shown to the user and can also contain animations, navigation aspects, themes, and other interactive features for the purpose of the visual presentation. The View is data bound directly to the Model. Parts of the Model are simply displayed in the view by one-way data binding. Other parts of the model can be edited by directly binding controls two-way to the data. It acts as a bridge between your software and its users.

MODEL: Model is responsible for exposing data in a way that is easily consumable by WPF. It must implement INotifyPropertyChanged and/or INotifyCollectionChanged as appropriate. When data is expensive to fetch, it abstracts away the expensive operations, never blocking the UI thread. It is the data or business logic, completely UI independent, that stores the state and does the processing of the problem domain. The Model is written in code or is represented by pure data encoded in relational tables or XML.

VIEWMODEL: A ViewModel is a model for a view in the application or we can say as abstraction of the view. It exposes data relevant to the view and exposes the behaviors for the views, usually with Commands. The ViewModel is the glue between the View and the outside world. The ViewModel is what the View is bound to. It provides a specialization of the Model that the View can use for data-binding.

Here is a simple illustration how all the 3 relate to each other:

MVVM in WPF:

MVVM in WPF relies heavily on WPF's excellent binding capabilities to remove some of this plumbing code, leaving us to focus on the logical model of our view or the ViewModel, and our application. The goal of MVVM is to separate the design of the application from the data and the functionality, while supporting multiple development languages (e.g. C#/XAML) and taking full advantage of rich databinding.

Here is the Running window of our Application Using MVVM in WPF: