Brief: Walkthrough on the options available in xamarin form for changing UI element behaviour for specific platform.
Description: Xamarin form wrapper UI controls when it renders in each platform shows the native look and feel but still there are some quirks that has to be worked around to get the UI perfection.
For example if i add one label in my xamal page and on run in android and iOS shows the below output:
For example if i add one label in my xamal page and on run in android and iOS shows the below output:
<?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:CodeLog" x:Class="CodeLog.CodeLogPage">
<RelativeLayout HorizontalOptions="FillAndExpand" >
<Label Text="Code Log"
FontSize="25"
FontFamily="Roboto-Bold"
HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand" />
</RelativeLayout>
</ContentPage>
This kind of changes for particular platform can be achieved by using the below mentioned approaches without using the Custom renderer.
1.Using a generic class OnPlatform
2.PlatformConfiguration(https://blog.xamarin.com/bringing-platform-specific-functionality-to-xamarin-forms-apps/)
3.Bindable Native Views in Xamal page (https://blog.xamarin.com/adding-bindable-native-views-directly-to-xaml/)
4.customisation with effects(https://blog.xamarin.com/customizing-xamarin-forms-controls-with-effects/)
In this article i will be making use of the OnPlatform for different UI control properties. From Xamarin.Forms version 2.3.4, Device.OnPlatform API has been deprecated with OnPlatform and On APIs.
<?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:CodeLog" x:Class="CodeLog.CodeLogPage">
<RelativeLayout HorizontalOptions="FillAndExpand" >
<RelativeLayout.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,20,0,0" />
<On Platform="Android, WinPhone, Windows" Value="0,0,0,0" />
</OnPlatform>
</RelativeLayout.Margin>
<Label Text="Code Log" FontSize="25" FontFamily="Roboto-Bold" HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand" />
</RelativeLayout>
</ContentPage>
Platform specific Text color:
<Label Text="Code Log" FontSize="18" FontAttributes="Bold" FontFamily="Roboto-Bold" XAlign="Center" HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
<Label.TextColor>
<OnPlatform x:TypeArguments="Color" iOS="Red" Android="Blue" />
</Label.TextColor>
</Label>
