Learn Simple MVVM and Command Bindings in 15 Mins

Introduction

 
As we know the most powerful of WPF's framework (Silverlight as well) can be built with the most optimal architectural pattern, MVVM. MVVM is a collaboration of Model, View, and View Model. And MVVM is especially introduced to simplify the event-driven programming of user interfaces. MVVM and the Presentation Model are both derived from the Model View Controller.
 

MVVM pattern component

 
Model: It's a domain model that represents the real-time entity or an object as a data access layer.
 
View: It's a user interface, probably a front-end design.
 
View Model: It's simply a data representation of a Model using public properties and commands.
 
Binder: It's a data and command binding between a View and a View Model for a Model.
 
Structure of MVVM
 
 
Model
 
Here I have used a person as a model that contains the name and age of the person.
 
C#
  1. namespace MVVM   
  2. {  
  3.     public class Person   
  4.     {  
  5.         public string Name   
  6.         {  
  7.             get;  
  8.             set;  
  9.         }  
  10.   
  11.         public int Age   
  12.         {  
  13.             get;  
  14.             set;  
  15.         }  
  16.     }  
  17. }  
View
 
It is a user interface design. Here I used it to list the people in a ListView.
 
XAML
  1. <Window x:Class="MVVM.MainWindow"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     xmlns:local="clr-namespace:MVVM"   
  5. Title="MainWindow" Height="350" Width="525">  
  6.     <Grid>  
  7.         <ListView x:Name="ListViewPerson" ItemsSource="{Binding}">  
  8.             <ListView.ItemTemplate>  
  9.                 <DataTemplate>  
  10.                     <StackPanel Orientation="Horizontal">  
  11.                         <TextBlock Text="{Binding Name}"></TextBlock>  
  12.                         <TextBlock Margin="10,0,0,0" Text="{Binding Age}"></TextBlock>  
  13.                     </StackPanel>  
  14.                 </DataTemplate>  
  15.             </ListView.ItemTemplate>  
  16.         </ListView>  
  17.     </Grid>  
  18. </Window>  
View Model
 
A View Model consists of a collection of data-bound with the UI, in other words, the View.
 
C#
  1. namespace MVVM {  
  2.     public class ViewModel {  
  3.         public ObservableCollection < Person > People;  
  4.   
  5.         public ViewModel() {  
  6.             People = new ObservableCollection < Person > ();  
  7.             Person person = new Person() {  
  8.                 Name = "Thiruveesan", Age = 20  
  9.             };  
  10.             People.Add(person);  
  11.             person = new Person() {  
  12.                 Name = "Marutheesan", Age = 21  
  13.             };  
  14.             People.Add(person);  
  15.             person = new Person() {  
  16.                 Name = "Sharveshan", Age = 22  
  17.             };  
  18.             People.Add(person);  
  19.             person = new Person() {  
  20.                 Name = "Kailash", Age = 23  
  21.             };  
  22.             People.Add(person);  
  23.   
  24.         }  
  25.     }  
  26. }  
Add Data Context
 
C#
  1. ViewModel vm = new ViewModel();   
  2. MainWindow mw = new MainWindow();   
  3. mw.DataContext = vm;  
Binder
 
Here we are using command binding to perform an operation when the button is clicked.
 
C#
  1. namespace MVVM {  
  2.     public class ViewModel {  
  3.         public ObservableCollection < Person > People;  
  4.   
  5.         public ViewModel() {  
  6.             People = new ObservableCollection < Person > ();  
  7.             Person person = new Person() {  
  8.                 Name = "Thiruveesan", Age = 20  
  9.             };  
  10.             People.Add(person);  
  11.             person = new Person() {  
  12.                 Name = "Marutheesan", Age = 21  
  13.             };  
  14.             People.Add(person);  
  15.             person = new Person() {  
  16.                 Name = "Sharveshan", Age = 22  
  17.             };  
  18.             People.Add(person);  
  19.             person = new Person() {  
  20.                 Name = "Kailash", Age = 23  
  21.             };  
  22.             People.Add(person);  
  23.   
  24.         }  
  25.   
  26.         private ICommand _clickCommand;  
  27.         public ICommand ClickCommand {  
  28.             get {  
  29.                 return _clickCommand ? ? (_clickCommand = new CommandHandler(() = > MyAction(), true));  
  30.             }  
  31.         }  
  32.   
  33.         public void MyAction() {  
  34.             Person person = new Person() {  
  35.                 Name = "Magesh", Age = 24  
  36.             };  
  37.             People.Add(person);  
  38.         }  
  39.     }  
  40.   
  41.     public class CommandHandler: ICommand {  
  42.         private Action _action;  
  43.         private bool _canExecute;  
  44.         public CommandHandler(Action action, bool canExecute) {  
  45.             _action = action;  
  46.             _canExecute = canExecute;  
  47.         }  
  48.   
  49.         public bool CanExecute(object parameter) {  
  50.             return _canExecute;  
  51.         }  
  52.   
  53.         public event EventHandler CanExecuteChanged;  
  54.   
  55.         public void Execute(object parameter) {  
  56.             _action();  
  57.         }  
  58.     }  
  59. }  
XAML
  1. <Button Height="50" VerticalAlignment="Bottom" Command="{Binding ClickCommand}"></Button>