AspBucket offers ASP.NET, C#, VB, Jquery, CSS, Ajax, SQL tutorials. It is the best place for programmers to learn

Thursday 23 June 2016

How to create WPF applications using MVVM approach with an example.

WPF, stands for Windows Presentation Foundation, It is Microsofts next generation UI framework to create applications with a rich user experience. WPF is a vector graphics based UI presentation layer it allows the presentation layer to smoothly scale UI elements to any size without distortion. WPF is also fully Databinding aware, which means that you can bind any property of a UI element to a.NET object (or a property/method of an object), a property of another UI element, or data. Yes, WinForms supports Databinding but in a much more limited way.

WPF follows MVVM (Model-View-ViewModel) Design Pattern.
Model 
The Model represents a set of classes that describes the business logic and data. It also defines business rules for data means how the data can be changed and manipulated.

View
 The View represents the UI(Layout) components. It is only responsible for displaying the data.

View Model
The View Model is responsible for exposing methods, commands, and other properties that helps to maintain the state of the view, manipulate the model as the result of actions on the view, and trigger events in the view itself. It Supports two-way data binding between View and ViewModel.


Steps to configure MVVM project

Step 1- Add new WPF project.

Step 2- Create three new folder Model, View & ViewModel.

Step 3- Add new RelayCommand.cs file in ViewModel folder.
 public class RelayCommand : ICommand
    {
        #region Fields
        readonly Action<object> _execute;
        readonly Predicate<object> _canExecute;
        #endregion
        // Fields
        #region  Constructors
        public RelayCommand(Action<object> execute)
            : this(execute, null)
        { }
        public RelayCommand(Action<object> execute, Predicate<object> canExecute)
        { if (execute == null) throw new ArgumentNullException("execute"); _execute = execute; _canExecute = canExecute; }
        #endregion
        // Constructors
        #region ICommand Members
        [DebuggerStepThrough]
        public bool CanExecute(object parameter)
        { return _canExecute == null ? true : _canExecute(parameter); }
        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }
        public void Execute(object parameter)
        {
            _execute(parameter);
        }
        #endregion
        // ICommand Members
    }
Rather than making Command Class for each Command we can implement a generic Relay Command to get Command. Below is a RelayCommand class that we will implement.

Step 4- Add ViewModelBase class in ViewModel folder
  public class ViewModelBase:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisedPropertyChanged(string PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }
    }

That's it your initial setup is ready for MVVM pattern.

I created an Inventory Management application in WPF using MVVM framework. I hope It would helpful to understand  MVVM framework.

Any external framework is not included in the project.

0 comments :

Post a Comment

  • Popular Posts
  • Comments