Example for MVVM in WPF

Introduction

In this article, I am implementing WPF solution in MVVM approach for small requirement mentioned below:

Requirement

We need to display the Employee details based on the Employee id value entered by the user using MV-VM approach.

Solution

Let's create the sample WPF projects with the following items/files.

• View: MainWindow.Xaml
• MainWindow.Xaml.CS -->In MV-VM approach, codebehind plays very minor role.
• View Model: SearchEmpVM.CS.
• Model:Employee Class: EmpCls.cs – Created class file to hold the searched employee details.

I will walk you through the Code of each entity in the order I have created.

Model(EmpCls.cs)

Model Class should contain the Business logic , for understaning purpose iam making the model very simple :-) This class will contain the structure of Employee entity. Here's the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SampleWPFMVVM.Entity
{
    class EmpCls
    {

        private int _empNo;
        public int EmpNo
        {
            get { return _empNo; }
            set
            {
                _empNo = value;

            }
        }


        private string _name;
        public string Name
        {
            get { return _name; }
            set {

                _name = value;
               
            }
        }

        private string _designation;
        public string Designation
        {
            get { return _designation; }
            set
            {

                _designation = value;

            }
        }
        private string _department;
        public string Department
        {
            get { return _department; }
            set
            {

                _department = value;

            }
        }



    }
}

//

View (MainWindow.Xaml)

Write the Xaml code as below:

    <window height="350" mc:ignorable="d" title="MainWindow" width="333" x:class="SampleWPFMVVM.MainWindow" x:name="Window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:SampleWPFMVVM.ViewModel" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <window.datacontext>
    <vm:searchempvm>
    </vm:searchempvm></window.datacontext>
    <grid>
        <grid.rowdefinitions>
            <rowdefinition height="auto"></rowdefinition>
            <rowdefinition height="auto"></rowdefinition>
            <rowdefinition height="auto"></rowdefinition>
            <rowdefinition height="auto"></rowdefinition>
        </grid.rowdefinitions>


        <stackpanel>
            <grid grid.rowspan="4" margin="0,51,0,-48">
                <grid.rowdefinitions>
                    <rowdefinition height="auto"></rowdefinition>
                    <rowdefinition height="auto"></rowdefinition>
                </grid.rowdefinitions>
                <grid.columndefinitions>
                    <columndefinition width="auto">
                    <columndefinition width="auto">
                </columndefinition></columndefinition></grid.columndefinitions>
                <label content="EmpId:" grid.column="0" grid.row="0">
                <textbox grid.column="1" grid.row="0" text="{Binding  ElementName=Window,Path=DataContext.EmpId,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:name="txtEmpId1"></textbox>
                <stackpanel datacontext="{Binding SearchCls}" grid.column="1" grid.row="1">
                    <groupbox>
                        <groupbox.headertemplate>
                            <datatemplate>
                                <label content="Employee Information">

                            </label></datatemplate>
                        </groupbox.headertemplate>
                        <grid>
                            <grid.rowdefinitions>
                                <rowdefinition height="26*">
                                <rowdefinition height="26*">
                                <rowdefinition height="26*">
                                <rowdefinition height="26*">
                                <rowdefinition height="26*">
                            </rowdefinition></rowdefinition></rowdefinition></rowdefinition></rowdefinition></grid.rowdefinitions>
                            <grid.columndefinitions>
                                <columndefinition width="Auto">
                                <columndefinition width="Auto">
                                <columndefinition width="Auto">
                                <columndefinition width="Auto">
                                <columndefinition width="Auto">
                            </columndefinition></columndefinition></columndefinition></columndefinition></columndefinition></grid.columndefinitions>
                            <label content="Name:" grid.column="0" grid.columnspan="3" grid.row="0">
                            <textbox grid.column="3" grid.row="0" text="{Binding Name}" width="174">
                            <label content="Designation:" grid.column="0" grid.columnspan="3" grid.row="1">
                            <textbox grid.column="3" grid.row="1" text="{Binding Designation}" width="174">

                            <label content="Department:" grid.column="0" grid.columnspan="3" grid.row="2">
                            <textbox grid.column="3" grid.row="2" text="{Binding Department}" width="174">
                         
                        </textbox></label></textbox></label></textbox></label></grid>
                    </groupbox>
                </stackpanel>
            </label></grid>
        </stackpanel>
    </grid>
</window>

Let me explain the important code lines highlighted in italic below,

A. Below code will import the namespace of our ViewModel "SearchEmpVM.CS"

xmlns:vm="clr-namespace:SampleWPFMVVM.ViewModel"

B. The following lines will bind the viewModel class as datacontext to the form:

    <window.datacontext>  
   <vm:searchempvm>  
</vm:searchempvm></window.datacontext>

