Android and iOS Development with Simple MVVM Toolkit? Yes you can!

Note: This is Part 1 of a three part series.  This post deals with iOS development. Part 2 will delve into Android development, and Part 3 will discuss how to create a Simple Mvvm Portable Library with code that can be shared across multiple UI platforms (both Microsoft and non-Microsoft).

In the three years since its first release, my Simple MVVM Toolkit has garnered quite a bit of interest from the developer community and has had over 41,000 downloads (including CodePlex, Visual Studio Extensions Gallery, and NuGet).  My goal in creating the toolkit was simplicity in design, a rich feature set, clear documentation, plenty of samples, and an easy-to-use installer with good Visual Studio integration, including project templates and code snippets.  Since I wrote a comparison with MVVM Light, the list of differences has narrowed since Laurent added more features and has provided an installer, but the two toolkits still differ in terms of philosophy and approach. Like anything in life, it comes down to a matter of preference and personal taste.

That is, until now. Smile  Today you can use Simple MVVM Toolkit to build iOS and Android applications using the Xamarin extension to Visual Studio.  Not only that, but my toolkit includes project templates for creating Portable Class Libraries with models, view-models and other common code that can be shared across multiple UI platforms, including WPF, Silverlight, Windows Store, Windows Phone, iOS and Android.  What has made this possible is that Microsoft removed the platform restriction on NuGet packages and PCL’s can now target iOS and Android via Xamarin. (I’ll explore in depth how to use Simple MVVM Toolkit to create portable libraries in a future blog post.)

Before getting started with iOS development, you’ll probably want to go buy a Mac.  You could theoretically create a Mac OSX virtual machine on a PC, although Apple only approves virtualization on its own hardware.  Another alternative is to use a cloud-based Mac, but that could be slow, depending on your Internet connection, and isn’t free.  If you have the funds, investing in a real Mac is a great idea, and the Mac Mini starts at just $599.  I bought a top-end MacBook Air, and I run Windows 8.1 in a virtual machine on it using Parallels.  Not only do I enjoy extended battery life and superbly designed hardware, but running Windows in a VM lets me switch images, or install a new one should it become corrupted. And the solid state drive is several times faster than a SATA drive, although I still use an external SATA with a Thunderbolt cable for storing movies and other media.

Next you’ll need to install two versions of Xamarin: one on the Mac, and the other on Windows.  With both of these you’ll get Xamarin Studio, but with Windows you’ll also get Visual Studio integration.  The catch is that VS integration requires a Business Edition license, which is not free.  Nevertheless, you can start with a 30 day trial and go from there.  (MSDN subscribers get a 90 day trial and discount on the retail price, as well as exclusive training content.)  Speaking of training, be sure to check out sessions by Mark Smith on iOS and Android development with Xamarin and C#.  The view the videos, just sign up for a free 14 day trial using the promo code: SNEED-14.

Finally, install Simple MVVM Toolkit v5.5 (or later). You can get it right from within Visual Studio 2013, by selecting Tools, Extensions and Updates, clicking the Online tab, and searching for simplemvvm.  Or you can visit the download page of the Simple Mvvm Toolkit CodePlex site, where you can get the VSIX installer and run it, as well as zip files containing the samples and source code.  Note that VS 2013 Profession Edition or higher is required – as Xamarin does not support VS Express.  (There is also a separate installer for VS 2012 available on the VS Extensions Gallery which you can use with the Pro Edition, but it does not [yet] have support for Xamarin.)  While it is possible to use Xamarin Studio instead of Visual Studio, and simply reference the Simple MVVM Toolkit NuGet package, the only way to get the predefined Simple Mvvm project templates is to use VS Pro Edition together with Xamarin for Visual Studio Business Edition (licensed or free trial).

SimpleMvvm-VS-Ext

After installing Xamarin and Simple MVVM Toolkit, all you have to do is create a new Simple Mvvm iOS Application, by adding a new project, then selecting a project type of Visual C#, iOS, Universal, and choosing Simple Mvvm iOS Application (you will also see it under the general Visual C# category).

