Simple MVVM example in WPF

MVVM stands for Model,View and ViewModel.It is an architectural pattern used for structuring WPF applications.Here we will understand a simple MVVM example in WPF.

MVVM pattern

Developing large applications introduces complexity because of lots of modules in the application.Maintaining and unit testing large applications becomes difficult as new features are added and application is changed.If the different components are tightly coupled then it makes the applications rigid and less flexible.

MVVM is an architectural pattern to create maintainable and easily testable applications.It is more useful with WPF applications.MVVM pattern helps to manage the complexity in applications and makes applications easier to change and unit test.

• Model contains the business logic and data.
• View is responsible for displaying the model data to the user.View uses UI technologies such as CSS, jQuery, html etc.
• View Model connects view with model.ViewModel is responsible for transforming the model data for displaying in the view.Other then exposing model data the viewmodel contains methods and commands which gets executed as a result of some action performed on the view.View is connected with ViewModel using:

1. Bindings
2. Commands
3. Properties implementing INotifyPropertyChanged

MVVM helps develop flexible applications as Model does not know about ViewModel and ViewModel does not know about view

In the following example we will implement a basic WPF application using MVVM pattern.

Model

Add new class Employee.This class is model and implements INotifyPropertyChanged interface.In the property setter call the PropertyChangedEventHandler.This event handler notifies the UI about the change in property value.

namespace SimpleMVVM
{
public class Employee : INotifyPropertyChanged
{
private string _name;

public string Name
{
get { return _name; }
set
{
_name = value;
RaisePropertyChanged(Name.ToString());
}
}

private int _id;

public int Id
{
get { return _id; }
set
{
_id = value;
RaisePropertyChanged(Id.ToString());
}
}

protected void RaisePropertyChanged(string propertyName)
{
var handler = PropertyChanged;

if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}

//PropertyChanged is interface member
public event PropertyChangedEventHandler PropertyChanged;

}
}

ViewModel

ViewModel contains properties and commands.These Properties and commands are bound to the view.Add EmployeeViewModel in the ViewModel folder of the project.

namespace SimpleMVVM
{
class EmployeeViewModel
{
public IList<Employee> employees = new List<Employee> {
new Employee{Name="Amit",Id=1},
new Employee{Name="Rakesh",Id=2}
};
public IList<Employee> Employees
{
get { return employees; }
set { employees = value; }
}
}
}

View

In the view add combobox element and bind ViewModel Employees property using Bindings

<DataGrid ItemsSource="{Binding Employees}"/>

Finally set the DataContext in the codebehind:

protected override void OnStartup(StartupEventArgs e)
{
UserViewModel VM = new EmployeeViewModel();
this.DataContext = VM;
}

 

 

Follow on: