{"id":31901,"date":"2017-06-02T11:38:59","date_gmt":"2017-06-02T18:38:59","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=31901"},"modified":"2019-04-04T08:32:53","modified_gmt":"2019-04-04T15:32:53","slug":"unleashed-embedding-xamarin-forms-xamarin-native","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/unleashed-embedding-xamarin-forms-xamarin-native\/","title":{"rendered":"Unleashed: Embedding Xamarin.Forms in Xamarin Native"},"content":{"rendered":"

\t\t\t\tIf 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 \u201cyes\u201d. 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\u2019re on the right path.<\/p>\n

Introducing Xamarin.Forms Embedding<\/h2>\n

At Microsoft Build 2017 we announced Xamarin.Forms Embedding<\/a>, the ability to take any ContentPage<\/code> and add it to your native applications.<\/p>\n

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.\u00a0With that, you may write your entire application in Xamarin.Forms and never need to touch the underlying native OS layers. But there is<\/em> an underlying layer!<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Let\u2019s see how this looks on iOS.<\/p>\n

Adding A Xamarin.Forms Page to Xamarin.iOS<\/h2>\n

The weather has been a big story in my hometown of St. Louis this past month, with severe rain and flooding, so naturally, I\u2019m obsessed with what\u2019s going on outdoors. Looking at the Xamarin Weather sample app<\/a>, you\u2019ll see we have Android, iOS, and UWP native applications.<\/p>\n

\"\"<\/p>\n

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

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

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

As you review this XAML, you\u2019ll note there\u2019s 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\u2019s powerful!<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             x:Class=\"Weather.Forms.HistoryPage\">\n    <Grid BackgroundColor=\"#002050\">\n        <Image Source=\"buildheader.jpg\" VerticalOptions=\"Start\" \/>\n        <StackLayout VerticalOptions=\"Fill\">\n            <StackLayout.Margin>\n                <OnIdiom x:TypeArguments=\"Thickness\">\n                    <OnIdiom.Phone>\n                        <OnPlatform x:TypeArguments=\"Thickness\">\n                            <On Platform=\"iOS\" Value=\"10,80,10,10\"><\/On>\n                            <On Platform=\"WinRT, UWP, Android\" Value=\"10\"><\/On>\n                        <\/OnPlatform>\n                    <\/OnIdiom.Phone>\n                    <OnIdiom.Tablet>\n                        <OnPlatform x:TypeArguments=\"Thickness\">\n                            <On Platform=\"iOS\" Value=\"10,80,10,10\"><\/On>\n                            <On Platform=\"WinRT, UWP, Android\" Value=\"10\"><\/On>\n                        <\/OnPlatform>\n                    <\/OnIdiom.Tablet>\n                    <OnIdiom.Desktop>\n                        <OnPlatform x:TypeArguments=\"Thickness\">\n                            <On Platform=\"WinRT, UWP\" Value=\"20\"><\/On>\n                        <\/OnPlatform>\n                    <\/OnIdiom.Desktop>\n                <\/OnIdiom>\n            <\/StackLayout.Margin>\n            <BoxView HeightRequest=\"120\"\/>\n            <Label Text=\"Your Places\">\n                <Label.TextColor>\n                        <OnPlatform x:TypeArguments=\"Color\">\n                            <On Platform=\"Android\" Value=\"GhostWhite\"><\/On>\n                            <On Platform=\"UWP, iOS\" Value=\"White\"><\/On>\n                        <\/OnPlatform>\n                <\/Label.TextColor>\n                <Label.FontSize>\n                    <OnPlatform x:TypeArguments=\"x:Double\">\n                        <On Platform=\"iOS\" Value=\"24\"><\/On>\n                        <On Platform=\"WinRT, UWP, Android\" Value=\"18\"><\/On>\n                    <\/OnPlatform>\n                <\/Label.FontSize>\n            <\/Label>\n            <ListView x:Name=\"HistoryItems\" VerticalOptions=\"Fill\" BackgroundColor=\"Transparent\">\n                <ListView.ItemTemplate>\n                    <DataTemplate>\n                        <ViewCell>\n                            <Grid>\n                                <Grid.ColumnDefinitions>\n                                    <ColumnDefinition Width=\"50\"><\/ColumnDefinition>\n                                    <ColumnDefinition><\/ColumnDefinition>\n                                    <ColumnDefinition Width=\"100\"><\/ColumnDefinition>\n                                <\/Grid.ColumnDefinitions>\n                                <Label Text=\"{Binding WeatherIcon}\" FontSize=\"18\" Grid.Column=\"0\" VerticalTextAlignment=\"Center\" TextColor=\"White\">\n                                    <Label.FontFamily>\n                                        <OnPlatform x:TypeArguments=\"x:String\">\n                                            <On Platform=\"UWP\" Value=\"\/Assets\/WeatherIcons.ttf#Weather Icons\"><\/On>\n                                            <On Platform=\"iOS\" Value=\"Weather Icons\"><\/On>\n                                            <On Platform=\"Android\" Value=\"WeatherIcons.ttf#Weather Icons\"><\/On>\n                                        <\/OnPlatform>\n                                    <\/Label.FontFamily>\n                                <\/Label>\n                                <Label Text=\"{Binding LocationName}\" Grid.Column=\"1\" VerticalOptions=\"Center\" TextColor=\"White\">\n                                    <Label.FontSize>\n                                        <OnPlatform x:TypeArguments=\"x:Double\">\n                                            <On Platform=\"iOS\" Value=\"18\"><\/On>\n                                            <On Platform=\"WinRT, UWP, Android\" Value=\"14\"><\/On>\n                                        <\/OnPlatform>\n                                    <\/Label.FontSize>\n                                <\/Label>\n                                <Label Text=\"{Binding PostalCode}\" VerticalOptions=\"Center\" TextColor=\"White\" Grid.Column=\"2\" VerticalTextAlignment=\"Center\">\n                                    <Label.FontSize>\n                                        <OnPlatform x:TypeArguments=\"x:Double\">\n                                            <On Platform=\"iOS\" Value=\"18\"><\/On>\n                                            <On Platform=\"WinRT, UWP, Android\" Value=\"14\"><\/On>\n                                        <\/OnPlatform>\n                                    <\/Label.FontSize>\n                                <\/Label>\n                            \n                            <\/Grid>\n                        <\/ViewCell>\n                    <\/DataTemplate>\n                <\/ListView.ItemTemplate>\n            <\/ListView>\n            <StackLayout Orientation=\"Horizontal\" HorizontalOptions=\"Center\">\n                <Label Text=\"{Binding PlatformName}\" TextColor=\"White\" VerticalTextAlignment=\"Center\">\n                    <Label.FontSize>\n                        <OnPlatform x:TypeArguments=\"x:Double\">\n                            <On Platform=\"iOS\" Value=\"24\"><\/On>\n                            <On Platform=\"WinRT, UWP, Android\" Value=\"18\"><\/On>\n                        <\/OnPlatform>\n                    <\/Label.FontSize>\n                <\/Label>\n                <Label TextColor=\"Red\" VerticalTextAlignment=\"Center\">\n                    <Label.Text>\n                        <OnPlatform x:TypeArguments=\"x:String\">\n                            <On Platform=\"UWP\" Value=\"\"><\/On>\n                            <On Platform=\"iOS\" Value=\"\"><\/On>\n                            <On Platform=\"Android\" Value=\"\"><\/On>\n                        <\/OnPlatform>\n                    <\/Label.Text>\n                    <Label.FontSize>\n                        <OnPlatform x:TypeArguments=\"x:Double\">\n                            <On Platform=\"iOS\" Value=\"24\"><\/On>\n                            <On Platform=\"WinRT, UWP, Android\" Value=\"18\"><\/On>\n                        <\/OnPlatform>\n                    <\/Label.FontSize>\n                    <Label.FontFamily>\n                        <OnPlatform x:TypeArguments=\"x:String\">\n                            <On Platform=\"UWP\" Value=\"Segoe MDL2 Assets\"><\/On>\n                            <On Platform=\"iOS\" Value=\"FontAwesome\"><\/On>\n                            <On Platform=\"Android\" Value=\"FontAwesome.otf#FontAwesome\"><\/On>\n                        <\/OnPlatform>\n                    <\/Label.FontFamily>\n                <\/Label>\n                <Label Text=\" Xamarin.Forms\" VerticalTextAlignment=\"Center\" TextColor=\"White\">\n                    <Label.FontSize>\n                        <OnPlatform x:TypeArguments=\"x:Double\">\n                            <On Platform=\"iOS\" Value=\"24\"><\/On>\n                            <On Platform=\"WinRT, UWP, Android\" Value=\"18\"><\/On>\n                        <\/OnPlatform>\n                    <\/Label.FontSize>\n                <\/Label>\n            <\/StackLayout>\n        \n        \n        <\/StackLayout>\n    <\/Grid>\n<\/ContentPage><\/pre>\n
You get full use of images<\/a> and custom fonts<\/a> here, as you would expect. Below in the code you\u2019ll see you can use XAML Compilation<\/a> to pre-compile the XAML, MessagingCenter<\/code> for messaging<\/a>, and all your data bindings<\/a> work.<\/p>\n
[XamlCompilation(XamlCompilationOptions.Compile)]\npublic partial class HistoryPage : ContentPage\n{\n\tpublic const string HistoryItemSelected = \"HistoryItemSelected\";\n\n\tpublic HistoryPage()\n\t{\n\t\tInitializeComponent();\n\n\t\tHistoryItems.ItemsSource = HistoryRecorder.LocationHistory;\n\t\tHistoryItems.ItemTapped += HistoryItemsOnItemTapped;\n\n\t\tBindingContext = this;\n\t}\n\n\tpublic string PlatformName => $\"{Device.RuntimePlatform} \";\n\n\tprivate void HistoryItemsOnItemTapped(object sender, ItemTappedEventArgs itemTappedEventArgs)\n\t{\n\t\tvar historyItem = itemTappedEventArgs.Item as HistoryItem;\n\n\t\tif (historyItem == null)\n\t\t{\n\t\t\treturn;\n\t\t}\n\n\t\tMessagingCenter.Send(this, HistoryItemSelected, historyItem.PostalCode);\n\t}\n}<\/pre>\n
To use HistoryPage<\/code> in the Xamarin.iOS application, I now only need to do two things:<\/p>\n
    \n
  1. Initialize Forms with Forms.Init()<\/code>.<\/li>\n
  2. Add the page to my view.<\/li>\n<\/ol>\n
    namespace WeatherApp.iOS\n{\n    [Register (\"AppDelegate\")]\n    public class AppDelegate : UIApplicationDelegate\n    {\n        UINavigationController _navigation;\n        UIViewController _historyViewController;\n        \n        ...\n        \n        public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)\n        {\n            \/\/ #1 INITIALIZE\n            Forms.Init();\n            ...\n        }\n\n        public void ShowHistory()\n        {\n            if (_historyViewController == null)\n            {\n                \/\/ #2 ADD\n                _historyViewController = new HistoryPage().CreateViewController();\n            }\n\n            _navigation.PushViewController(_historyViewController, true);\n        }\n    }\n}<\/pre>\n
    Note the returned value of the method CreateViewController()<\/code> is UIViewController<\/code>. 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*)<\/code> returns the native Fragment<\/code>, and on UWP CreateFrameworkElement()<\/code> returns the native FrameworkElement<\/code>.<\/p>\n
    \"\"<\/p>\n
    What\u2019s Coming Next<\/h2>\n
    With your help, we’ll continue to validate our implementation and make sure it\u2019s all working as needed. Of the non-UI parts of Xamarin.Forms, the NavigationService<\/code> is not supported outside of a Xamarin.Forms application, whereas DependencyService<\/code> and MessagingCenter<\/code> are fully operational.<\/p>\n
    There is work yet to be done here. Right now the ContentPage<\/code> 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<\/code> and shared styling. We’re also looking at our templates and IDE support for making it easy and elegant to use Xamarin.Forms everywhere.<\/p>\n
    Start Embedding Today!<\/h2>\n
    The Xamarin.Forms 3.0 preview of Embedding is published to a custom NuGet feed. To get it:<\/p>\n