Native Views in XAML from a PCL

Native Views are views native to each platform and they can be embedded in a Shared or PCL project in XAML. As of Xamarin Forms 2.3.3+ you can take controls only native to one platform and place them in a Xamarin Forms view. Its actually incredibly easy.

Caveats

Before we get started here are some things to remember.

  • You can not enable XamlC on any page that has a native view.
  • You can not use x:Name on any native view control

If you do any of the above, it creates a field with its type in the code behind. This obviously won’t work, because the control type does not exist in a PCL.

iOS Native View

Adding a native iOS control is very easy. Add the page attribute as shown below, along with a native control.

<?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:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
             x:Class="ExrinSample.View.LoginView">
    <ios:UISlider />
</ContentPage>

iosslider

Android Native View

Adding a native view to Android has one additional step, because Android controls require the Context to be passed through to the control constructor. As such, there are two xmlns definitions you need to add, and you must then pass the static Xamarin Forms Context through to the control using the x:Arguments property.

<?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:android="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
             xmlns:androidForms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.Platform.Android;targetPlatform=Android"
             x:Class="ExrinSample.View.LoginView">
    <ContentView HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <android:CheckBox x:Arguments="{x:Static androidForms:Forms.Context}" />
    </ContentView>
</ContentPage>

If you don’t pass in the Android Context, you will receive the error: System.MissingMethodException: Default constructor not found for type Android.Widget.xxxxx.

androidcheckbox

UWP Native View

UWP is similar to iOS with one xmlns attribute and the native view.

<?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:ExrinSample.Base"
             xmlns:uwp="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
             x:Class="ExrinSample.View.LoginView">
    <uwp:CalendarDatePicker />
</ContentPage>

uwpcalendar

Behavior

You may also be wondering what happens when you have a view with an iOS type on it but run it on Android. The answer is nothing. The iOS controls are ignored and it only shows Xamarin Forms controls and Android controls, hence there is no need to use OnPlatform.

DataBinding also occurs the same as regular Xamarin Forms controls. This is amazing when you think about it. Just bind the property in your native control to a property in your ViewModel as you normally would.

Customizing Controls

Next you may ask how you could add a renderer to these controls, since they aren’t exactly Xamarin Forms controls. Renderers aren’t available for native controls because they don’t need to be rendered, they are already native. The approach you take is to create a Custom Control in your native platform and perform any modifications there.

public class CustomUISlider: UISlider
{

    // Do anything you want in the constructor, overrides or events available.

}

Then use this custom control as your native control in your XAML.

Learn More

Xamarin does have a little more information you can learn in their post Native Embedding.


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer | Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

19 Comments

  1. Ahmad Elmadi

    Thanks Adam , this is great
    In my opinion this is one of the greatest features the Xamarin.Forms team has ever made, and yet one of the poorest documented ones on the official site (maybe because it is not on stable version yet) By rich documentations is that going through all the controls on every platform and document their properties and what are bindable and what are not , how to use lists and bind them to collections, with all snippits. Otherwise if we just rely on the mercy of resharper to show the fields we are looking for i think it is not so usefull .
    What do you think ?

    1. Adam Pedley

      Yes, this feature is great. It was always possible before with a Custom Renderer but it makes it easier. I agree that their documentation on the new features is severely lacking. I am just working through Platform Specifics now and there is nothing. I’m having to look at the XF source code for this one, just to make sense of it.

      1. Olamide James

        Thanks for the reply. I did that as well but was getting an error: cannot find TextInputLayout in the Android.Widget namespace. I also changed the namespace to

        xmlns:androidWidgetExt=”clr-namespace:Android.Support.Design.Widget;assembly=Android.Support.Design.Widget;targetPlatform=Android”

        still getting the same error message.

        NOTE: what i want to implement is in the new material design for instance: having a form for login where you click the textinput for username and the username pops up with some animation.
        ================================================================

        ==============================================

          1. Olamide James

            Thanks so much Adam, it is no more throwing error but I can’t get it to work as expected

            please check this url for reference on what i want to implement using native view

            url:

            will be glad if you can assist.

        1. Adam Pedley

          Hi. I can help you with specific errors or queries you have, but I don’t have the time to do an entire project for you. Continue to try for yourself and if you have a specific error or query, I may be able to help. If not StackOverflow is always a good place.

    1. Adam Pedley

      There is no intellisense for this. Though it should compile and run. This is because the XAML is compiled at runtime (as you must disable XamlC). Not sure where the intellisense would be on their schedule or what issues they might face in trying to provide it.

  2. Daniel Ambrus - Varga

    Hi Adam,

    Thank you for this article! I am trying to embedding native controls in my PCL project’s XAML page, but with no luck so far. I am using VS 2017 Professional and installed Xamarin with the official VS installer, so it’s version is 4.3.0.784.
    In my xaml I added the WP reference as this:

    And I would like to display a very simple TextBlock like this:

    but nothing show up on my phone. Do I need to reference something in my project, or add additional xmlns definitions?

    Thanks!

    1. Daniel Ambrus - Varga

      Sorry, the page does not show the codes, so here they are again:

      xmlns definition for WP in my ContentPage:

      xmlns:win=”clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows”

      And the TextBlock:

      win:TextBlock Text=”Native Text”

      1. Adam Pedley

        XAMLC must be disabled for any page with NativeViews, otherwise it will compile but nothing will show. Add this attribute above the class definition, in the view that has the NativeView.

        [XamlCompilation(XamlCompilationOptions.Skip)]

        To disable it, just for that page.

        1. Daniel Ambrus - Varga

          Oh, my bad, I did not see that Compile is set explicitly as the class’ attribute!

          I changed it to Skip, so now I can display different controls, though I still cannot use the Button because it’s inner content does not work. I wanted to define a Grid with an AspectFit image as background and a TextBlock as the button’s text, but nothing is displayed, only an empty button. I tried both platform-specific controls and forms controls (TextBlock and Label), but none of them worked, and also tried VS Prof (15.0) and VS Prof Preview (15.1).

          I guess, because as of yet the normal button’s content cannot be changed in Xamarin’s xaml, the platform-specific controls’ content also cannot be used. At least not all of them, because I can change the text color of a TextBlock, so I guess some of them are implemented…?

Leave A Comment?