MVVM- An Introduction

What is MVVM?

MVVM is a UI design pattern.

 The main use of this pattern to remove make least View (the UI) less dependent on ViewModel (Business logic) and Model (data)

The view calls View model with actions and data. The View Model class sends data to model class.

So, view model acts as a bridge between Model and View.

Changes in Model is notified to view using the INotifyPropertyChange interface.

Advantages of using MVVM

• Keeps code clean by separation of concerns.The view , looks after UI , ViewModel takes care of business logic and Model contains data.
• Its easy to Design, Develop, Test and Maintain
• The change is code has to do anything with UI , making it very easy to use in a collaborated development environment. 
• Since all business logic is independent of UI , so re-usability of code increases.
• Increases the "Blendability" of your views (ability to use Expression Blend to design views). This enables a separation of responsibilities on teams that are lucky enough to have a designer and a programmer... each can work independent of the other.
• "Lookless" view logic. Views are agnostic from the code that runs behind them, enabling the same view logic to be reused across multiple views or have a view easily retooled or replaced. Seperates concerns between "behavior" and "style".
• No duplicated code to update views. In code-behind you will see a lot of calls to "myLabel.Text = newValue" sprinkled everywhere. With MVVM you can be assured the view is updated appropriately just by setting the underlying property and all view side-effects thereof.
• Testability. Since your logic is completely agnostic of your view (no "myLabel.Text" references), unit testing is made easy. You can test the behavior of a ViewModel without involving its view. This also enabled test-driven development of view behavior, which is almost impossible using code-behind.

MVVM architecture

Following shows how data moves in MVVM from a higher level

This figure shows a granular detail of how view interacts with view model.

Frequently used words in MVVM

• Data Binding :  Data binding is a mechanism to ensure that any change made to the data in a UI components is automatically carried over to the target ViewModel based on a predefined binding relationship. (and vice versa). Application developers only have to define the data binding relationship between UI component's attribute and the target object, it's usually a ViewModel, by data binding annotation expression.Typically, this means that they must implement the correct interfaces.

• Data Templates : Data Templates describe the visual structure of a data object.Data Template is used  to specify the visualization of your data objects.DataTemplate objects are particularly useful when you are binding an ItemsControl such as a ListBox to an entire collection. Data Templates gives you a very flexible and powerful solution to replace the visual appearance of a data item in a control like ListBox, ComboBox or ListView. If you don't specify a data template, WPF takes the default template that is just a TextBlock. If you bind complex objects to the control, it just calls ToString() on it. Within a DataTemplate, the DataContext is set the data object. So you can easily bind against the data context to display various members of your data object.

• Commands : In WPF and Silverlight, actions or operations that the user can perform through the UI are typically defined as commands.Commands provide a convenient way to represent actions or operations that can be easily bound to controls in the UI. They encapsulate the actual code that implements the action or operation and help to keep it decoupled from its actual visual representation in the view.Commands can be visually represented and invoked in many different ways by the user as they interact with the view. In most cases, they are invoked as a result of a mouse click, but they can also be invoked as a result of shortcut key presses, touch gestures, or any other input events. Controls in the view are data bound to the view model's commands so that the user can invoke them using whatever input event or gesture the control defines. Interaction between the UI controls in the view and the command can be two-way. In this case, the command can be invoked as the user interacts with the UI, and the UI can be automatically enabled or disabled as the underlying command becomes enabled or disabled.

• Notifications :Notification is an interface that is used to ensure that the UI is kept up to date when the data changes in the view model, it should implement the appropriate change notification interface.If the view defines properties that can be data bound, it should implement the INotifyPropertyChanged interface. Implementing the INotifyPropertyChanged interface allows views to react to changes originated in models and view models. These changes are not limited to domain data shown in controls; they are also used to control the view, such as view model states that cause animations to be started or controls to be disabled.

 The view model queries, observes, and coordinates updates to the model, converting, validating, and aggregating data as necessary for display in the view.

We will see the various details of data binding, commanding etc in upcoming blogs.