Showing Forms Page In Xamarin Native

Yes, you read it right. Now, you can display forms page in Xamarin native. If you want to display the Forms page in Android or iOS in the native application, all you need is a new NuGet package 3.0.0.100-embeddingpreview. First, create a sample Xamarin native app.

After that, add one Forms project to the Solution. Now, this will be how your solution looks.



Now, delete all Forms related projects except Forms PCL project. So, in this case, I am deleting FormsCore.Android, FormsCore.iOS. Now, you will have four projects in total.

Right-click FormsCore (which is your forms project) and select NuGet Package Manager. Select "Settings" at the right top corner and add the new settings and add a name that you wish and make sure that the source is below URL.

https://www.myget.org/F/xamarinforms-dev/api/v3/index.json”

Now, search Xamarin.Forms and select the below one and install to all projects.

For now, I’m showing how to display Forms page in native Android. Just right click References>Projects.

Add FormsCore, as shown below.

Now, all the setup is done, we need to create a Forms page to display in the native projects.

editFor now, I’m using MainPage.xaml which is created by default in FormsCore.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FormsCore"
             BackgroundColor="White"
             x:Class="FormsCore.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="This is Forms Page Displaying native Project"
                   TextColor="Pink"
                   FontSize="45"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Just write the UI that you want to display.

Now, go to Forms Native.Android (Your native project).

Add Xamarin.Android.Support.Fragment from NuGet Package Manager since we are displaying Forms page as Fragment in MainActivity.

MainActivity UI

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:fitsSystemWindows="true"
      android:weightSum="100"
      android:orientation="vertical"
      android:layout_height="match_parent">
  <Button
      android:layout_weight="10"
      android:id="@+id/btnshowforms"
      android:text="Show History"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
  <FrameLayout
      android:layout_weight="90"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:minWidth="25px"
      android:minHeight="25px"
      android:id="@+id/myframe">
  </FrameLayout>
</LinearLayout>

MainActivity Backend Code

using System;

using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Android.Support.V4.App;
using FormsCore;
using Xamarin.Forms.Platform.Android;

namespace FormsNative.Droid
{
    [Activity (Label = "FormsNative.Android", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Android.Support.V4.App.FragmentActivity
    {

        private Android.App.Fragment _FormsPage;
        private Button btnshowFormsPage;
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            SetContentView(Resource.Layout.Main);
            btnshowFormsPage = FindViewById<Button>(Resource.Id.btnshowforms);
            btnshowFormsPage.Click += showFormsPage_Click;

        }

        private void showFormsPage_Click(object sender, EventArgs e)
        {


            if (_FormsPage == null)
            {
                // #1 Initialize For Android(this will be different for other platforms)
                // iOS
                //Forms.Init()
                //var iosViewController = new MyFormsPage().CreateViewController();

                //// UWP
                //Forms.Init(e);
                //var uwpElement = new MyFormsPage().CreateFrameworkElement

                Xamarin.Forms.Forms.Init(this, null);
                // #2 Use it
                _FormsPage = new MainPage().CreateFragment(this);
            }


            // And push that fragment onto the stack
            Android.App.FragmentTransaction ft = FragmentManager.BeginTransaction();

            ft.AddToBackStack(null);
            ft.Replace(Resource.Id.myframe, _FormsPage, "FormsPage");

            ft.Commit();
        }
    }
}

Now, we are all set to display our Forms page as fragment in MainActivity.

Please comment below with any doubts or suggestions.