Include Mvvm - Uno — ContextQMD

ViewModel

So far all the elements we've added to the MainPage have had their content set directly. This is fine for static content, but for dynamic content, we need to use data binding. Data binding allows us to connect the UI to the application logic, so that when the application logic changes, the UI is automatically updated.

As part of creating the application, we selected MVVM as the presentation framework. This added a reference to the MVVM Toolkit package which provides a base class called ObservableObject which implements the INotifyPropertyChanged interface. This interface is used to notify the UI when a property has changed so that the UI can be updated.

Add a new class named MainViewModel.
Update the MainViewModel class to be a partial class and inherit from ObservableObject.
csharp
```
internal partial class MainViewModel : ObservableObject
{
}
```
Add the _count and _step fields to the MainViewModel class. These fields both have the ObservableProperty attribute applied, which will generate matching properties, Count and Step, that will automatically raise the PropertyChanged event when their value is changed.
csharp
```
[ObservableProperty]
private int _count = 0;

[ObservableProperty]
private int _step = 1;
```
Add a method called Increment to the MainViewModel that will increment the counter by the step size. The RelayCommand attribute will generate a matching ICommand property, IncrementCommand, that will call the Increment method when the ICommand.Execute method is called.
csharp
```
[RelayCommand]
private void Increment()
    => Count += Step;
```

[!NOTE] If you see red squiggles under Count or Step, save the file to have Hot Reload apply your changes.

The final code for the MainViewModel class should look like this:

csharp


internal partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private int _count = 0;

    [ObservableProperty]
    private int _step = 1;

    [RelayCommand]
    private void Increment()
        => Count += Step;
}