Xamarin Help

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.

Posted

in

by

Adam P

Tags: