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”

Xamarin

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.

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:FormsCore"
  5. BackgroundColor="White"
  6. x:Class="FormsCore.MainPage">
  7. <ContentPage.Content>
  8. <StackLayout>
  9. <Label Text="This is Forms Page Displaying native Project"
  10. TextColor="Pink"
  11. FontSize="45"
  12. VerticalOptions="CenterAndExpand"
  13. HorizontalOptions="CenterAndExpand" />
  14. </StackLayout>
  15. </ContentPage.Content>
  16. </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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:fitsSystemWindows="true"
  6. android:weightSum="100"
  7. android:orientation="vertical"
  8. android:layout_height="match_parent">
  9. <Button
  10. android:layout_weight="10"
  11. android:id="@+id/btnshowforms"
  12. android:text="Show History"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content" />
  15. <FrameLayout
  16. android:layout_weight="90"
  17. android:orientation="vertical"
  18. android:layout_width="match_parent"
  19. android:layout_height="match_parent"
  20. android:minWidth="25px"
  21. android:minHeight="25px"
  22. android:id="@+id/myframe">
  23. </FrameLayout>
  24. </LinearLayout>

MainActivity Backend Code

  1. using System;
  3. using Android.App;
  4. using Android.Content;
  5. using Android.Runtime;
  6. using Android.Views;
  7. using Android.Widget;
  8. using Android.OS;
  9. using Android.Support.V4.App;
  10. using FormsCore;
  11. using Xamarin.Forms.Platform.Android;
  13. namespace FormsNative.Droid
  14. {
  15. [Activity (Label = "FormsNative.Android", MainLauncher = true, Icon = "@drawable/icon")]
  16. public class MainActivity : Android.Support.V4.App.FragmentActivity
  17. {
  19. private Android.App.Fragment _FormsPage;
  20. private Button btnshowFormsPage;
  21. protected override void OnCreate (Bundle bundle)
  22. {
  23. base.OnCreate (bundle);
  25. // Set our view from the "main" layout resource
  26. SetContentView (Resource.Layout.Main);
  28. // Get our button from the layout resource,
  29. // and attach an event to it
  30. SetContentView(Resource.Layout.Main);
  31. btnshowFormsPage = FindViewById<Button>(Resource.Id.btnshowforms);
  32. btnshowFormsPage.Click += showFormsPage_Click;
  34. }
  36. private void showFormsPage_Click(object sender, EventArgs e)
  37. {
  40. if (_FormsPage == null)
  41. {
  42. // #1 Initialize For Android(this will be different for other platforms)
  43. // iOS
  44. //Forms.Init()
  45. //var iosViewController = new MyFormsPage().CreateViewController();
  47. //// UWP
  48. //Forms.Init(e);
  49. //var uwpElement = new MyFormsPage().CreateFrameworkElement
  51. Xamarin.Forms.Forms.Init(this, null);
  52. // #2 Use it
  53. _FormsPage = new MainPage().CreateFragment(this);
  54. }
  57. // And push that fragment onto the stack
  58. Android.App.FragmentTransaction ft = FragmentManager.BeginTransaction();
  60. ft.AddToBackStack(null);
  61. ft.Replace(Resource.Id.myframe, _FormsPage, "FormsPage");
  63. ft.Commit();
  64. }
  65. }
  66. }

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

Xamarin

Xamarin

Please comment below with any doubts or suggestions.