Avoiding Status Bar Overlap with StackLayout Padding

The StackLayout positions child elements in a single line either vertically  or horizontally, setting child bounds automatically. On iOS 7 onwards this means that the top child element in a StackLayout will overlay the status bar.

Viand-Tabbed-Screen-1a

In order to get around this you can use the StackLayout’s Padding property.

Content = new StackLayout {
    Padding = new Thickness(0, 20, 0, 0),
    Children = {
        new Label { Text = "Hello BuyLayout" }
    }
};

Which moves the child elements down a bit.

Viand-Tabbed-Screen-2

This modification affects both iOS and Android it needs to be platform-specific.

Content = new StackLayout {
    Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 20, 0),
    Children = {
        new Label { Text = "Hello BuyLayout" }
    }
};

Device. OnPlatform is a generic method that can be used to provide platform-specific has three optional parameters. It has three optional parameters: iOS, Android, and WinPhone (more Xamarin.Forms platform tweaks here).

In the code example above I’m providing a Top padding value for iOS of 20 but leaving Android and Windows Phone at 0. The screenshots below show the child element correctly positioned on each platform.

Viand-Tabbed-Screen-3

This entry was posted in Side Projects, Software Development and tagged , , , , . Bookmark the permalink.