MVVM (Model-View-ViewModel) is a software architecture design pattern that will allow you to utilize the Model-View-ViewModel design pattern in the WPF application. The MVVM is a design pattern that will divide your application into three layers (Model, View, ViewModel).

Here we depict significant features of MVVM Framework.

For developing a simple application, MVVM can provide some components.

Building Block of MVVM Architecture

ICommand: ICommand is used to control the behavior such as enable, disable of control behavior on execution. ICommand interface can also provide the code contract for the commanding behavior of Runtime XAML.

INotifyPropertyChanged: This interface can define when the value of a property change. It can be raised PropertyChanged event when the value changes.

Binding to Property: Below components are used for data binding as it helps to present data in the view. Their four-component for data binding.

We can set data flow in four ways.

Let’s see a simple example of MVVM Framework. Here we can add the Student details.

Step: 1

First create a WPF application, after successful creation of the application create a three folder in the root application and the name should be View, Model, and ViewModel.

Step: 2

Add a new class in the Model folder. For add new class, Right-click of the Model folder -> Add -> Class -> Add class name and press OK.

After adding a class create their properties, here the Student is our class name let’s see below code.

In this example we can add Student details like FirstName and LastName for this here we can add two properties FirstName and LastName.

using System.ComponentModel.DataAnnotations;

namespace WPFMVVMFramework.Model
{
    public class StudentData
    {
        [Key]
        public int StudentNumber{ get; set; }
        public string StudentFirstOrLastName{ get; set; }
        public string StudentCast{ get; set; }
    }
}

Step: 3

After that create one more class for DbContext. DbContext is used to write and execute the queries, bind objects in memory to UI controls

using System.Data.Entity;

namespace WPFMVVMFramework.Model
{
    public class Contextdb : DbContext
    {
        public Contextdb() : base("Conn")
        {

        }
        public DbSet Studentinformation { get; set; }
    }
}

Step: 4

Now, create a ViewModel, right-click on the ViewModel folder and add a new class.

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
using WPFMVVMFramework.Model;

namespace WPFMVVMFramework.ViewModel
{
    public class AddDataViewModel : ViewModelBase
    {
        public AddDataViewModel()
        {
            DataList = new ObservableCollection(contextdb.Studentinformation);
        }

        private StudentData _studentObj = new StudentData();

        public StudentData StudentObj
        {
            get 
            { 
                return _studentObj; 
            }
            set 
            { 
                _studentObj = value; 
                RaisePropertyChanged(); 
            }
        }

        public ICommand Userlist => new RelayCommand(adddata1);
        public Contextdb contextdb = new Contextdb();
        public ObservableCollection _dataList;
        public ObservableCollection DataList
        {
            get 
            { 
                return _dataList; 
            }
            set 
            { 
                _dataList = value; 
                RaisePropertyChanged(); 
            }
        }
        private void adddata1()
        {
            contextdb.Studentinformation.Add(_studentObj);
            contextdb.SaveChanges();
            MessageBox.Show("Insert Successfully.....");
            DataList = new ObservableCollection(contextdb.Studentinformation);


        }
    }
}

Here, is the code to add student data. In this ViewModel, we can add ObservableCollection for a list of student data, add their properties, and add MessageBox for showing the success message.

Step: 5

Now, we create a design for adding Student data.

Here, we can bind the View with the ViewModel. In this view, we can use the grid for adding data and DataGrid for showing data.

Looking to hire WPF developers? Our seasoned experts are ready to support you. Reach out to us with your requirements.

Output: