Native components

In some cases, developers need to resort to using native user controls; especially when a certain control only exists for a certain platform (that is, no Xamarin.Forms abstraction exists for that specific UI element). In these types of situations, Xamarin enables users to declare native views within Xamarin.Forms XAML and set/bind the properties of these controls.

In order to include native views, first the namespaces for the native views should be declared:

xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
xmlns:formsandroid="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.Platform.Android;targetPlatform=Android"
  

Once the namespace is declared, we can, for instance, replace Label in our ItemView.xaml and use its native counterpart directly:

<!-- <Label Text="{Binding Description}" /> -->
<ios:UILabel Text="{Binding Description}" View.HorizontalOptions="Start"/>
<androidWidget:TextView Text="{Binding Description}" x:Arguments="{x:Static formsandroid:Forms.Context}" />

Now the view will include a different native control for each platform. Additionally, the UILabel.Text and TextView.Text properties now carry the binding to the Description field. 

It is also possible to further customize the native fields using native types and properties. For instance, in order to add a drop-shadow on the UILabel item, we can use the ShadowColor and ShadowOffset values:

<ios:UILabel 
 Text="{Binding Description}" 
 View.HorizontalOptions="Start" 
 ShadowColor="{x:Static ios:UIColor.Gray}">
  <ios:UILabel.ShadowOffset>
  <iosGraphics:CGSize>
  <x:Arguments>
  <x:Single>1</x:Single>
  <x:Single>2</x:Single>
  </x:Arguments>
  </iosGraphics:CGSize>
  </ios:UILabel.ShadowOffset>
 </ios:UILabel>

The outcome of this declaration is as follows (compare this to the Xamarin.Forms Label field defined earlier):