Getting Started with Xamarin Forms Labs (XAML, MVVM and IOC)

10 Flares Twitter 0 Facebook 0 StumbleUpon 10 Google+ 0 LinkedIn 0 10 Flares ×

Xamarin Forms Labs

Xamarin Forms Labs is one of the main open source projects currently out there for Xamarin.Forms – this article is a simple step in getting the very basics up and running.

What I want to do here is provide a decent resource that shows how to get started with Xamarin Forms Labs. If I’m honest, one of the biggest issues with the project is that the documentation is poor. There is some documentation, but its often not up to date, often doesn’t cover the topics well enough and in general is quite lacking. So this article should get you up and running!

The full sample projects are available on GitHub.

What is Xamarin Forms Labs

I don’t want to spend too much time going over background information, but I feel I should give some explanation as to what Xamarin Forms Labs is!

Xamarin Forms Labs is a significant open source project that brings together multiple building blocks and components for building Xamarin Forms projects. Some of the things it offers are:

  • An MVVM framework including IOC (inversion of control) and a view factory.
  • Several plugins for things such as serialization, dependency injection containers like autofac
  • Various application services for interacting with the device, such as the accelerometer, camera and many more
  • An ever expanding list of controls such as a calendar, checkbox, image button and auto-complete control.

All in all its a great project with tons to offer. I’m a great believer in not re-inventing the wheel, so there seems little point in rolling your own MVVM framework when there’s one freely available. What if its missing a feature or has a bug – then you can add the feature or fix the bug and contribute to the community!

What we’ll cover

This article will cover

  • Adding Xamarin Forms Labs to your Xamarin Forms project
  • Setting your MVVM structure for your project
  • Creating your first XAML view and associated ViewModel (with data binding)
  • Using the ViewFactory
  • Setting up IOC with the SimpleContainer

This article and source code was written with:

  • Xamarin.Forms 1.3.4.6332
  • XLabs Forms 2.0.5530

Getting Started with XAML, MVVM and IOC

So to get started you need to create a Xamarin Forms solution, choose the “Blank App (Xamarin Forms Portable)” – I called my solution “Codenutz.XFLabs.Basics”. The getting started with xamarin and visual studio article goes into more detail about the project templates. In the end the solution structure should look something like this:

Solution Structure

Once you have this we first want to get our core “Codenutz.XFLabs.Basics” project set-up.

Setting up the core project

Whilst there are several steps here, but its actually pretty straight forward:

  1. Add the Xamarin.Forms.Labs nuget package: Open the Package Manage Console and use Install-Package XLabs.Forms -ProjectName Codenutz.XFLabs.Basics (or add via the nuget package manager tool)
  2. Create the View and ViewModel folders
  3. Create the MainViewModel
    • Add a class to the ViewModel folder called “MainViewModel”
    • The class should inherit from “ViewModel” (found in namespace XLabs.Forms.Mvvm)
    • Add a public property called Message, with a backing field (called _message). Ensure the property setter uses SetProperty(ref _message, value)
    • Add a constructor that sets the message property to something (I used “Hello Xamarin Forms Labs MVVM Basics”)
  4. Create the MainView
    • Add a new item to the View folder of type “Forms Xaml Page” called “MainView”
    • A label will probably be there automatically, if not add one
    • Change the label Text binding to: Text=”{Binding Message}”
  5. Register the View with the ViewFactory
    • In the App.cs add a private method call RegisterViews
    • Within that method register the View and ViewModel in the static ViewFactory like this ViewFactory.Register<MainView,MainViewModel>();.(Namespace: XLabs.Forms.Mvvm.ViewFactory)
    • In the App.cs constructor remove all code
    • Add a call to RegisterViews
    • Add a call setting main page equal to the result of a call to the ViewFactory (wrapped in a NavigationPage). i.e. MainPage = new NavigationPage((Page)ViewFactory.CreatePage<MainViewModel, MainView>());

Now we need to set-up each of the individual device projects – the way to do this is pretty similar for Android, iOS and Windows Phone.

Setting up the Android project

  1. Add the Xamarin.Forms.Labs nuget package: Open the Package Manage Console and use Install-Package XLabs.Forms -ProjectName Codenutz.XFLabs.Basics.Droid (or add via the nuget package manager tool)
  2. Update the MainActivity class
    • Change the base class to XFormsApplicationDroid (namespace XLabs.Forms)
    • Add a private method called SetIoc that creates a SimpleContainer object and assigns it as the resolver using the Resolver.SetResolver method
    • Add the call top SetIoc before the LoadApplication call

