Embedding Xamarin.Forms With Xamarin.Native

embedding Xamarin Forms Content Pages inside your Xamarin.Native Project

Introduction 

We love Xamarin. When we think of a new project, the first thing that comes into our mind is “Xamarin Forms” or “Xamarin Native”. With Xamarin.Forms, we can create almost any kind of App. The easy XAML designs and huge community forums compel you to choose Xamarin.Forms always.

But in certain cases, we may opt to choose Xamarin.Native approach. It depends on complexity, native features, etc.

Here comes another milestone from Xamarin. Yes, you can now embed Xamarin Forms Content Pages inside your Xamarin.Native Project.

Here are the steps involved,

1. Add Xamarin.Forms nugget package inside your native projects (Android or iOS or UWP)
2. Add Content Page to the native project.
3. Call the Forms.Init method from native startup file (Eg: Android- MainActivity or iOS – AppDelegate. Construct ContentPage instance and convert it to the native instance using one of the following extension methods: CreateViewController for iOS, CreateSupportFragment for Android, or CreateFrameworkElement for UWP.
4. Navigate it using Navigation APIs provided by each platform.

Adding Xamarin.Forms Page into Xamarin.Android

Let’s jump on to Android and learn how to embed a ContentPage in Xamarin Android app.

The fundamental idea is to convert any ContentPage into Fragment; using Fragment Manager we can use the same.

As a first step, we should create an XML file with a Fragment. So we can swap the content page with the Fragment.

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
<include
  android:id="@+id/toolbar"
  layout="@layout/toolbar" />
<FrameLayout
    android:layout_below="@id/toolbar"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/fragment_frame_layout" />
</LinearLayout>

As a second step, create your own ContentPage. This could be anything.

The third step is to consume the ContenPage using the below few lines of code.

Mainactivity.cs

protected override void OnCreate(Bundle bundle) {
    //#Step 1:- Initialize
    Forms.Init(this, bundle);
    SetContentView(Resource.Layout.Main);
    //#Step 2:- Usage
    //Here is the magic lines of code that converts your contentpage into fragment
    Android.Support.V4.App.Fragment mainPage = new MyContentPage().CreateSupportFragment(this);
    SupportFragmentManager.BeginTransaction().Replace(Resource.Id.fragment_frame_layout, mainPage).Commit();
}

Adding Xamarin.Forms Page into Xamarin.iOS

This is also pretty straightforward!

[Register("AppDelegate")]
public class AppDelegate: UIApplicationDelegate {
        public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions) {
            //#Step 1:- Initialize
            Forms.Init();
            //#Step 2:- Usage
            UIViewController mainPage = new MyContentPage().CreateViewController();
            _navigation = new AppNavigationController(mainPage);
            return true;
        }
        //The below code can be called from anyother button click; or listview item click etc from your Forms Page.
        public void NavigateToMyNextPage(note) {
            var myContentPage2 = new MyContentPage2().CreateViewController();
            _navigation.PushViewController(myContentPage2, true);
        }

I didn’t cover UWP in this article. But UWP implementation is also straightforward. That’s it! Way to go!

Happy Coding :)