Daniel Hindrikes

A way to reuse so much code as possible when working with Xamarin is to use the MVVM-pattern. A framework for MVVM that works great with Xamarin is MvvmCross (http://www.nuget.org/packages/MvvmCross/3.1.1). This blog post shows the basics about to use MvvmCross with Xamarin for an Android app. More posts about Xamarin and MvvmCross will come later.

Installation
The easiest way to install MvvmCross is to installed above mention NuGet package. In order to share as much code as possible I have the code for ViewModels in a core project (a Portable Class Library) that I can share with apps for iOS and Windows. I have to install the NuGet package on both the client project and the core project.

ViewModels
Viewmodels will be shared over all platforms. The ViewModel has to inherit MvxViewModel and override the start method. In the start method, put the code that will run when the viewmodel is initialized. In my example I get the data there.

Each property needs to have a private variable that contains the data. But when you are setting the data you need to set the property, not the variable. The get method of the propery will just return the value of the variable. The set method also needs to call RaisePropertyChanged to notify the UI that the value of the property has changed.

private ISettings _settings;

public SettingsViewModel (ISettings settings)
{
            _settings = settings;
}

public async override void Start()
{
	base.Start ();
        Settings = _settings.GetSettings(); 
}

private List _settingsList
public List Settings
{
        get
        {
             return _settingsList;   
        }
        set 
        {
              _settingsList = value;
               RaisePropertyChanged(() => Settings);
        }
}

Databinding and views
Code to databind will be platform specific. For Android the binding code will be placed in the layout files.

To use bindings in your layout files you need to add a namespace to your root element.

The easiest way to create a list of bound items is to use MvxListItem. Use the MvxBind property to set the item source for the list and MvxItemTemplate to set which template that will be used for each item.

In the layout file for the list item use MvxBind to bind text to the elements.

The Activity
Your activity need to inherit MvxActivity and override the ViewModel property. Notice the new keyword in the property head.

public new SettingsViewModel ViewModel
{
       get { return base.ViewModel as SettingsViewModel; }
       set { base.ViewModel = value; }
}

That is the only thing you need to do in your activity to start using MvvmCross.

Splash screen
When your app is starting it could be nice to show a splash screen to your users. MvvmCross makes it easier for you to do that. When you install MvvmCross you will get files in your project for a splash screen. Just edit it so it looks the way you want.

The splash screen will not be the main launcher, set the first activity to be the main launcher. If you have two main launchers the app will be in the app list twice.

That was the basics about MvvmCross, more to come in future posts.