.NET MAUI, ios UseSafeArea not working StackLayout, VerticalStackLayout and Grid

Question

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.Views.Activities.ActivityMapList"
             xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="False"
             Shell.NavBarIsVisible="False"
             Style="{StaticResource Key=DefaultPage}">
    <ContentPage.Content>
        <StackLayout>
            <maps:Map
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">
                <x:Arguments>
                    <MapSpan>
                        <x:Arguments>
                            <sensors:Location>
                                <x:Arguments>
                                    <x:Double>36.9628066</x:Double>
                                    <x:Double>-122.0194722</x:Double>
                                </x:Arguments>
                            </sensors:Location>
                            <x:Double>0.01</x:Double>
                            <x:Double>0.01</x:Double>
                        </x:Arguments>
                    </MapSpan>
                </x:Arguments>
            </maps:Map>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Map Controls inside StackLayout or Grid, iOS's SafeArea is false as shown in the image. Do you have any solution?

I need with grid or stacklayout on map

Answer 1

By default .NET MAUI will take the safe area into account. So the use of the platform-specific UseSafeArea is to disable safe areas. Currently, setting UseSafeArea to false doesn't change the behaviour (although it should), which is a bug. Also see the issue on the MAUI github: https://github.com/dotnet/maui/issues/5856

There's also a IgnoreSafeArea property you can set to achieve the same thing. However, it's no longer working in .NET 7, see the following issue: https://github.com/dotnet/maui/issues/12823

To fix your problem you need to add IgnoreSafeArea="True" to your Grid or StackLayout and ios:Page.UseSafeArea="False" to your page. This should not be necessary, but is a workaround that works for me.

iOS emulator showing content outside safe area

Documentation about disabling safe area on iOS can be found here: https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/page-safe-area-layout?view=net-maui-7.0