C. The following code will bind the property "EmpId" of the viewModel class and fires the logic in the set procedure/block of the property of "EmpId" property

    <textbox grid.column="1" grid.row="0" text="   {Binding  ElementName=Window,Path=DataContext.EmpId,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:name="txtEmpId1">  
</textbox>

D. The following code will bind the property "SearchCls" . This property will hold the object of the searched employees i.e "EmpCls" class

    <stackpanel datacontext="{Binding SearchCls}" grid.column="1" grid.row="1"> 
</stackpanel>

E. The following code will bind the property "Name" of the class "searchCls" (internal property of "EmpCls"), so whenever the Value is assigned to "Name" property the value will be displayed in the text box. Similarly we will bind the properties of the "EmpCls" to all the controls to display the selected employee values

    <textbox grid.column="3" grid.row="0" text="{Binding Name}" width="174">
</textbox>

ViewModel (SearchEmpVM.CS)

This will contain the business logic:

using System;      
using System.Collections.Generic;      
using System.ComponentModel;      
using System.Linq;      
using System.Text;      
using System.Threading.Tasks;      
using SampleWPFMVVM.Entity; //namespace of Employee class         
      
namespace SampleWPFMVVM.ViewModel      
{      
    class SearchEmpVM : INotifyPropertyChanged      
    {      
        List<empcls> EmpList = new List<empcls>();      
      
      public SearchEmpVM()      
        {      
             // Add sample employee details into employee list    
            EmpList.Clear();       
            EmpList.Add(new EmpCls { EmpNo = 1, Name = "John", Department = "IT", Designation = "Developer" });      
            EmpList.Add(new EmpCls { EmpNo = 2, Name = "Mark", Department = "IT", Designation = "Tester" });      
            EmpList.Add(new EmpCls { EmpNo = 3, Name = "Robert", Department = "IT", Designation = "DB Developer" });      
        
        }      
   
   
        #region properties      
      
        private EmpCls _searchcls = new EmpCls();      
        public EmpCls SearchCls      
        {      
            get { return _searchcls; }      
      
            set      
            {      
                _searchcls = value;      
      
             RaisePropertyChanged("SearchCls");      
      
            }      
        }      
      
        private int _empid;      
        public int EmpId      
        {      
            get {      
                return _empid;      
                  
            }      
      
            set {      
                _empid = value;      
      
                RaisePropertyChanged("EmpId");      
               PopulteEmpDetails(_empid);      
            }      
      
              
        }      
   
   
        #endregion      
      
        private void PopulteEmpDetails(int _empid)      
        {      
                  
                SearchCls= EmpList.Where(x => x.EmpNo == _empid).Single();      
                    
        }      
   
   
        #region INotifyPropertyChanged      
      
        public event PropertyChangedEventHandler PropertyChanged;     
        public void RaisePropertyChanged(string propertyName)      
        {      
            if (PropertyChanged != null)      
            {      
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));      
            }      
        }      
      #endregion      
          
    }      
}

Let us understand the code Underlined above.

A . Our viewModel should implement interface to notify the client on binded property has changed. For more details

Refer the following link INotifyPropertyChanged.

B. Implement the method "RaisePropertyChanged" of interface "INotifyPropertyChanged" as highlighted in the above code

C. Call the method "RaisePropertyChanged" in the set procedures of all the properties which are binded to the controls.

For example:

Call as mentioned below

RaisePropertyChanged("EmpId"); //Pass the Property name as parameter

D. In the set property procedure of "EmpId", Pass the "_empid" to userdefined method "PopulteEmpDetails". Since we have bind this property to the text box "EmpId" in the xaml file , whenever the user enter the value in the textbox the logic in the set procedure of "EmpId" property will be exited. Hence the Textbox value will be passed to our method "PopulteEmpDetails" as in the following code.

    private int _empid;    
public int EmpId    
{    
    get {    
        return _empid;    
        
    }    
  
    set {    
        _empid = value;    
  
        RaisePropertyChanged("EmpId");    
        PopulteEmpDetails(_empid);    
    }    
  
    
}   
E. The method "PopulteEmpDetails" will search the employee details from the list and set the List item to the property "SearchCls" as in the following code:
private void PopulteEmpDetails(int _empid)    
{    
        
        SearchCls= EmpList.Where(x => x.EmpNo == _empid).Single();    
          
}

In the Set procedure of the "SearchCls" property , we are assigning the value to the object "_searchcls" (which is the object EmpCls Class) i.e we are storing the searched employee details in the object of the "EmpCls" class.

Since we are binding the properties of the "SearchCls" property (i.e properties of the Class "EmpCls") to the textboxes, whenever the value is set to property ""SearchCls" then the properties of the "EmpCls" will be filled and then the textboxes will be filled with the same values as in the following image.

Output

Check the above image.

Hence, we implemented the required functionality as shown in the preceding image. Hope this article gives you the understanding on the basic implementation technique