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.

Xamarin

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

Xamarin

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.

Xamarin

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.

Xamarin

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

Add FormsCore, as shown below.

Xamarin

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.

Xamarin

Please comment below with any doubts or suggestions.