Include padding on the page and Include padding just for iOS (SAP only) - Xamarin

Back to Index

Solution 1. Include padding on the page

The Page class defines a property named Padding that marks an area around the interior perimeter of the page into which content cannot intrude. The Padding property is of type Thickness, a structure that defines four properties named Left, Top, Right, Bottom. (You might want to memorize that or-der because that’s the order you’ll define the properties in the Thickness constructor as well as in XAML.) The Thickness structure also defines constructors for setting the same amount of padding on all four sides or for setting the same amount on the left and right and on the top and bottom.

A little research in your favorite search engine will reveal that the iOS status bar has a height of 20. (Twenty what? you might ask. Twenty pixels? Actually, no. For now, just think of them as 20 “units.” For much of your Xamarin.Forms programming, you shouldn’t need to bother with numeric sizes, but Chapter 5, “Dealing with sizes,” will provide some guidance when you need to get down to the pixel level.)

You can accommodate the status bar like so:

namespace Greetings
{
public class GreetingsPage : ContentPage
{
public GreetingsPage ()
{
Content = new Label
{
Text = "Greetings, Xamarin.Forms!"
};
Padding = new Thickness(0, 20, 0, 0);
}
}
}

Now the greeting appears 20 units from the top of the page:

Setting the Padding property on the ContentPage solves the problem of the text overwriting the iOS status bar, but it also sets the same padding on the Android and Windows Phone, where it’s not required. Is there a way to set this padding only on the iPhone?

Solution 2. Include padding just for iOS (SAP only)

One of the advantages of the Shared Asset Project (SAP) approach is that the classes in the project are extensions of the application projects, so you can use conditional compilation directives.

Let’s try this out. We’ll need a new solution named GreetingsSap based on the SAP template, and a new page class in the GreetingsSap project named GreetingsSapPage. To set the Padding in iOS only, that class looks like this: 

namespace GreetingsSap
{
public class GreetingsSapPage : ContentPage
{
public GreetingsSapPage ()
{
Content = new Label
{
Text = "Greetings, Xamarin.Forms!"
};
#if __IOS__
Padding = new Thickness(0, 20, 0, 0);
#endif
}
}
}

The #if directive references the conditional compilation symbol __IOS__ , so the Padding property is set only for the iOS project. The results look like this:

However, these conditional compilation symbols affect only the compilation of the program, so they have no effect in a PCL. Is there a way for a PCL project to include different Padding for different plat-forms?

I hope I have helped in something. Until the next opportunity!

DOWNLOAD PUBLICATION

Back to Index

Twittear