Xamarin Forms ch2 - Xlabs

Xamarin.iOS and Xamarin.Droid proved that C# code can be used to develop mobile apps, and majority of business logic written in c# can be shared on both mobile platforms development. However, the development of User Interface is still heavily depending on platform‘s specific code, such as storyboard on iOS and XML for android.  Xamarin Form is an approach to build native UIs for iOS, android and Windows from a single, shared C# code base.

Xamarin Forms Labs is a open source project that aims to provide a powerful and cross platform set of controls and helpers tailored to work with Xamain Forms. The package shipped with many useful and ready to use functions, such as custom controls (extendedEntry, GridView, WebImage), services (Camera, Device, Display) and helpers including IOC and MVVM. In this section, I will look into the use of these helpful tools and see how it helps with the development.

1. Add package

The first step is to add XLabs package to the project. You can find the instruction at my previous tutorial. And do remember to add those package to all three of you projects (SampleArchitecture, SampleArchitecture.iOS, SampleArchitecture.Droid).

2. MVVM and Autofac support in Xlabs

2.1 Create home view and viewModel

HomeViewModel should inherite from Xlabs.Forms.Mvvm.ViewModel.

3.2 Register View

XLabs provides us with ViewFactory to combine the View with corresponding ViewModel.

At App.cs

 1 public App ()
 2 {
 3     RegisterViews ();
 4
 5     MainPage = new NavigationPage ((Page)ViewFactory.CreatePage<HomeViewModel, Home>());
 6 }
 7
 8 private void RegisterViews()
 9 {
10     ViewFactory.Register<Home, HomeViewModel> ();
11 }

3.3 Setup up Android Project

Update MainActivity class

(1) Change base class to XLabs.Froms.XFormsApplicationDroid

(2) Set resolver with Autofac

 1     public class MainActivity : XLabs.Forms.XFormsApplicationDroid
 2     {
 3         protected override void OnCreate (Bundle bundle)
 4         {
 5             Xamarin.Insights.Initialize (global::SampleArchitecture.Droid.XamarinInsights.ApiKey, this);
 6             base.OnCreate (bundle);
 7             global::Xamarin.Forms.Forms.Init (this, bundle);
 8
 9             if (!Resolver.IsSet) {
10                 SetIoc ();
11             }
12
13             LoadApplication (new App ());
14         }
15
16         private void SetIoc()
17         {
18             var container = new Autofac.ContainerBuilder ();
19             Resolver.SetResolver (new AutofacContainer (container.Build ()));
20         }
21     }

3.4 Set up iOS project

(1) Change AppDelegate base class to Xlabs.Forms.XFormsApplicationDelegate

(2) set resolver with Autofac

    [Register ("AppDelegate")]
    public partial class AppDelegate : XLabs.Forms.XFormsApplicationDelegate
    {
        public override bool FinishedLaunching (UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init ();

            if (!Resolver.IsSet) {
                SetIoc ();
            }

            LoadApplication (new App ());

            return base.FinishedLaunching (app, options);
        }

        private void SetIoc()
        {
            var container = new Autofac.ContainerBuilder ();
            Resolver.SetResolver (new AutofacResolver (container.Build()));
        }
    }

Now the project should be compiled successfully (cmd + k). And if you run the project, you will be able to see text "hello xamarin" in the center of the mobile screen.