Design patterns MVC, MVVM, MVP Model View ViewModel (MVVM)

Example

1. What is MVVM?

The Model View ViewModel (MVVM) pattern is a design pattern most commonly used for creating user interfaces. It is derived from the the popular "Model View Controller" (MVC) pattern. The major advantage of MVVM is that it separates:

• The internal representation of the application state (the Model).
• How the information is presented to the user (the View).
• The "value converter logic" responsible for exposing and converting the data from the model so that the data can be easily managed and presented in the view (the ViewModel).

2. Use cases of MVVM

The primary use case of MVVM is Graphical User Interface (GUI) programming. It is used to simply event-driven programming of user interfaces by separating the view layer from the backend logic managing the data.

In Windows Presentation Foundation (WPF), for example, the view is designed using the framework markup language XAML. The XAML files are bound to ViewModels using data binding. This way the view is only responsible for presentation and the viewmodel is only responsible for managing application state by working on the data in the model.

It is also used in the JavaScript library KnockoutJS.

3. Implementation

Consider the following implementation of MVVM using C# .Net and WPF. We have a Model class called Animals, a View class implemented in Xaml and a ViewModel called AnimalViewModel. The example below is a modified version of the tutorial on MVC from Design Patterns - MVC Pattern.

Look how the Model does not know about anything, the ViewModel only knows about the Model and the View only knows about the ViewModel.

The OnNotifyPropertyChanged-event enables updating both the model and the view so that when you enter something in the textbox in the view the model is updated. And if something updates the model, the view is updated.

/*Model class*/
public class Animal 
{
    public string Name { get; set; }

    public string Gender { get; set; }
}

/*ViewModel class*/
public class AnimalViewModel : INotifyPropertyChanged
{
    private Animal _model;

    public AnimalViewModel()
    {
        _model = new Animal {Name = "Cat", Gender = "Male"};
    }

    public string AnimalName
    {
        get { return _model.Name; }
        set
        {
            _model.Name = value;
            OnPropertyChanged("AnimalName");
        }
    }

    public string AnimalGender
    {
        get { return _model.Gender; }
        set
        {
            _model.Gender = value;
            OnPropertyChanged("AnimalGender");
        }
    }

    //Event binds view to ViewModel.
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            var e = new PropertyChangedEventArgs(propertyName);
            this.PropertyChanged(this, e);
        }
    }
}


<!-- Xaml View -->
<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:viewModel="clr-namespace:WpfApplication6">
    
    <Window.DataContext>
        <viewModel:AnimalViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <TextBox Text="{Binding AnimalName}" Width="120" />
        <TextBox Text="{Binding AnimalGender}" Width="120" />
    </StackPanel>
</Window>

4. Sources used:

Model–view–viewmodel

A Simple MVVM Example

The World's Simplest C# WPF MVVM Example

The MVVM Pattern