Unleashed: Embedding Xamarin.Forms in Xamarin Native

David Ortinau


If you’re anything like me, when you’re ready to start coding a new application you face the question, “Xamarin Native or Xamarin.Forms?” The only correct answer should be “yes”. In fact, I want to show you how this shouldn’t be a choice at all; you can just start coding with total confidence that you’re on the right path.

Introducing Xamarin.Forms Embedding

At Microsoft Build 2017 we announced Xamarin.Forms Embedding, the ability to take any ContentPage and add it to your native applications.

At its core, Xamarin.Forms is a shared UI toolkit that gives you the ability to write a single UI to target Android, iOS, and UWP. It also provides services to empower rapid application development such as navigation, dependency management, and messaging. With that, you may write your entire application in Xamarin.Forms and never need to touch the underlying native OS layers. But there is an underlying layer!

Xamarin.Forms is built upon the foundation of Xamarin.iOS and Xamarin.Android, our top of the line solution for producing highly performant native applications with 100% access to platform APIs.


Let’s see how this looks on iOS.

Adding A Xamarin.Forms Page to Xamarin.iOS

The weather has been a big story in my hometown of St. Louis this past month, with severe rain and flooding, so naturally, I’m obsessed with what’s going on outdoors. Looking at the Xamarin Weather sample app, you’ll see we have Android, iOS, and UWP native applications.

While it’s fine for searching ad hoc, I wanted to store search history and compare locations. I’ll show you how I did this on iOS and shared this across all three platforms using Xamarin.Forms.

I added a new Shared Project (or PCL) to host the Xamarin.Forms page. As a side note, you could put a ContentPage directly into your native project and write your entire Xamarin native application using XAML for your UI.

The Xamarin.Forms project and each platform project needs a reference to the early pre-release Xamarin.Forms 3.0 package. In the new shared project I have my HistoryPage.xaml and (for demo simplicity) I’ve set my BindingContext to the page. An MVVM pattern would work perfectly fine here as well.

As you review this XAML, you’ll note there’s nothing special going on here; nothing different from if this were a Xamarin.Forms application from top to bottom. This XAML now works everywhere in Xamarin. That’s powerful!

You get full use of images and custom fonts here, as you would expect. Below in the code you’ll see you can use XAML Compilation to pre-compile the XAML, MessagingCenter for messaging, and all your data bindings work.

To use HistoryPage in the Xamarin.iOS application, I now only need to do two things:

  1. Initialize Forms with Forms.Init().
  2. Add the page to my view.

Note the returned value of the method CreateViewController() is UIViewController. How you interact with that native control from this point follows the same rules as if you had made it a UIViewController from the start—because you did! On Android CreateFragment(*Context*) returns the native Fragment, and on UWP CreateFrameworkElement() returns the native FrameworkElement.

What’s Coming Next

With your help, we’ll continue to validate our implementation and make sure it’s all working as needed. Of the non-UI parts of Xamarin.Forms, the NavigationService is not supported outside of a Xamarin.Forms application, whereas DependencyService and MessagingCenter are fully operational.

There is work yet to be done here. Right now the ContentPage is fully supported, but we also think we can do this at the control (and custom control) level. We need to look closely at Application.Resources and shared styling. We’re also looking at our templates and IDE support for making it easy and elegant to use Xamarin.Forms everywhere.

Start Embedding Today!

The Xamarin.Forms 3.0 preview of Embedding is published to a custom NuGet feed. To get it:

  • Add a new source to your NuGet Manager: https://www.myget.org/F/xamarinforms-dev/api/v3/index.json
  • Check Pre-Release
  • Select and install the package with the feature name “Embedding” –

The source for this Weather demo application code is available on GitHub: https://github.com/davidortinau/build2017-new-in-xamarin-forms

As you can see, you can start with Xamarin.iOS, Xamarin.Android, and UWP and bring in Xamarin.Forms anywhere it benefits you. Or you can start with Xamarin.Forms and eventually migrate to Xamarin.iOS, Xamarin.Android, UWP, and everywhere else Xamarin.Forms take you in the future. Now you can do more and use your code in even more fantastic ways!

This is a Preview capability, so we need your feedback! Join us in the forums and please share your experience with us.

David Ortinau
David Ortinau

Senior Program Manager, Mobile Developer Tools

Follow David   

No Comments.