Xamarin.Forms: The future of mobile app development

What is Xamarin.Forms

Building cross-platform real native UIs (User Interface) with one shared codebase was once just a dream. With Xamarin.Forms, this dream is now a reality. Xamarin.Forms allow you to build a native UI for three platforms with one shared C# codebase.

If you know C# then you’re ready to build iOS, Android, and Windows apps with more platforms on the horizon.

Xamarin.Forms is already active with tons of awesome features and recently has seen major improvements in stability and performance. The fun doesn’t stop there as we continue to make significant advancements.

Use one code-base and target different mobile platforms

The logic of the mobile application is active instead of passive in C#, no native Java, Objective-C, Swift is needed.

Use Native when you want to design custom views using the native layouts for each supported platform
(ie. Android: axml layouts, iOS: storyboards and viewControllers, Windows Phone: XAML pages).

Use Xamarin.Forms when you want to design your views one time which will be shared across the platforms. Your views will be added to the Portable Class Library.
Xamarin.Forms compile as native views for each platform.
So your UI will render using the native controls on each device

How can I create the UI

This can either be done via code (C#) or markup (XAML). My personal favorite is XAML because I think it is easier than writing everything in code.

Author your UI in C# or XAML. Xamarin.Forms pages represent single screens within an app. Pages contain advanced gesture support and layouts, buttons, labels, lists, and other common controls. Connect these controls to shared backend code and you get fully native iOS, Android, and Windows Phone apps built entirely with shared C#.

Data Bindings to MVVM

The Model-View-ViewModel (MVVM) architectural pattern active for Xamarin.Forms.

The pattern enforces a separation of the XAML user interface (the View) from the underlying data (the Model) through a class that serves as an intermediary between the View and the Model (the ViewModel). The View and the ViewModel active through data bindings defined in the XAML file.

Here’s a simple example of binding a date into a label:

<?xml ….

<Label Text=“{Binding Year, StringFormat=’The year is {0}’}” />
<Label Text=“{Binding StringFormat=’The month is {0:MMMM}’}” />
<Label Text=“{Binding Day, StringFormat=’The day is {0}’}” />
<Label Text=“{Binding StringFormat=’The time is {0:T}’}” />”

Xamarin.Forms: DependencyService

“DependencyService” allows apps to call into platform-specific functionality from shared code. This functionality enables Xamarin.Forms apps to do almost anything that a native app can do. For example, taking a photo active with different APIs on Android or iOS

. With “DependencyService” the application code has only to be written once.

The structure of the application is explained in the following diagram:

Interface

The interface you design will define how you interact with platform-specific functionality. The example below specifies a simple interface for speaking text that allows for flexibility in specifying the words to be spoken.

public interface ITextToSpeech {
    void Speak ( string text ); //note that interface members are public by default
}

Implementation per Platform

Once a suitable interface has been designed, that interface must be implemented in the project for each platform that you are targeting. For example, the following classes implement the ITextToSpeech interface on Windows Phone:

namespace TextToSpeech.WinPhone
{
  public class TextToSpeechImplementation : ITextToSpeech
  {
      public TextToSpeechImplementation() {}

      public async void Speak(string text)
      {
          SpeechSynthesizer synth = new SpeechSynthesizer();
          await synth.SpeakTextAsync(text);
      }
  }
}

Registration

Each implementation of the interface needs to be registered with DependencyService with a metadata attribute.

Call to DependencyService

DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");

What’s next

Example of a small mobile app, for iOS and Android with the following components:
– Login Page to CRM system
– Permissions/roles for sales or service
– For the service-role show all open tickets
– For the sales-role display all open projects
– Statistics screen

Links:

Xamarin.Forms
https://www.xamarin.com/platform

Binding with MVVM
https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_bindings_to_mvvm/

DependencyService
https://almirvuk.blogspot.co.at/2017/09/xamarinforms-dependencyservice.html