You should now be able to build and run the android project

Setting up the iOS project

  1. Add the Xamarin.Forms.Labs nuget package: Open the Package Manage Console and use Install-Package XLabs.Forms -ProjectName Codenutz.XFLabs.Basics.iOS (or add via the nuget package manager tool)
  2. Update the AppDelegate class
    • Change the base class to XFormsApplicationDelegate (namespace XLabs.Forms)
    • Add a private method called SetIoc that creates a SimpleContainer object and assigns it as the resolver using the Resolver.SetResolver method
    • Add the call top SetIoc before the LoadApplication call

You should now be able to build and run the iOS project.

Setting up the Windows Phone project

  1. Add the Xamarin.Forms.Labs nuget package: Open the Package Manage Console and use Install-Package XLabs.Forms -ProjectName Codenutz.XFLabs.Basics.WinPhone (or add via the nuget package manager tool)
  2. Update the App class (App.xaml.cs)
    • Add a private method called SetIoc that creates a SimpleContainer object and assigns it as the resolver using the Resolver.SetResolver method.
    • The SetIoc method should also create a new XFormsAppWP (namespace XLabs.Forms.XFormsAppWP)
  3. At the end of the App.xaml.cs constructor, call SetIoc

Wrapping up

That’s it – you should now be able to build and deploy to all devices and make use of the MVVM framework. The SimpleCointainer is a very basic DI container, so in future posts I’ll show you how to leverage a more feature rich container like AutoFac or Ninject.

I’d love to hear if you’re using Xamarin Forms and Xamarin Forms Labs, and how you’re getting on. They’re 2 really exciting projects that I hope continue to grow, develop and become more robust. So drop me a comment, email or tweet!

The full sample projects are available on GitHub.

, , ,

  • This blog post is on this weeks XamarinWeekly.com newsletter. Issue #29 comes out tomorrow.

  • stfnilsson

    I use Mvvm Light instead, see https://github.com/stfnilsson/swapidappi

    • Mvvm Light is a great framework but I dont think it really replaces everything that Xamarin Forms Labs does.

      I would be interested in seeing a post explaining how to use Mvvm Light with Xamarin Forms Labs that would be really interesting, although I’m not sure whether it’d be worth doing or not?

  • George Cook

    Not sure what the difference is between XLabs.Forms and Xamarin.Forms.Labs.. both have nuget packages, both have similar classes – for me, I had zero joy getting the Xamarin.Forms.Labs projects to work. I’m about to start a project and would like to know which one to use. is XLabs official, have Xmarin absorbed it (hence the Xamarin.froms.Labs project). Thanks.

    • Hey George – I think they’re basically the same thing.

      Xamarin.Forms.Labs is the old package name – as I understand it stopped being updated some point last year. XLabs is the new package name, and continues to be worked on.

  • Xizor

    for WinRT? I try but this solution doesn’t work.

  • Darrell Tunnell

    Thanks for this article. One minor piece of feedback as it caused me some confusion when following along in Visual Studio. The code sample for app.cs is not correct – you mention immediately above it the correct code:

    But in the code sample itself you have:

    Which doesn’t compile, as it’s missing the second type argument!

  • mrtnkrstn

    Nice post! I need to pass a parameter to my ViewModel when it is constructed, how do I do this?

    Let’s say my ViewModel takes an int in its Constructor.

    1. I register my ViewModel and View:

    2. When I instantiate the View, what do I do? When I use this:

    I get an error:
    Default constructor not found for type MainViewModel

    Thanks!

    • Hey Martin

      The normal (as I understand it) way to pass parameters to your viewmodel using XLabs is to only use your constructor for injection (or have a default empty constructor) and pass in your arguments to an initialize method. This means you’ll need to add an initialize method to your viewmodel that accepts your parameter.

      For example, register like this

      And then create a page like this:

      So you pass the argument in the initialize expression.

  • Javier Pintor

    I have problems using XLabs MVVM and Messaging Center.

    I want to execute a method when the view appears, so I send a Message and I Subscribe this in the ViewModel constructor. This works ok.

    But when I come back and execute again the VM constructor, the code executed it two times, the next time: three times…

    I tried to Unsubscribe the Message with OnDisappearing() but doesn’t work.

    Any idea to fix it? Thanks.

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
10 Flares Twitter 0 Facebook 0 StumbleUpon 10 Google+ 0 LinkedIn 0 10 Flares ×