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

0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 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.

, , ,

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