How To Apply Padding In Xamarin

In this article, you will learn what padding is and how to set it for the layouts. We will also see how to set it for different platforms like UWP, Android and iOS.

Targeted Audience

People with a basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin Installed.

What Is Padding?

Padding represents the distance between an element and its child elements, and it is used to separate a control from its own content. Its value can be set on layout classes. The picture below shows what padding is.

How To Apply Padding In Xamarin 

In the picture, there is a BoxView with a green color. You can clearly see that in the iPhone, there is no padding set so the BoxView is clashing with the date. To move it down you have to set padding for the layout.

Padding is a type of thickness, and there are three ways to demonstrate thickness.

  1. Creating thickness structure with a single value. Which sets padding to the left, top, right, and bottom sides of the element.
  2. Creating thickness structure with horizontal and vertical values. Horizontal value sets padding to the left and right side, vertical sets padding to the top and bottom sides of the element.
  3. Creating thickness structure with four values which sets padding left, top, right, bottom sides of the element.
XAML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:PracApp1"  
  5.              x:Class="PracApp1.MainPage" >  
  6. <StackLayout Padding="0,30,30,0">  
  7.         <Label Text="Label 1" Margin="10" />  
  8.         <Label Text="Label 2" Margin="15, 20" />  
  9.         <Label Text="Label 3" Margin="5, 10, 15, 20" />  
  10.     </StackLayout>  
C# Code
  1. using PracApp1.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Collections.ObjectModel;  
  5. using System.Linq;  
  6. using System.Text;  
  7. using System.Threading.Tasks;  
  8. using Xamarin.Forms;  
  9.   
  10. namespace PracApp1  
  11. {  
  12.     public partial class MainPage : ContentPage  
  13.     {  
  14. var stackLayout = new StackLayout  
  15.         {  
  16.             Padding = new Thickness(0, 30, 30, 0),  
  17.             Children = {  
  18.     new Label { Text = "Label 1", Margin = new Thickness (10) },  
  19.     new Label { Text = "Label 2", Margin = new Thickness (15, 20) },  
  20.     new Label { Text = "Label 3", Margin = new Thickness (5, 10, 15, 20) }  
  21.       }  
  22.     };  
  23.   }  
  24. }  

Now, you know what padding is, let’s add some padding on the top of the BoxView to get a better understanding of padding. I’m going to do this from C# code first. In Xamarin, we have a class called “Device” with an enumeration type “OS”. With this we can check on which platform we are and can set padding to that, like in the code below

C# Code
  1. using PracApp1.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Collections.ObjectModel;  
  5. using System.Linq;  
  6. using System.Text;  
  7. using System.Threading.Tasks;  
  8. using Xamarin.Forms;  
  9.   
  10. namespace PracApp1  
  11. {  
  12.     public partial class MainPage : ContentPage  
  13.     {  
  14.         public MainPage()  
  15.         {  
  16.             InitializeComponent();  
  17.   
  18.             if (Device.OS==TargetPlatform.iOS)  
  19.             {  
  20.                 Padding = new Thickness(0, 20, 0, 0);  
  21. }  
  22. if (Device.OS == TargetPlatform.Android)  
  23.             {  
  24.                 Padding = new Thickness(0, 20, 0, 0);  
  25.             }  
  26.   
  27.             if (Device.OS == TargetPlatform.WinPhone)  
  28.             {  
  29.                 Padding = new Thickness(0, 20, 0, 0);  
  30.             }  
  31.          }  
  32.     }  
  33. }  

You can add padding on any device with this. The result will be something like this on iOS.

How To Apply Padding In Xamarin
 

Setting Padding Using Device.OnPlatform

You can write the above code in a more simple way. Xamarin has a function called “Device.OnPlatform” which takes the property as a parameter. In this case, I’ll pass “Thickness” as an argument. In this, you can specify the padding for the platforms using their names.

C# Code
  1. Padding = Device.OnPlatform<Thickness>(  
  2.                 iOS: new Thickness(0,20,0,0),  
  3.                 Android: new Thickness(0,30,0,0),  
  4.                 WinPhone: new Thickness(0,40,0,0)  
  5.             );  

The results will be the same as above. And you can see the code is much cleaner than before and there is no more if else statements. This method takes care of all the conditional statements and returns the proper thickness object based on the current operating system. Also, you can use this OnPlatform method with different properties, but in this case, we are interested in padding.

Setting Padding using Non-Generic Method

The method OnPlatform has a non-generic parameter. Using that, you can write a code which you want to run only on a specific platform like I did below. The code shows how to set padding only in different devices.

C# Code
  1. Device.OnPlatform(  
  2.                 iOS:()=> {  
  3.                     new Thickness(0, 20, 0, 0);  
  4.                     } ,  
  5.                 Android: () =>  
  6.                 {  
  7.                     new Thickness(0, 30, 0, 0);  
  8.                 },  
  9.             WinPhone: () =>  
  10.             {  
  11.                 new Thickness(0, 40, 0, 0);  
  12.             });  

Setting Padding using XAML

Padding using XAML is much easier than C#. Inside your ContentPage create another element named “ContentPage.Padding”.  This is an XML attribute to set the padding and this is called Property Element Syntax. Inside this, put an “OnPlatform” tag and you have to give a generic argument and set this to Thickness. Now simply set the padding values to platforms.

XAML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:PracApp1"  
  5.              x:Class="PracApp1.MainPage">  
  6.     <ContentPage.Padding>  
  7.   
  8.         <OnPlatform x:TypeArguments="Padding"  
  9.                     iOS="0,20,0,0"  
  10.                     Android="0,30,30,0"  
  11.                     WPF="20,20,20,20">  
  12.         </OnPlatform>  
  13.     </ContentPage.Padding>  
  14. </ContentPage>  

Summary

This article gives you a brief introduction about padding and also how to set it using different ways and on different platforms. Hope after reading this you have a better knowledge and better concept of padding, and also how to apply it.