WPF- Simple Model-View-ViewModel(MVVM) project –Step by step
Model-View-ViewModel(MVVM) is a pattern to create the
loosely coupled the user interface and logic.
1. Create the new wpf application in visual studio
2. Go to the solution Explorer and create 3 folders named Model,
View, ViewModel (Right click the project to add ->New Folder)
3. Cut and paste the APP.xaml and MainWindow.xaml into view folder;
now your solution explorer will look like the following
4. Now add 3 class files to viewmodel folder and rename it.
5. in “ViewModelBaseClass.cs” ,Copy and paste the following
code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
namespace SimpleWpfMvvmProject.ViewModel
{
class ViewModelBaseClass:INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void
OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
6. In “RelayCommandClass.cs”, Copy and paste the following
code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Input;
namespace SimpleWpfMvvmProject.ViewModel
{
class RelayCommandClass:ICommand
{
Action<object>
action;
public RelayCommandClass(Action<object> _action)
{
action = _action;
}
public bool
CanExecute(object parameter)
{
return true;
//throw new NotImplementedException();
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
action(parameter);
//throw new NotImplementedException();
}
}
}
Model:
7. Add a class files in Model folder and name it as
“ModelClass.cs” With the following code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace SimpleWpfMvvmProject.Model
{
class ModelClass
{
private string myVar;
public string
MyProperty
{
get { return myVar; }
set { myVar = value;
}
}
public ModelClass()
{
MyProperty = "aki";
}
}
}
ViewModel:
8. in “MainWindowlogicClass.cs” file and add the
following code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Input;
using System.Windows;
namespace SimpleWpfMvvmProject.ViewModel
{
class MainWindowLogicClass:ViewModelBaseClass
{
Model.ModelClass modelClass;
public MainWindowLogicClass()
{
modelClass = new Model.ModelClass();
ButtonCommand = new RelayCommandClass(new
Action<object>(Display));
}
private ICommand
buttonCommand;
public ICommand
ButtonCommand
{
get { return
buttonCommand; }
set { buttonCommand = value;
}
}
public void Display(object
obj)
{
MessageBox.Show("hi
"+ obj.ToString());
}
public string
MyProperty
{
get { return
modelClass.MyProperty; }
set
{
modelClass.MyProperty = value;
OnPropertyChanged("MyProperty");
}
}
}
}
View:
9. go to APP.xaml ,remove startupuri=”MainWindow.xaml” in
designer view ;in code view add the following code
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Windows;
namespace SimpleWpfMvvmProject
{
/// <summary>
/// Interaction logic for
App.xaml
/// </summary>
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs
e)
{
base.OnStartup(e);
MainWindow mw = new
MainWindow();
ViewModel.MainWindowLogicClass vm = new ViewModel.MainWindowLogicClass();
mw.DataContext = vm;
mw.Show();
}
}
}
10. go to MainWindow.xaml and add the following code
<Window x:Class="SimpleWpfMvvmProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350" Width="525">
<Grid>
<TextBox Height="23" HorizontalAlignment="Left" Margin="183,67,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding MyProperty}" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="219,131,0,0" Name="button1" VerticalAlignment="Top" Width="75" Command="{Binding ButtonCommand}" CommandParameter="akilan" />
</Grid>
</Window>
Now Run the application.it will run.
in future if u will do any modification in user interface,it will not affect the logic.
