Showing posts with label OnPlatform. Show all posts
Showing posts with label OnPlatform. Show all posts

Platform specific UI changes in Xamarin.Form


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:
<?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>
In iOS label has been overlapped with toolbar. So alone for iOS we need add To padding(Tool bar height 20px).

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>