MVVM for Beginners

MVVM for beginners

MVVM is a design pattern to build WPF applications. It stands for Model, View and View Model. Don't be scared with the names model, view model and view. They all are just class files with specific names.

Note: This article is intended for beginners. For advanced users, I would suggest to follow the article of Josh Smith on MVVM .  

Model: It is a set of classes representing the data coming from the services or the database. Suppose you have a Person table in the database with columns like FirstName, LastName, Age, Citizenship etc, then your model would essentially be a class with those properties.

public class Person     {         public string FName { get; set; }         public string LName { get; set; }                public int Age { get; set; }             public string CitizenShip { get; set; } }

You have now successfully created a Model.

View: View is the code corresponding to the visual representation of the data the way it is seen and interacted by the user.

You can define your View to display the data read from the database, or to accept the data from the user to store it in the database. Therefore it is essentially a Window or a UserControl.

<Window x:Class="BegginersMVVM.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="250" Width="300" >     <Window.Resources>         <Style TargetType="{x:Type TextBlock}">             <Setter Property="HorizontalAlignment" Value="Right"/>             <Setter Property="VerticalAlignment" Value="Center"/>             <Setter Property="Margin" Value="5"/>         </Style>         <Style TargetType="{x:Type TextBox}">             <Setter Property="HorizontalAlignment" Value="Stretch"/>             <Setter Property="VerticalAlignment" Value="Center"/>             <Setter Property="Margin" Value="5"/>         </Style>           </Window.Resources>     <Grid>         <Grid.ColumnDefinitions>             <ColumnDefinition Width="Auto" />             <ColumnDefinition Width="*" />             <ColumnDefinition Width="*" />         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />                     </Grid.RowDefinitions>         <TextBlock Text="First Name:" Grid.Row="0" Grid.Column="0"/>         <TextBlock Text="Last Name:" Grid.Row="1" Grid.Column="0"/>         <TextBlock Text="Age:" Grid.Row="2" Grid.Column="0"/>         <TextBlock Text="Citizenship:" Grid.Row="3" Grid.Column="0"/>         <TextBox Text="" Grid.Row="0" Grid.Column="1" />         <TextBox Text="" Grid.Row="1" Grid.Column="1"/>         <TextBox Text="" Grid.Row="2" Grid.Column="1"/>         <TextBox Text="" Grid.Row="3" Grid.Column="1"/>         <Button Content="Add" Grid.Row="4" Grid.Column="0" Width="60" Height="30" Grid.ColumnSpan="2" />                  <ListBox Grid.Column="2" Grid.RowSpan="4" Margin="5" Background="LightCyan"                  />                            <Button Content="Remove" Grid.Row="4" Grid.Column="2" Width="60" Height="30"                 />              </Grid> </Window>

Our View has textboxes to accept the data from the user, a Add button to insert the data in the database, a list to display the data added, a Remove button to remove specified person from the list.

ViewModel: View Model serves as the glue between the View and the Model. It wraps the data from the model and makes it friendly for being displayed.

So our View Model contains the logic to display, add and remove persons from the database.

public class PersonViewModel

    {

        //logic to display and save data.

    }

Key Concepts in MVVM

1. INotifyPropertyChanged

2. ICommand

3. IDataErrorInfo

4. Binding the properties of ViewModel to View

INotifyPropertyChanged:

The INotifyPropertyChanged interface contains an event called PropertyChanged. Whenever a property on a ViewModel is assigned new value, it has the ability to raise the PropertyChanged event to notify the WPF Binding system of the new value. The WPF binding system upon receiving the notification, updates the bound control with the new value.

public class PersonViewModel:INotifyPropertyChanged, IDataErrorInfo {       private Person _myPerson;       public Person MyPerson         {             get { return _myPerson; }             set { _myPerson = value; this.OnPropertyChanged("MyPerson"); }         }        #region INotifyPropertyChanged         public event PropertyChangedEventHandler PropertyChanged;         public void OnPropertyChanged(string propName)         {             var handler = this.PropertyChanged;             if (handler != null)             {                 handler(this, new PropertyChangedEventArgs(propName));             }         }          #endregion     }

Page1   Page2  Page3