How To Apply Padding In Xamarin

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.

 

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

<?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:PracApp1"
             x:Class="PracApp1.MainPage" >
<StackLayout Padding="0,30,30,0">
        <Label Text="Label 1" Margin="10" />
        <Label Text="Label 2" Margin="15, 20" />
        <Label Text="Label 3" Margin="5, 10, 15, 20" />
    </StackLayout>

C# Code

using PracApp1.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace PracApp1
{
    public partial class MainPage : ContentPage
    {
var stackLayout = new StackLayout
        {
            Padding = new Thickness(0, 30, 30, 0),
            Children = {
    new Label { Text = "Label 1", Margin = new Thickness (10) },
    new Label { Text = "Label 2", Margin = new Thickness (15, 20) },
    new Label { Text = "Label 3", Margin = new Thickness (5, 10, 15, 20) }
      }
    };
  }
}

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

using PracApp1.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace PracApp1
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            if (Device.OS==TargetPlatform.iOS)
            {
                Padding = new Thickness(0, 20, 0, 0);
}
if (Device.OS == TargetPlatform.Android)
            {
                Padding = new Thickness(0, 20, 0, 0);
            }

            if (Device.OS == TargetPlatform.WinPhone)
            {
                Padding = new Thickness(0, 20, 0, 0);
            }
         }
    }
}

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

 

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

Padding = Device.OnPlatform<Thickness>(
                iOS: new Thickness(0,20,0,0),
                Android: new Thickness(0,30,0,0),
                WinPhone: new Thickness(0,40,0,0)
            );

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

Device.OnPlatform(
                iOS:()=> {
                    new Thickness(0, 20, 0, 0);
                    } ,
                Android: () =>
                {
                    new Thickness(0, 30, 0, 0);
                },
            WinPhone: () =>
            {
                new Thickness(0, 40, 0, 0);
            });

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

<?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:PracApp1"
             x:Class="PracApp1.MainPage">
    <ContentPage.Padding>

        <OnPlatform x:TypeArguments="Padding"
                    iOS="0,20,0,0"
                    Android="0,30,30,0"
                    WPF="20,20,20,20">
        </OnPlatform>
    </ContentPage.Padding>
</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.