Tutorial on MVVM with WPF

InfoPath alternatives for form designing SharePoint

Here in this article we will discuss about MVVM pattern in WPF and one example how to implement this pattern.

MVVM is nothing but Model view and viewModel.This is the best architecture for WPF.

VIEW:
A View is defined in XAML and should not have any logic in the code-behind. It binds to the view-model by only using data binding.

The View contains the visual controls that will be shown to the user.This is the UI.

Normally the View is only aware of the ViewModel but there might be cases in which it may make sense to expose the Model directly to it.

Model:
This is simply a class representing your data. It has no functionality but the ability to hold data. It is your data or classes that represent entities in your application.

ViewModel:
This object of the MVVM pattern represents the interface between your business logic and your user interface.
This is the way you connect your model to a specific View.

Advantages of MVVM pattern in WPF:
1- A clean separation between application logic and the UI will make an application easier to test, maintain.

It improves code re-use opportunities.developer-designer can able to work on the same time.
2- During the development process, developers and designers can work more independently and concurrently on their components.

The designers can concentrate on the view, and if they are using Expression Blend, they can easily generate sample data to work with, while the developers can work on the view model and model components.
3- It is easy to redesign the UI of the application without touching the code because the view is implemented entirely in XAML.

Example:
Now we will see one small implementation,where we are binding the values from the Model class through viewmodel to a ComboBox which is present in our view.

Open your VisualStudio,Go to File->New->Project->select Visual C#->Windows->Select “WPF Application” from the template window and Give the name as “EASYMVVM”->Then click on “OK”.

Then You will find some default file created that are Properties,References,App.Xaml and MainWindow.xaml.

Now just create 3 new folders like “View”,”ViewModel” and “Model”.

Then now Right click on the “Model” folder->Add NewItem->Choose Class->give the class name as Model.cs. So now inside Model we have a class named as “Model.cs”.

As per my example my content of the Model.cs class is like below.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;

namespace EasyMVVM.Model
{
public class Model
{
private ObservableCollection<string> objCollection = new ObservableCollection<string>();
public ObservableCollection<string> GetData()
{

//You can place here any query a database or any other buisness logic.
objCollection.Add(“Your Choice”);
objCollection.Add(“Raj”);
objCollection.Add(“Kishore”);
objCollection.Add(“Sahoo”);

return objCollection;
}

}
}

Here in above we are taking one generic observable collection which will contain string type data.

Now the time for ViewModel class.Now Right click on the ViewModel folder->Add NewItem->Choose Class->give the class name as “MainWindowVM.cs”

In my example the MainWindowVM.cs class will contain the below part of the code

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Windows;
using EasyMVVM.Model;

namespace EasyMVVM.ViewModel
{
public class MainWindowVM : DependencyObject,INotifyPropertyChanged
{

public MainWindowVM()
{
EasyMVVM.Model.Model objModel = new EasyMVVM.Model.Model();
BoundProperty = objModel.GetData();
}

//set up a private class varialbe that holds the value of the _Backing Property
private ObservableCollection<string> _Property;
//This is the publically viewable Property for this class
public ObservableCollection<string> BoundProperty
{
get
{
return _Property;
}
set
{
_Property = value;
PropChanged(“BoundProperty”);
}
}
//This event will be fired to notify any listeners of a change in a property value.
public event PropertyChangedEventHandler PropertyChanged;
//It will say WPF Binding that this property value has changed
public void PropChanged(String propertyName)
{

if (PropertyChanged != null)
{
//Tell WPF that this property changed
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}

Note: As we are using ObservableCollection here so if we won’t use “INotifyPropertyChanged” interface to notify the view, It will also work because if you will go inside the ObservableCollection,you can able to see “INotifyCollectionChanged” and “INotifyPropertyChanged” interfaces it is calling internally.

Now our modelview class over and now let’s go to the view. Now cut the “MainWindow.xaml” and paste into the “View” folder and modify the view accordingly.

Note: Open the App.Xaml file and change the startup uri like “StartupUri=”View/MainWindow.xaml”.As we moved the “MainWindow.xaml” file to the “View” file.

Here in the view we need to add the below two part of the code.

Part-1
xmlns:vm=”clr-namespace:EasyMVVM.ViewModel”

The below part also we added.

Part-2
<StackPanel>
<StackPanel.Resources>
<vm:MainWindowVM x:Key=”vm”></vm:MainWindowVM>
</StackPanel.Resources>
<ComboBox Height=”30″ Width=”100″ Margin=”100,50,90,50″ ItemsSource=”{Binding Source={StaticResource vm}, Path=BoundProperty}” Cursor=”Arrow” SelectedIndex=”0″/>
</StackPanel>

Here is my complete view code.

<Window x:Class=”EasyMVVM.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:vm=”clr-namespace:EasyMVVM.ViewModel”

Title=”MainWindow” Height=”350″ Width=”525″>

<StackPanel>
<StackPanel.Resources>
<vm:MainWindowVM x:Key=”vm”></vm:MainWindowVM>
</StackPanel.Resources>
<ComboBox Height=”30″ Width=”100″ Margin=”100,50,90,50″ ItemsSource=”{Binding Source={StaticResource vm}, Path=BoundProperty}” Cursor=”Arrow” SelectedIndex=”0″/>
</StackPanel>
</Window>

Here in this view we are taking one combobox which will bind all the values from Model class through viewModel.

We need to mention BInding, Source, path here and “Path=BoundProperty” here BoundProperty is the property declared in our MainWindowVM.cs class.

Hope this article will help to them who all are new to MVVM in WPF.

Also, you can read some SharePoint online tutorials:

– Download FREE PDF on HUB site in SharePoint online


– Apply HTML to email template in SharePoint 2010 designer workflow

– Delete custom page layout in SharePoint 2010


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →

Leave a Reply