WPF: The Origin of MVVM and the Process of Property Binding

WPF: The Origin of MVVM and the Process of Property Binding

1、MVVM

(1) What is MVVM?

MVVM (Model-View-ViewModel) is a software architecture design pattern MVVM pattern. Helps to separate the business logic of the application and the user interface layer , making the development process more manageable , but also facilitate unit testing .

Model?

The result of abstraction of objects in the real world.

View？

View=UI。

View Model?

ViewModel=Model for View。

Communication between View and View Model:Passing data: data attributes Passing operations: command attributes。

(2) Why use MVVM?

• testability: Since the business logic is encapsulated in the ViewModel, this makes it easier to write unit tests.
• decoupled: View and Model communicate indirectly through ViewModel , making them independent of each other , easy to modify and maintain separately .
• maintainability: A clear hierarchical structure makes the code easier to understand and maintain.

2、Data Binding

Now let's do an experiment to implement a simple addition, going through MVVM.

As you can see from the figure, there are 3 data attributes and 2 command attributes.

First create the layer folders as follows:

For data properties, we first create a NotificationObject class to inherit the INotifyPropertyChanged interface.This interface is used to implement bidirectional binding between UI and data properties.。

For the command property, we first create a DelegateCommand class that inherits the interface ICommand.

The code inside the ViewModel is as follows:

The results are as follows:

3. Analysis

How to enforce data properties? (Bi-directional interaction between ViewModel and View)

What is the interface inside INotifyPropertyChanged used for in the data binding process?

When we enter 1 into the UI layer (the corresponding value has already been passed to Input1), the method inside the Set corresponding to the property will be executed at this time

and then executes the event inside the method.Pass this property name to the UIThen the corresponding properties of the UI bindings are changed.

That is to say: Input1 and Inpu2 we just pass the value through the UI, so we don't need to execute the RaisePropertyChanged method. So, when I comment out the RaisePropertyChanged method in there, after debugging and experimenting, it still shows the results.This process is from View to ViewModel.

Coming back to Input3, why can't this one remove the RaisePropertyChanged method? Because when we go to execute the command, the value of Input3 inside the ViewModel is changed, and then the UI is notified through event triggering, which is passed to the corresponding property name, so that the value of the UI layer is changed.This process is View Model to View.

How to execute the command property? (View to ViewModel)

We know that inside the MainWindow we need to bind the xaml context to the View Model

Yet inside the ViewModel object created, this command property is executed?

So, after debugging, I found that after new did not go to trigger the Add method inside the delegate, this is why?

During the initialization phase, theAddCommandis created and set to execute the action (i.e., theAddmethod), but this does not mean that theAddmethod is executed immediately. Only when the user interacts with the UI (e.g., by clicking a button), theAddCommandbefore it is triggered to execute theAddMethods.
Note here the binding method for the command attribute:

Binding methods for data properties, such as TextBox: in the text.