Skip to content

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

@ewerspej

Description

@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:

#25000 (comment)

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions