Edit

Share via

Enable the safe area layout guide on iOS

  • Article

By default, .NET Multi-platform App UI (.NET MAUI) apps automatically position page content on an area of the screen that is safe for all devices. This is known as the safe area layout guide, and ensures that content isn't clipped by rounded device corners, the home indicator, or the sensor housing on some iPhone models.

This iOS platform-specific enables the safe area layout guide, if it's previously been disabled, and is consumed in XAML by setting the Page.UseSafeArea attached property to true:

<ContentPage ...
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="True">
    <StackLayout>
        ...
    </StackLayout>
</ContentPage>

Alternatively, it can be consumed from C# using the fluent API:

using Microsoft.Maui.Controls.PlatformConfiguration;
using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;

On<iOS>().SetUseSafeArea(true);

The Page.On<iOS> method specifies that this platform-specific will only run on iOS. The Page.SetUseSafeArea method, in the Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific namespace, controls whether the safe area layout guide is disabled.

Note

The Layout class defines a IgnoreSafeArea property that ensures that content is positioned on an area of the screen that is safe for all iOS devices. This property can be set to true on any layout class, such as a Grid or StackLayout, to perform the equivalent of this platform-specific.