WPF- Simple Model-View-ViewModel(MVVM) project –Step by step

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.