The key ingredient in cross-platform development with Xamarin is code sharing. Sharing native code is great, but we still have the issue of writing separate user interface code for each platform. The Windows Presentation Framework (WPF) is a presentation system which uses an XML-based language known as Extensible Application Markup Language (XAML). Xamarin.Forms uses WPF and the Model-View-View-Model (MVVM) paradigm to build native user interfaces from a single C# shared code base, whilst maintaining access to all native APIs on each platform.

The preceding diagram represents a native architecture. We keep all the sharable code Inside the Shared C# App Logic block (normally a shared project) for each platform project to access, i.e. the GalleryItem class would be kept here since it is shared between both projects.

In Xamarin Studio, let's start by setting up the platform projects. Go to File | New Solution and select a Xamarin.Forms app from the cross-platform menu on the left:

Once the project is created, you will see both an iOS and Android project created along with a PCL.

Let's create our first ContentPage in XAML, right-click on the PCL, create a new XAML ContentPage, and call it MainPage:

Xamarin.Forms provides the option to build user interfaces entirely in C#, but it is recommended you stick with XAML because it is a very powerful markup language. The code required for a XAML sheet is much smaller than a user interface in C#.

We also want to create a new folder called Pages and add MainPage to this folder.

Our first element on the page is a Grid. A Grid separates a layout by rows and columns based upon the entire size...

Let's also have a look at the project setup on the native side for iOS and Android. Open the AppDelegate.cs file; it should look like this:

    [Register ("AppDelegate")] 
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate 
    { 
        public override bool FinishedLaunching (UIApplication app, NSDictionary options) 
        { 
            global::Xamarin.Forms.Forms.Init (); 
 
            LoadApplication (new App ()); 
 
            return base.FinishedLaunching (app, options); 
        } 
    } 

Have a look at the super class:

global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate 

Since Xamarin.Forms 1.3.1 and the updated unified API, all our app delegate should be inheriting is Xamarin.Forms.Platform.iOS.FormsApplicationDelegate. We also have the standard FinishedLaunching function; in here we must call Forms.Init which will initialize...

Let's do the same for Android and set up Xamarin.Forms accordingly. Inside our Android project, open the MainActivity.cs class and look at the OnCreate function:

[Activity (Label = "SpeechTalk.Droid", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] 
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity 
    { 
        protected override void OnCreate (Bundle bundle) 
        { 
            base.OnCreate (bundle); 
 
            global::Xamarin.Forms.Forms.Init (this, bundle); 
 
            LoadApplication (new App ()); 
        } 
    } 

The MainActivity class must inherit Xamarin.Forms.Platform.Android.FormsApplicationActivity; we must call the super class OnCreate method before we initialize Xamarin.Forms and load in our new instantiated app class. That's all, we can now...

Now let's look at sharing our MainPage interface with Windows Phone.

We are going to be using Microsoft Visual Studio, so open it up and open the SpeechTalk solution file (SpeechTalk.sln) we created in Xamarin Studio. Portability between the two IDEs is very good; watch the solution port directly into Visual Studio and open your PCL file without any issues.

The iOS and Android projects may not be compatible as we created these in Xamarin Studio.

Now it's time to create a new Windows Phone project:

Unfortunately,...

The Inversion of Control (IoC) principle is very a useful technique when writing cross-platform applications.

Before we begin implementing the different native sides to this interface, let's first add in our IoC container to handle the abstraction. There are a few IoC containers that are free online; for this example we are going to use Autofac. Let's add the NuGet packages for the PCL, iOS, and Android projects:

Now that we have our IoC container, let's build the iOS implementation. For each platform, we want to create objects called Modules for registering abstracted interfaces. Let's add a new folder called IoC to the PCL project and add a new file called IoC.cs:

public static class IoC 
    { 
        public static IContainer Container { get; private set; } 
 
        private static ContainerBuilder builder; 
 
        public static void CreateContainer()  
        { 
            builder = new ContainerBuilder(); 
        } 
 
        public static void StartContainer() 
        { 
            Container = builder.Build()...

Each module will retrieve the current container used throughout the entire lifetime of your application. Inside the register function is where we register the class implementation of the text to speech interface. This will be done at the very start of the application before we load anything else.

Let's start first with adding the iOS module. Add a new folder in the iOS project called Modules, create a new file called iOSModule.cs, and paste in the following:

     
    public class IOSModule : IModule 
    { 
        public void Register(ContainerBuilder builer) 
        { 
            builer.RegisterType<TextToSpeech> ().As<ITextToSpeech> ().SingleInstance (); 
        } 
    } 

The next step is to add the iOS text to speech service. Add a new folder called Services and add a new file called TextToSpeech.cs. In this file, we are going to access the iOS AVSpeechSynthesizer:

public class TextToSpeech : ITextToSpeech...

Back in the PCL project, we are going to run through the concept of binding view models to views, displaying view model data, and propagating data changes through the INotifyPropertyChanged interface.

Let's begin with our MainPage.cs and complete the rest of the user interface for this page:

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    x:Class="SpeechTalk.Pages.MainPage" 
    BackgroundColor="White"> 
 
    <ContentPage.Content> 
 
    <Grid x:Name="Grid" RowSpacing="10" Padding="10, 10, 10, 10" VerticalOptions="Center"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions...

Now let's implement the IoC container and text to speech for Android. Start by creating a folder for the both the Android Modules and Services, add in two files to it, TextToSpeechDroid.cs and DroidModule.cs.

Let's start with the text to speech service; for TextToSpeechDroid.cs. And add the following:

public class TextToSpeechDroid :  Java.Lang.Object, ITextToSpeech, Android.Speech.Tts.TextToSpeech.IOnInitListener  
    { 
        private Android.Speech.Tts.TextToSpeech _speaker; 
 
        private string _toSpeak; 
 
        public void Speak (string msg) 
        { 
            var ctx = Forms.Context; 
            _toSpeak = msg; 
 
            if (_speaker == null)  
            { 
                _speaker = new Android.Speech.Tts.TextToSpeech (ctx, this); 
            }  
            else  
            { 
                var p = new Dictionary<string,string&gt...

Now for the IoC implementation. It works exactly the same as iOS; let's add the Android module:

    public class DroidModule : IModule 
    { 
        public void Register(ContainerBuilder builer) 
        { 
            builer.RegisterType<TextToSpeechDroid> ().As<ITextToSpeech> ().SingleInstance (); 
        } 
    } 

Easy, right?

Now we have to set up the IoC container in our MainActivity.cs class; simply copy the iOS function in the AppDelegate file called initIoC and paste this into the MainActivity class, replace the instantiation of the iOSModule with your DroidModule, then simply add the function call after the initialization of Xamarin.Forms:

protected override void OnCreate (Bundle bundle) 
        { 
            base.OnCreate (bundle); 
 
            global::Xamarin.Forms.Forms.Init (this, bundle); 
 
            InitIoC (); 
 
            LoadApplication (new App (...