MVVM In WPF

MVVM is an architecture pattern which facilitates the separation of projects into three logical layers with their own responsibilities. It facilitates modern techiniques such as Separationof Concern, Unit testing, and TDD. It is set of guidelines, that, when used, makes it easier to develop applications.

It is said about MVVM “Use those guidelines when it make sense, and modify them to fit needs of your application at a given point in time."

So, in short, we can say maintenance, extensibility, enabling designer/develops workflow, and taking advantage of WCF/Silverlight databinding are some of the intents of MVVM.

Components of MVVM

MVVM has Model, View, and ViewModel which are explained below,

• View
  It is a user interface. It is responsible for defining the UI of what the user sees on screen. It is also responsible for taking input from an end user. It is purely defined with XAML and with limited code behind which does not contain business logic. It may or may not have reference to ViewModel. Bindings are activated when the view’s DataContext is set to a class that contains source to the bindings, it is that databinding infrastructure that's build into the WPF/Silverlight that allows designer to create rich and interactive UI. It is not responsible for retrieving data, business logic, business rule and data validation which will be represented to user.

• Model
  It is the application’s domain model which represents data along with business logic and validation. Its single responsibility is to represent data points. It does not have any reference to View or ViewModel.
  
  
• ViewModel
  It act as link between View and Model. It provided data from model too view, which can be used by View. It contains properties, commands and other abstractions to facilitate communication between View and Model.

Below is a diagrammatical presentation of the association of all three components

Advantage of MVVM

• Reduce Code –behind.
• Model does not need to change to support View.
• Designer design, coders code.
• Reduces development time.
• Unit Testing.

Disadvantage of MVVM

• Create more files.
• Simple Task can be complicated.
• Lack of Standardization.
• Specific to WPF /Silverlight Platform.

Now, you can implement MVVM pattern by below approaches in WPF,

• View-First Approach
  It is a very common method of handling View and ViewModel. In this approach View drives creation and discovery of ViewModel. It binds ViewModle as a resource , locator patter , Unit ,etc.

• ViewModel-First Approach
  It is also another approach of handling View and VIewModel. In this ViewModel is responsible for creating view and binding itself with View.

Now, let’s look into View-First Approach.

You can achieve View-First Approach by following the below ways,

• View First in XAML
• View First in Code-behind

The following example is in XAML,

<UserControl.DataContext>
    <viewmodel:EmplyeeViewModel/>
</UserControl.DataContext>

• Open Visual Studio.
  
  
• File >> New >> Projects >> Select WPF Project.
  
  
• Now, add Model folder in the Solution.
  
  
• Add Employee Class In Model folder
  
  

  public class Employee: INotifyPropertyChanged {
      private string firstName;
      private string lastName;
      public string FirstName {
          get {
              return firstName;
          }
          set {
              if (firstName != value) {
                  firstName = value;
                  RaisePropertyChanged("FirstName");
                  RaisePropertyChanged("FullName");
              }
          }
      }
      public string LastName {
          get {
              return lastName;
          }
          set {
              if (lastName != value) {
                  lastName = value;
                  RaisePropertyChanged("LastName");
                  RaisePropertyChanged("FullName");
              }
          }
      }
      public string FullName {
          get {
              return firstName + " " + lastName;
          }
      }
      public event PropertyChangedEventHandler PropertyChanged;
      private void RaisePropertyChanged(string property) {
          if (PropertyChanged != null) {
              PropertyChanged(this, new PropertyChangedEventArgs(property));
          }
      }
  }

• Now, add ViewModel folder in the Solution
  
  
• Add EomplyeeViewModel class in ViewModel folder.
  
  

  public class EmplyeeViewModel {
      public EmplyeeViewModel() {
          LoadEmployees();
      }
      ObservableCollection < Employee > Employees {
          get;
          set;
      }
      public void LoadEmployees() {
          ObservableCollection < Employee > employees = new ObservableCollection < Employee > ();
          employees.Add(new Employee {
              FirstName = "Mark", LastName = "Allain"
          });
          employees.Add(new Employee {
              FirstName = "Allen", LastName = "Brown"
          });
          employees.Add(new Employee {
              FirstName = "Linda", LastName = "Hamerski"
          });
          Employees = employees;
      }
  }

• Now, add View folder in Solution.
  
  
• Add EmployeeView Usercontrol in View and add the below code.
  
  

  <UserControl x:Class="ViewFirstApproach.View.EmployeeView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:ViewFirstApproach.View" xmlns:viewmodel="clr-namespace:ViewFirstApproach.ViewModel" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
      <UserControl.DataContext>
          <viewmodel:EmplyeeViewModel/> </UserControl.DataContext>
      <Grid>
          <Label>This is Demo</Label>
          <StackPanel HorizontalAlignment="Left">
              <ItemsControl ItemsSource="{Binding Path=Employees}">
                  <ItemsControl.ItemTemplate>
                      <DataTemplate>
                          <StackPanel Orientation="Horizontal">
                              <TextBox Text="{Binding Path=FirstName, Mode=TwoWay }" Width="100" Margin="0 5 3 5"></TextBox>
                              <TextBox Text="{Binding Path=LastName, Mode=TwoWay }" Width="100" Margin="0 5 3 5"></TextBox>
                              <TextBox Text="{Binding Path=FullName, Mode=OneWay }" Width="100"></TextBox>
                          </StackPanel>
                      </DataTemplate>
                  </ItemsControl.ItemTemplate>
              </ItemsControl>
          </StackPanel>
      </Grid>
  </UserControl>

• Now, in View First in Code-behind, you need to set data context in code behind file, as shown in below code.
  
  

  public partial class EmployeeView: UserControl {
      public EmployeeView() {
          InitializeComponent();
          // this.DataContext = new EmplyeeViewModel();
      }
  }