SimpleMvvm-iOS

You will then be prompted to connect to a Xamarin.iOS Build Host, running on a Mac (local or networked).

iOS-BuildHost

What you get is a fully functioning iOS application for both iPhone and iPad using the Simple MVVM Toolkit! Just select iPhoneSimulator as your configuration and press F5.  That will open up the sample app on your Mac in the iPhone simulator.

SimpleMvvm-iOS-Mac

To see the same app running in the iPad simulator, open the solution file (.sln) using Xamarin Studio for the Mac (I didn’t see an iPad configuration option in Visual Studio), select Debug / iPad iOS 7.0, and click the Run button.

SimpleMvvm-iPad-Mac

There is a lot going on under the covers to make all this happen.  First, there’s the visual layout.  I created the layout using storyboards in Xamarin Studio for the Mac.  For that I had to select “Check for Updates” from the Xamarin Studio menu and get the latest version from the Alpha channel (eventually this feature will be released on the Stable channel).  I started with a Single View App based on the Universal Storyboard template.

SimpleMvvm-Univ-Storyboard

This allowed me to create two storyboards, one for iPhone and the other for iPad.  The visual designer is quite good – I could drag items from the toolbox and set properties.  Setting the Name property on an element results in a code-generated property representing the element in the view controller code-behind class, which is needed to wire up data binding.

SimpleMvvm-Storyboard-Designer

To be able to bind UI elements to view model properties, there are a number of steps that need to be performed.  Data binding takes place using classes provided by the MvvmCross “Core” NuGet package.  Luckily, the Simple Mvvm template already contains most of the necessary code, including a BindingSetup class for initializing the IOC container and registering the binding builder, as well as code in the view controller class for setting the view model as the DataContext.  The only code you’ll need to write is for binding each element to a corresponding view model property from within the ViewDidLoad method.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    // Bindings setup helper
    var bindingSet = this.CreateBindingSet<SimpleMvvm_iOSViewController, CustomerViewModel>();

    // Properties
    if (BannerLabel_iPhone != null)
        bindingSet.Bind(BannerLabel_iPhone).To(vm => vm.BannerText);

    // Command
    if (NewCustomerButton_iPhone != null)
        bindingSet.Bind(NewCustomerButton_iPhone).To(vm => vm.NewCustomerCommand);

    // Apply bindings
    bindingSet.Apply();
}

In case you don’t have the Xamarin Business Edition with VS support, you will need to use the Mac version of Xamarin Studio (the Windows version of Xamarin Studio does not currently support iOS development).  Then you will need to add the Simple Mvvm Toolkit and MvvmCross Core NuGet packages (first enable the NuGet add-in for Xamarin Studio on the Mac), and manually copy code from the Simple Mvvm iOS template.

In my next blog post I’ll dive into using Simple MVVM Toolkit for developing Android applications using Xamarin.  Before long, you’ll be on your way to building that next killer app for iOS, Android and Windows.  All the best!

About Tony Sneed

Married with three children.
This entry was posted in Technical and tagged . Bookmark the permalink.

9 Responses to Android and iOS Development with Simple MVVM Toolkit? Yes you can!

  1. Pingback: Baby Steps on Android with Xamarin–Part 5 - Mike Taulty's Blog - Mike Taulty's Blog

  2. As this uses MVVMCross, are we able to use the MVVMCross plugins as well?

  3. Sachin Agrawal says:

    Wondering if there is a sample project Xamarin.Android using MVVMLight?

  4. Alex Rainman says:

    Tony, i follow your steps and examples but bindings not working on Xamarin.iOS unified.

    vm = null

    Any help?

    • Alex Rainman says:

      I am trying to find a simple Mvvm framework i can use with Xamarin and PCL and your seems to be good but Bind not working 😦

      • Tony Sneed says:

        If your view model is null, it’s possible you did not set up your locator properly. Have you downloaded the samples to see how it works there?

  5. Pingback: Baby Steps on Android with Xamarin–Part 5 | IndaSoft

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s