Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How does CHESS handle ViewModel to View bindings in MvvmCross


How does CHESS handle ViewModel to View bindings in MvvmCross


In MvvmCross, handling ViewModel to View bindings is primarily achieved through data binding, which provides an automated connection between the View and ViewModel. Here's a detailed overview of how this works, particularly in the context of an application like CHESS:

Data Binding Basics

Data binding in MvvmCross is inspired by Microsoft's XAML-based frameworks, such as WPF and Silverlight. It allows for the synchronization of data between Views and ViewModels, enabling a Two-Way communication where changes in either the View or ViewModel are reflected in the other.

Binding Modes

MvvmCross supports several binding modes:
- One-Way: Transfers data from the ViewModel to the View. Useful for displaying dynamic data.
- One-Way-To-Source: Transfers data from the View to the ViewModel. Rarely used; Two-Way is more common.
- Two-Way: Updates both View and ViewModel properties. Commonly used for editing forms.
- One-Time: Transfers data from ViewModel to View once and does not monitor changes.

Implementing Bindings

To implement bindings in MvvmCross, you typically use the `CreateBindingSet` method in your View to bind properties or commands. For example, if you have a `MvxCommand` in your ViewModel, you can bind it to a UI element in the View like this:

csharp
var set = this.CreateBindingSet();
set.Bind(this).For(view => view.MyButton).To(viewModel => viewModel.MyCommand);
set.Apply();

This binds the `MyButton` in the View to the `MyCommand` in the ViewModel.

Custom Bindings

For custom views or properties not supported out of the box, you can create custom target bindings. This involves defining a class that inherits from `MvxPropertyInfoTargetBinding` or similar, specifying how to set and get values for the custom property, and registering this binding in your `Setup.cs` file.

ViewModel to View Interaction

For scenarios where the ViewModel needs to interact with the View directly (e.g., to prompt the user), MvvmCross provides `IMvxInteraction`. This allows the ViewModel to trigger actions in the View without tightly coupling them. Here’s how you might use it:

csharp
private MvxInteraction _interaction = new MvxInteraction();
public IMvxInteraction Interaction => _interaction;

In the View, you bind this interaction using:

csharp
var set = this.CreateBindingSet();
set.Bind(this).For(view => view.Interaction).To(viewModel => viewModel.Interaction).OneWay();
set.Apply();

This setup enables the ViewModel to prompt the View to perform specific actions, such as displaying a confirmation dialog.

Lifecycle Methods

MvvmCross ViewModels have lifecycle methods (`ViewCreated`, `ViewAppearing`, etc.) that can be used to manage bindings and resources as the View's state changes. This helps ensure that bindings are updated or cleaned up appropriately.

In summary, CHESS or any application using MvvmCross would handle ViewModel to View bindings through data binding, custom bindings for unique scenarios, and interactions for direct ViewModel to View communication, all while leveraging lifecycle methods for managing the ViewModel's state.

Citations:
[1] https://www.mvvmcross.com/documentation/advanced/mvxinteraction
[2] https://stackoverflow.com/questions/36902691/binding-android-views-view-with-viewmodel-with-mvvmcross-on-android
[3] https://www.packtpub.com/en-us/learning/how-to-tutorials/sharing-mvvmcross
[4] https://www.mvvmcross.com/documentation/advanced/custom-data-binding
[5] https://learn.microsoft.com/en-us/dotnet/maui/xaml/fundamentals/mvvm?view=net-maui-9.0
[6] https://stackoverflow.com/questions/16368013/how-do-you-bind-a-viewmodel-to-the-windows-8-settings-pane-in-mvvmcross?rq=3
[7] https://www.mvvmcross.com/documentation/fundamentals/data-binding
[8] https://visualstudiomagazine.com/Articles/2013/02/01/Building-Android-Apps.aspx
[9] https://www.mvvmcross.com/documentation/tutorials/tipcalc/a-note-about-views-and-viewmodels
[10] https://www.mvvmcross.com/documentation/fundamentals/viewmodel-lifecycle
[11] https://www.mvvmcross.com/documentation/advanced/customizing-using-App-and-Setup