Can only ignore iOS Safe Area when navigation bar is hidden

[davidortinau]

Description

Porting an Xamarin.Forms app to .NET MAUI, I found that the old safe area code doesn't work as expected in .NET MAUI. I found the recommendation to use IgnoreSafeArea="True" on the layout, however this didn't do anything until...

I did a repro in a blank app and hid the navigation bar.

<?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="PlayItSUnsafe.MainPage"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="False"
             BackgroundColor="Red"
             Shell.NavBarIsVisible="False"
             >


        <Grid Background="#333333"
            IgnoreSafeArea="True"
            RowDefinitions="300,*"
            >
            <BoxView Grid.Row="0"
                BackgroundColor="MediumPurple"
                />
            
            <Image Source="dotnet_bot.png" />

            <Label Text="Hello, world!" Grid.Row="1"
            TextColor="White"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
        </Grid>

</ContentPage>

PlayItUnsafe.zip

This AppDelegate code should (used to) make the nav bar bg transparent to create this look.

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
    {
        base.FinishedLaunching(application, launchOptions);
            
        UINavigationBar.Appearance.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
        UINavigationBar.Appearance.ShadowImage = new UIImage();
        UINavigationBar.Appearance.BackgroundColor = UIColor.Clear;
        UINavigationBar.Appearance.TintColor = UIColor.White;
        UINavigationBar.Appearance.BarTintColor = UIColor.Clear;
        UINavigationBar.Appearance.Translucent = true;

        return true;
    }

The SmartHotel360 app uses FlyoutPage and the sample repro uses Shell. Both should work.

Steps to Reproduce

run the sample from the zip and/or the repo linked. Show/hide the navigation bar. In both cases the content should be at the very top of the device screen, not at the bottom of the nav bar.

Link to public reproduction project repository

https://github.com/davidortinau/SmartHotel360-Mobile/blob/upgrade-step-1/Source/SmartHotel.Clients/SmartHotel.Clients.iOS/AppDelegate.cs

Version with bug

8.0.0-preview.7.8842
Also tested latest 7.0

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

16.4

Did you find any workaround?

Not without abandoning the existing implementation with ToolbarItem and flyout menu button etc.

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[davidortinau]

Update, I whittled the code in SmartHotel360 down to the bare implementation. It's a FlyoutPage, iOS translucent platform specific, and the at nav bar code. No Safe Area info is used.

public App()
	{
		InitializeComponent();

		var detail = new NavigationPage(new MainPage())
		{
			BarBackgroundColor = Colors.Transparent,
			BarTextColor = Colors.White
		};
		detail.On<iOS>().EnableTranslucentNavigationBar();

		MainPage = new FlyoutPage()
		{
			Flyout = new ContentPage(){Title = "Menu"},
			Detail = detail
		};

	}

App1XF.zip

PlayItUnsafe.zip

If I ignore safe area with the platform specific and IgnoreSafeArea on the page Grid, the content moves up slightly, but still not in the safe area under the nav bar.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:iOsSpecific="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             iOsSpecific:Page.UseSafeArea="False"
             x:Class="PlayItSUnsafe.MainPage"
             BackgroundColor="Red"
             Title="Main">
        <Grid Background="#333333"
            IgnoreSafeArea="True"
            RowDefinitions="300,*"
            >

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on iOS 16.4 .NET 8 with below Project:
PlayItUnsafe.zip

[tj-devel709]

Hi @davidortinau, I am trying out different parts of this issue!

Inside current main, looks like the Shell Flyout menu gives the desired behavior if I am understanding correctly

Was there an example of this behavior that you were expecting in the past on Shell ?

[davidortinau]

@tj-devel709 the issue I'm showing does NOT use Shell. The PlayItUnsafe solution uses FlyoutPage > NavigationPage > ContentPage.

[Denny966]

Got the same issue with a grid inside a content page