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.

Microsoft MVP (Xamarin) | Exrin | Xamarin Forms Developer | Melbourne, Australia | Open to sponsorship to Canada or US

Related Posts

15 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.

Leave A Comment?