[Android] NavigationPage.HasNavigationBar="False" doesn't work with TabbedPage

[ewerspej]

Description

Hiding the navigation bar of a NavigationPage by setting NavigationPage.HasNavigationBar="False" doesn't work on Android when the root page of the NavigationPage is set to a TabbedPage:

App.xaml.cs

namespace TabbedTabs
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage())
            {
                BarBackgroundColor = Colors.DarkGreen
            };
        }
    }
}

MainPage XAML + code-behind

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:tabbedTabs="clr-namespace:TabbedTabs"
    x:Class="TabbedTabs.MainPage"
    BarBackgroundColor="Orange"
    NavigationPage.HasNavigationBar="False">

    <tabbedTabs:PageOne Title="One" />
    <tabbedTabs:PageTwo Title="Two" />

</TabbedPage>

namespace TabbedTabs
{
    public partial class MainPage : TabbedPage
    {
       public MainPage()
        {
            InitializeComponent();
        }
    }
}

Result

This occurs only on Android, iOS and Windows look fine, couldn't test MacCatalyst.

Steps to Reproduce

1. Create a new MAUI App
2. Add a TabbedPage
3. Set MainPage to a NavigationPage with the TabbedPage as the root page, e.g.: MainPage = new NavigationPage(new MainPage());
4. Add a few child pages to the TabbedPage
5. On the root element of the TabbedPage, set NavigationPage.HasNavigationBar="False"
6. Run the app
7. The NavigationBar is shown although it should be hidden

Link to public reproduction project repository

https://github.com/ewerspej/maui-bug-navigationbar-tabbedpage

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Might be a regression, based on the comments under this Stack Overflow post: https://stackoverflow.com/questions/76912644/how-to-hide-navigation-bar-on-tabbed-page-maui/76912762?noredirect=1#comment135604600_76912762

It seems to work correctly using .NET 6.0 and Android 13.0+ / API 33+

Affected platforms

Android

Affected platform versions

Android 13.0

Did you find any workaround?

Yes.

Instead of setting NavigationPage.HasNavigationBar="False" on the root of the TabbedPage, it can be set on the child pages separately, then the Navigation Bar is indeed hidden as expected:

Workaround

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:tabbedTabs="clr-namespace:TabbedTabs"
    x:Class="TabbedTabs.MainPage"
    BarBackgroundColor="Orange">

    <tabbedTabs:PageOne Title="One" NavigationPage.HasNavigationBar="False" />
    <tabbedTabs:PageTwo Title="Two" NavigationPage.HasNavigationBar="False" />

</TabbedPage>

Result

Relevant log output

No response

[ghost]

Hi @ewerspej. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ewerspej]

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

It's unclear to which version I am supposed to try this with. Preview or not preview?

I've already provided a reproduction project (see above).

[ewerspej]

I can't test with the latest version at the moment, because I run into the following issue when building the app after upgrading it: #15849

[mikelor]

@ewerspej you should delete your /obj /bin folders after updating your project to preview.7. Then dotnet clean, dotnet restore, dotnet build. Then open your sln in VS and run/debug.

I found the above steps to be useful in upgrading projects to preview versions.

According to my test, the Net 8 preview 7 exhibits the same behavior.

[ewerspej]

@mikelor That's what I usually do. Thank you for the suggestion, but it doesn't solve the upgrade problem in this case.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Android 13.0-API33 .NET 8, not repro on Windows 11 and iOS 16.4 with below Project:
TabbedTabs.zip