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 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 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#

namespace MVVM
{
    public class Person
    {
        public string Name
        {
            get;
            set;
        }

        public int Age
        {
            get;
            set;
        }
    }
}

View

It is a user inderface design. Here I used it to list the peole in a List View.

XAML

<Window x:Class="MVVM.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MVVM"
Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListView x:Name="ListViewPerson" ItemsSource="{Binding}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Margin="10,0,0,0" Text="{Binding Age}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

View Model

A View Model consists of a collection of data bound with the UI, in other words, the View.

C#

namespace MVVM {
    public class ViewModel {
        public ObservableCollection < Person > People;

        public ViewModel() {
            People = new ObservableCollection < Person > ();
            Person person = new Person() {
                Name = "Thiruveesan", Age = 20
            };
            People.Add(person);
            person = new Person() {
                Name = "Marutheesan", Age = 21
            };
            People.Add(person);
            person = new Person() {
                Name = "Sharveshan", Age = 22
            };
            People.Add(person);
            person = new Person() {
                Name = "Kailash", Age = 23
            };
            People.Add(person);

        }
    }
}

Add Data Context

C#

ViewModel vm = new ViewModel();
MainWindow mw = new MainWindow();
mw.DataContext = vm;

Binder

Here we are using command binding to perfrom an operation when the button is clicked.

C#

namespace MVVM {
    public class ViewModel {
        public ObservableCollection < Person > People;

        public ViewModel() {
            People = new ObservableCollection < Person > ();
            Person person = new Person() {
                Name = "Thiruveesan", Age = 20
            };
            People.Add(person);
            person = new Person() {
                Name = "Marutheesan", Age = 21
            };
            People.Add(person);
            person = new Person() {
                Name = "Sharveshan", Age = 22
            };
            People.Add(person);
            person = new Person() {
                Name = "Kailash", Age = 23
            };
            People.Add(person);

        }

        private ICommand _clickCommand;
        public ICommand ClickCommand {
            get {
                return _clickCommand ? ? (_clickCommand = new CommandHandler(() = > MyAction(), true));
            }
        }

        public void MyAction() {
            Person person = new Person() {
                Name = "Magesh", Age = 24
            };
            People.Add(person);
        }
    }

    public class CommandHandler: ICommand {
        private Action _action;
        private bool _canExecute;
        public CommandHandler(Action action, bool canExecute) {
            _action = action;
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter) {
            return _canExecute;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter) {
            _action();
        }
    }
}

XAML

<Button Height="50" VerticalAlignment="Bottom" Command="{Binding ClickCommand}"></Button>