MVVM is a variation of the Model-View-Controller pattern. It separates logic traditionally placed in a View object into two distinct objects, one called View and the other called ViewModel. The View is responsible for providing the user interface and the ViewModel is responsible for the presentation logic. The presentation logic includes transforming data from the Model into a form that is suitable for the user interface to work with and mapping user interaction with the View into requests sent back to the Model. The following diagram depicts how the various objects in MVVM communicate:

While MVVM presents a more complex implementation model, there are significant benefits of it, which are as follows:

These factors make the MVVM approach both flexible and powerful.

Views in an MvvmCross app are implemented using platform-specific constructs. For iOS apps, Views are generally implemented as ViewControllers and XIB files. MvvmCross provides a set of base classes, such as MvxViewContoller, that iOS ViewControllers inherit from. Storyboards can also be used in conjunction with a custom presenter to create Views; we will briefly discuss this option in the section titled Implementing the iOS user interface later in this chapter.

For Android apps, Views are generally implemented as MvxActivity or MvxFragment along with their associated layout files.

ViewModels are classes that provide data and presentation logic to views in an app. Data is exposed to a View as properties on a ViewModel, and logic that can be invoked from a View is exposed as commands. ViewModels inherit from the MvxViewModel base class.

Commands are used in ViewModels to expose logic that can be invoked from the View in response to user interactions. The command architecture is based on the ICommand interface used in a number of Microsoft frameworks such as Windows Presentation Foundation (WPF) and Silverlight. MvvmCross provides IMvxCommand, which is an extension of ICommand, along with an implementation named MvxCommand.

The commands are generally defined as properties on a ViewModel. For example:

public  IMvxCommand ParkSelected { get; protected set; }

Each command has an action method defined, which implements the logic to be invoked:

protected void ParkSelectedExec(NationalPark park)
{
   . . .// logic goes here
}

The commands must be initialized and the corresponding action method should be assigned:

ParkSelected =
    new MvxCommand<NationalPark> (ParkSelectedExec);

Data binding facilitates communication between the View and the ViewModel by establishing a two-way link that allows data to be exchanged. The data binding capabilities provided by MvvmCross are based on capabilities found in a number of Microsoft XAML-based UI frameworks such as WPF and Silverlight. The basic idea is that you would like to bind a property in a UI control, such as the Text property of an EditText control in an Android app to a property of a data object such as the Description property of NationalPark. The following diagram depicts this scenario:

public class NationalPark : INotifyPropertyChanged
{
  public event PropertyChangedEventHandler
     PropertyChanged;
  // rather than use "… code" it is safer to use
  // the comment form 
  string _name;
  public string Name
  {
    get { return _name; }
    set
    {
        if (value.Equals (_name,
            StringComparison.Ordinal))
        {
      // Nothing to do - the value hasn't changed;
      return;
        }
        _name = value;
        OnPropertyChanged();
    }
  }
  . . . 
  void OnPropertyChanged(
    [CallerMemberName] string propertyName = null)
  {
      var handler = PropertyChanged;
  if (handler != null)
  {
      handler(this,
            new PropertyChangedEventArgs(propertyName));
  }
  }
}

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/descrTextView"
    local:MvxBind="Text Park.Description" />

this.CreateBinding (this.descriptionLabel).
    To ((DetailViewModel vm) => vm.Park.Description).
    Apply ();

Navigating between various screens within an app is an important capability. Within a MvvmCross app, this is implemented at the ViewModel level so that navigation logic can be reused. MvvmCross supports navigation between ViewModels through use of the ShowViewModel<T>() method inherited from MvxNavigatingObject, which is the base class for MvxViewModel. The following example demonstrates how to navigate to DetailViewModel:

ShowViewModel<DetailViewModel>();

public class DetailParams
{
    public int ParkId { get; set; }
}

// using the parameters class
ShowViewModel<DetailViewModel>(
new DetailViewParam() { ParkId = 0 });

public class DetailViewModel : MvxViewModel
{
    . . .
    public void Init(DetailViewParams parameters)
    {
        // use the parameters here . . .
    }
}

Solution/project organization

MvvmCross solutions are organized in a way that is similar to how we organized the PCL solution in Chapter 6, The Sharing Game. Each MvvmCross solution will have a single core PCL project that houses the reusable code and a series of platform-specific projects that contain the various apps. The following diagram depicts the general structure:

RegisterAppStart<ViewModels.MasterViewModel>();

protected override IMvxApplication CreateApp()
{
    return new Core.App();
}

[Activity(
  Label="NationalParks.Droid", MainLauncher = true,
  Icon="@drawable/icon", Theme="@style/Theme.Splash",
  NoHistory=true,
  ScreenOrientation = ScreenOrientation.Portrait)]
public class SplashScreen : MvxSplashScreenActivity
{
    public SplashScreen():base(Resource.Layout.SplashScreen)
    {
    }
}

public override bool FinishedLaunching (
    UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);

    var setup = new Setup(this, _window);
    setup.Initialize();
    var startup = Mvx.Resolve<IMvxAppStart>();
    startup.Start();

    _window.MakeKeyAndVisible ();

    return true;
}