In-depth understanding of the design ideas of MVVM in WPF

In recent years, as WPF has become more and more widely used in production, manufacturing, industrial control and other fields, many companies have gradually increased their demand for WPF development, causing many people to see potential opportunities and continue to switch from Web and WinForm development to WPF development, but WPF development also has many new concepts and design ideas, such as: data drive, data binding, dependency properties, commands, control templates, data templates, MVVM, etc., which are very different from traditional WinForm and ASP.NET WebForm development. Today, I will use a simple example to briefly describe the design ideas and applications of MVVM in WPF development.

In recent years, as WPF has become more and more widely used in production, manufacturing, industrial control and other fields, many companies have gradually increased their demand for WPF development, causing many people to see potential opportunities and continue to develop from Web and WinForm I turned to WPF development, but WPF development also has many new concepts and design ideas, such as: data drive, data binding, dependency properties, commands, control templates, data templates, MVVM, etc., which are different from traditional WinForm and ASP.NET WebForm development. There are big differences. Today I will use a simple example to briefly describe the design ideas and applications of MVVM in WPF development.

Why use MVVM?

Traditional WinForm development is generally event-driven, that is, the user clicks on the event, triggers the corresponding event, and obtains the data entered by the user on the page through a unique identifier in the event, and then performs business logic processing. This will have a drawback, that is, user input (User Interface) and business logic (Business) are closely coupled together and cannot be separated. As the business of the project continues to become more complex, the drawbacks of this high degree of coupling will become more and more serious. It’s becoming more and more obvious. And there will be a phenomenon where the division of labor is unclear (such as back-end engineers, front-end UI) and the work cannot be divided. Therefore, layering (such as MVC, MVVM), testability (Unit Test), and separation of front-end and back-end have become issues that must be faced. The MVVM design pattern we are going to explain today solves the problems we are facing very well.

What is MVVM?

MVVM is Model-View-ViewModel, which is a design pattern used to decouple UI code and non-UI code. With MVVM, you can define your UI declaratively in XAML and use data binding to mark the UI to other layers containing data and commands. Data binding provides loose coupling of data and structures, keeping the UI and linked data in sync while enabling user input to be routed to the appropriate commands. The details are shown in the figure below:

As shown in the picture above:

1. View (user page) is mainly used to display information to users, receive information input by users (data binding), and respond to user operations (Command).
2. ViewModel (user view business logic), mainly handles customer requests and data presentation.
3. Model data model, as a carrier for storing data, is a specific model class that is called through ViewModel. But in small projects, Model is not necessary.
4. IService (data interface), data access service, is used to obtain various types of data services. There are many forms of data, such as network data, local data, and database data, but when the ViewModel is called, they are all encapsulated into a Service. In small projects, the IService data interface is not necessary. Does not belong to the scope of MVVM.
5. In the above figure, DataBase, Network, Local, etc. represent different data source forms and are not within the scope of MVVM.

Prerequisites

To implement MVVM, two conditions need to be met first:

1. Attribute change notification, in the MVVM idea, driven by WinForm events, transformed into Be data driven. In C#, ordinary properties do not have the change notification function. To implement the change notification function, the INotifyPropertyChanged interface must be implemented.
2. Binding command, in WPF, in order to solve the coupling between event response functions , proposed the idea of ​​binding commands, that is, commands can be connected to controls in a binding way. Binding commands must implement the ICommand interface.

After the above two conditions are met, how to associate the properties and commands with change notifications in ViewModel with the controls in View? The answer isBinding.

When the data control of the View layer is bound to the property with notification function, Binging will automatically listen to the notification from the interface. PropertyChanged event. In order to achieve the effect of data-driven UI, it can be said that [a bridge flies to the north and south, and the natural chasm becomes a thoroughfare].

MVVM instance

In order to further experience the design ideas of MVVM and verify the above theoretical knowledge, examples are used to illustrate. The project structure of this example is as follows:

MVVM core code

1. Attributes with notification function

First define an abstract class ObservableObject, which implements the INotifyPropertyChanged interface, as shown below:

using System.ComponentModel;
 using System.Runtime.CompilerServices;

 namespace DemoMVVM.Core
 {
     /// 

     /// Observable classes
     /// 
     public abstract class ObservableObject : INotifyPropertyChanged
     {
         /// 

         /// Property change event
         /// 
         public event PropertyChangedEventHandler? PropertyChanged;

         /// 

         /// Property change trigger method
         /// 
         /// Property name
         protected void RaisePropertyChanged([CallerMemberName]string propertyName=null)
         {
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
         }

         /// 

         ///Set the attribute value and call the notification method if it changes
         /// 
         /// 
         /// 
         /// 
         /// 
         /// 
         protected bool SetProperty(ref T target,T value, [CallerMemberName] string propertyName = null)
         {
             if (EqualityComparer.Default.Equals(target, value))
             {
                 return false;
             }
             else
             {
                 target=value;
                 RaisePropertyChanged(propertyName);
                 return true;
             }
         }
     }
 }

Note: The above SetProperty is mainly used to turn ordinary properties into properties with notification functions.

Then define a ViewMode base class, inherited from ObservableObject, for subsequent expansion, as shown below:

namespace DemoMVVM.Core
 {
     /// 

     /// ViewModel base class, inherited from ObservableObject
     /// 
     public abstract class ViewModelBase:ObservableObject
     {

     }
 }

2. Commands with binding functions

First define a DelegateCommand and implement the ICommand interface, as shown below:

namespace DemoMVVM.Core
 {
     public class DelegateCommand : ICommand
     {
         private Action