Essentials Of MVVM 💻📱🖥️

MVVM (Model-View-ViewModel) is a software architecture pattern that is widely used in the development of UI-centric programs nowadays. MVVM is a must-have design pattern during the development of WPF, UWP, and Xamarin for taking advantage of user device capabilities and browser memory to improve application performance. MVVM was originally defined by Microsoft for use with Windows Presentation Foundation (WPF) and Silverlight, having been officially announced in 2005 by John Grossman in a blog post about WPF( Formally known as Avalon).

 

Why use MVVM?

 

In traditional WPF or Silverlight development - developers used to create a UI using window or user control or page. For all relevant codes like event handling, initialization, business logic, we write in the UI's code-behind. This strategy increased the size of the UI class and has a tight coupling between Application UI, data binding logic, and business operations. This tight coupling (heavy dependency) increases the overhead of UI. The Application UI has to do some more stuff including rendering the UI. This overhead was reducing UI rendering performance and application performance too. In this same situation, two developers cannot work simultaneously on the same UI. It's possible, but one developer's changes might break the other's code. Now we can feel that all these problems exist because there is a very tight coupling between the components of the application. The MVVM pattern focuses on the separation of those concerns or tight coupling. MVVM separates graphical user interface development from business logic or back-end logic (data model) development. For this separation of concerns, MVVM introduces three Components.

1. Model (Business rule, data access, model classes)
2. View (User interface, XAML)
3. View-Model (Middle man between view and model)

The Model

 

The model refers to the domain object. They’re usually structs or simple classes. The model represents the actual data or information we are dealing with, within the application. The key thing to remember with the model is that it holds the only information, not behaviors or services that manipulate the information.  

public class Book : BindableBase
  {
      private string _title;
      private string _author;
      private string _category;
      private string _language;

      public string Title
      {
          get { return _title; }
          set
          {
              if (_title != value)
              {
                  _title = value;
                  OnPropertyChanged();
              }
          }
      }
      public string Author
      {
          get { return _author; }
          set
          {
              if (_author != value)
              {
                  _author = value;
                  OnPropertyChanged();
              }
          }
      }
      public string Category
      {
          get { return _category; }
          set
          {
              if (_category != value)
              {
                  _category = value;
                  OnPropertyChanged();
              }
          }
      }
      public string Language
      {
          get { return _language; }
          set
          {
              if (_language != value)
              {
                  _language = value;
                  OnPropertyChanged();
              }
          }
      }
  }

The View

 

The view is simply referring to a user interface that responsible to display visual elements and controls on the screen. They’re typically subclasses of UIView. The view contains a collection of visible elements, and also receives user input. This collection includes user interfaces (UI), animations, and text.

<Window
    x:Class="App19.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:App19"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <StackPanel>
        <TextBox Text="{Binding MyBook.Title, Mode=TwoWay}" />
        <TextBox Text="{Binding MyBook.Author, Mode=TwoWay}" />
        <TextBox Text="{Binding MyBook.Category, Mode=TwoWay}" />
        <TextBox Text="{Binding MyBook.Language, Mode=TwoWay}" />
        <Button Command="{Binding UpdateCommand}" Content="Update" />
    </StackPanel>
</Window>

The ViewModel

 

We can find ViewModel between the View and Model layers. It provides data binding between View and model data as well as handling all UI actions and interactions by using the command. The ViewModel also exposes schemes, commands, and other points that help maintain the state of the view, manipulate the model as the result of actions on the view, and triggers events in the view itself.

public class MainWindowViewModel : BindableBase
    {
        private Book _myBook;
        public DelegateCommand UpdateCommand { get; set; }
        public MainWindowViewModel()
        {
            UpdateCommand = new DelegateCommand(OnUpdateCommandExecute);
            MyBook = new Book { Title = "My Book", Author = "Avnish Kumar", Category = "Programming", Language = "English" };
        }
        public Book MyBook
        {
            get { return _myBook; }
            set
            {
                _myBook = value;
                OnPropertyChanged();
            }
        }
        private void OnUpdateCommandExecute()
        {
            //Update the book details.
        }
    }

Here, we can see the ViewModel inherit a class BindableBase. This BindableBase class is the implementation of one of the two essential interfaces of the MVVM pattern. these are as following:

1. INotifyPropertyChanged Interface: Notifies clients that a property value has changed.
2. ICommand Interface: Provide the commanding behavior for UI elements.

ICommand and INotifyPropertyChanged interface are the two important Piller of MVVM. We use DataBinding to synchronize data between the model and the view in any WPF, UWP, SilverLight, or Xamarin project. When the binding is going to initialize, the value of the model is sent to the view once. But for every subsequent change, the model must notify the binding to transfer the value again. We can achieve this easily by the implementation of the INotifyPropertyChanged interface on the model. 

 

The other most-used mechanism to bind actions to the view is the commands. To provide a command, you have to implement the ICommand interface. Commands provide the glue between View and ViewModel for interactivity and provide the commanding behavior for UI elements. ICommand exposes two methods, Execute, and CanExecute, and an event, CanExecuteChanged. Execute performs the actions that are associated with the command. CanExecute determines whether the command can execute the current command target. CanExecuteChanged is raised if the command manager that centralizes the commanding operations detects a change in the command source that might invalidate a command that has been raised but not yet executed by the command binding. 

 

INotifyPropertyChanged interface implementation

public abstract class BindableBase : INotifyPropertyChanged
   {

       public event PropertyChangedEventHandler PropertyChanged;
       protected void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
       {
           if (Equals(storage, value))
           {
               return;
           }

           storage = value;
           OnPropertyChanged(propertyName);
       }
       protected void OnPropertyChanged([CallerMemberName]string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }

ICommand interface implementation

public class DelegateCommand : ICommand
   {
       private readonly Action _execute;

       private readonly Func<bool> _canExecute;

       public event EventHandler CanExecuteChanged;

       public DelegateCommand(Action execute)
           : this(execute, null)
       {
       }

       public DelegateCommand(Action execute, Func<bool> canExecute)
       {
           _execute = execute ?? throw new ArgumentNullException(nameof(execute));
           _canExecute = canExecute;
       }

       public bool CanExecute(object parameter) => _canExecute == null || _canExecute();

       public void Execute(object parameter) => _execute();

       public void OnCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
   }

   public class DelegateCommand<T> : ICommand
   {
       private readonly Action<T> _execute;

       private readonly Func<T, bool> _canExecute;

       public event EventHandler CanExecuteChanged;

       public DelegateCommand(Action<T> execute)
           : this(execute, null)
       {
       }

       public DelegateCommand(Action<T> execute, Func<T, bool> canExecute)
       {
           _execute = execute ?? throw new ArgumentNullException(nameof(execute));
           _canExecute = canExecute;
       }

       public bool CanExecute(object parameter) => _canExecute == null || _canExecute((T)parameter);

       public void Execute(object parameter) => _execute((T)parameter);

       public void OnCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
   }

OK, we're done! I hope you've learned why MVVM is so essential during WPF, UWP, SilverLight, or Xamarin project development. For a better understanding of this MVVM implementation, you can visit my git repository. you can find this MVVM implementation in this NuGet package.