Xamarin: Understanding MVVM pattern

Introduction

Model-View-ViewModel (MVVM) is a widely used architectural pattern in Xamarin application development. MVVM is a design pattern that separates the user interface and business logic into three different components. In this pattern, the Model represents the data and business logic, the View represents the user interface, and the ViewModel acts as a bridge between the Model and the View.

Explanation

The following are the components of the MVVM pattern:

• Model: The Model contains the data as well as the business logic for the application.

• View: The View contains the user interface that presents the data.

• ViewModel: The ViewModel connects the Model with the View through a data binding mechanism. It provides the data from the Model to the View and vice versa.

Syntax

The syntax for implementing the MVVM pattern in Xamarin is as follows:

Model:

public class Person
{
    public string Name { get; set; }
    public string Address { get; set; }
}

View:

<StackLayout>
    <Label Text="{Binding Name}" />
    <Label Text="{Binding Address}" />
</StackLayout>

ViewModel:

public class PersonViewModel : INotifyPropertyChanged
{
    private Person person;
    public PersonViewModel()
    {
        person = new Person
        {
            Name = "John Doe",
            Address = "123 Main St"
        };
    }
    public string Name
    {
        get { return person.Name; }
        set
        {
            person.Name = value;
            OnPropertyChanged();
        }
    }
    public string Address
    {
        get { return person.Address; }
        set
        {
            person.Address = value;
            OnPropertyChanged();
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Example

The following example demonstrates the usage of the MVVM pattern in Xamarin.Forms.

<!-- View -->
<ContentPage ......>

  <StackLayout Margin="20">
    <Entry Placeholder="Enter your name"
           Text="{Binding Name, Mode=TwoWay}"
           />
    <Entry Placeholder="Enter your address"
           Text="{Binding Address, Mode=TwoWay}"
           />
    <Button Text="Submit"
            Command="{Binding SubmitCommand}"
            />
  </StackLayout>

</ContentPage>

// ViewModel
public class ExampleViewModel : INotifyPropertyChanged
{

  // Two-way bindable fields
  private string _name;
  private string _address;

  public string Name 
  { 
    get => _name; 
    set {
      if (_name == value) return;
      _name = value;
      OnPropertyChanged();
    }
  }
  public string Address 
  { 
    get => _address; 
    set {
      if (_address == value) return;
      _address = value;
      OnPropertyChanged();
    }
  }

  // Submit command field
  private readonly ICommand _submitCommand;

  public ICommand SubmitCommand => _submitCommand;

  // Constructor
  public ExampleViewModel()
  {
    _submitCommand = new Command(() => Submit());
  }

  // Command method
  private void Submit()
  {
    // Do something here
  }

  // Property changed event
  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

Output

When the above example is run, a simple user interface is displayed with two fields to enter the name and address, respectively. The Submit button triggers the Submit() method. When the Submit button is tapped, the Submit() method is executed.

Explanation

In the above example, the Model class is represented by the Person class that contains the data and business logic. The View contains the user interface, which is defined in XAML markup language. The ViewModel connects the Model with the View using the data binding mechanism.

In the ViewModel, the properties Name and Address are defined to retrieve the data from the Model, which is then displayed in the View. The SubmitCommand property and Submit() method are defined to handle the user's input.

Whenever the properties of the ViewModel are updated, the OnPropertyChanged() method is called, which raises the PropertyChanged event. This triggers the View to update itself with the updated data provided by the ViewModel.

Use

The MVVM pattern is an effective way of separating the user interface and business logic in Xamarin applications. It helps in achieving a separation of concerns between the different components of the application and allows for a more organized approach to development. It also makes testing easier by isolating the different components of the application.

Important Points

• The MVVM pattern is an effective way of separating the user interface and business logic in Xamarin applications.
• The Model represents the data and business logic, the View represents the user interface, and the ViewModel acts as a bridge between the Model and the View.
• Data binding mechanism is used to connect the ViewModel with the View.
• Whenever the properties of the ViewModel are updated, the OnPropertyChanged() method is called, which raises the PropertyChanged event.

Summary

The MVVM pattern is an effective way of organizing the different components of a Xamarin application. It separates the user interface and business logic and allows for a more organized approach to development. The Model represents the data and business logic, the View represents the user interface, and the ViewModel acts as a mediator between the Model and the View.