[iOS]; How to leave space for top and bottom status bar

Indeed, making sure that app content isn’t obscured by the ‘notch’ or the bottom swipe area on current-generation iPhones (and some newer Android devices as well) is an important consideration.

Uno Platform handles this using the VisibleBoundsPadding behavior. You can attach this behavior to any compatible container (eg a Panel or Border) and the content of the container will be padded such that stays within the ‘safe’ area of the screen.

In general you should place all ‘content’ in your application (eg text, images, interactive elements) within the VisibleBoundsPadding area, but some visual elements eg a full-screen backdrop might go outside of it.

You can place VisibleBoundsPadding anywhere you wish in your app (including multiple locations), though generally it makes sense to place it on or near a root element. It will adjust automatically to rotations and other layout updates.

Here’s a simple example:

<Page x:Class="UnoTestbed20.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoTestbed20"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:toolkit="using:Uno.UI.Toolkit"
      mc:Ignorable="d">

    <Grid Background="LightBlue" toolkit:VisibleBoundsPadding.PaddingMask="All">
        <Border Background="LightYellow">
            <TextBlock Text="Hello, world!"
                       Margin="20"
                       FontSize="30" />
        </Border>
    </Grid>
</Page>

And the resulting display on an iPhone 11: