Shell.NavBarIsVisible="False" just doesn't work to hide the title bar

Question

I've basically got a Maui default test app, but I just can't figure out how I can remove the navigation bar.

I just want the gray text to be gone, and no place occupied by it (e.g. in the example, the car should be at the top of the screen).

I've tried (in Styles.xaml)

  <Style TargetType="Shell" ApplyToDerivedTypes="True">
      <Setter Property="Shell.NavBarHasShadow" Value="False" />
      <Setter Property="Shell.NavBarIsVisible" Value="False" />
  </Style>

and in AppShell.xaml

<Shell
    x:Class="MauiTest.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiTest"
    Shell.FlyoutBehavior="Flyout"
    Shell.NavBarIsVisible="False"
    Shell.TabBarIsVisible="False">
....
</Shell>

and the same also in MainPage.xaml and even via C#, but nothing has any effect whatsoever (other changes are applied, so it's not a build issue).

I'm currently only testing on Windows. What am I missing?

Answer 1

I've found it. The extended example I was looking at to see how to add more pages changed the constructor in App as follows:

public App(INavigationService navigationService)
{
    NavigationService = navigationService;
    InitializeComponent();
    MainPage = new NavigationPage();
    // ...
}

Changing that back to MainPage = new AppShell() (as it is in the standard example) fixed the issue. I'm still discovering Maui, so I don't really know yet what all these classes do.

Answer 2

Just to expand upon the other answers here, if you wanted to also remove the native Title Bar when running in Windows, I've had some luck using P/Invoke to do that. Here's my all-in-one code:

• Hide Navigation Bar
• Remove System Menu
• Resize to a "mobile" aspect ratio.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new AppShell();
    }

#if WINDOWS
    protected override Window CreateWindow(IActivationState? activationState)
    {
        Window window = base.CreateWindow(activationState);

        window.HandlerChanged += (sender, e) =>
        {
            if(sender is Window mauiWindow && mauiWindow.Handler is IElementHandler handler) 
            {
                Shell.SetNavBarIsVisible(Shell.Current, false);
                Dispatcher.Dispatch(() =>
                {
                    if (handler.PlatformView is Microsoft.UI.Xaml.Window nativeWindow)
                    {
                        var hWnd = nativeWindow.GetWindowHandle();
                        int style;
                        style = GetWindowLong(hWnd, GWL_STYLE);
                        style &= ~(WS_CAPTION | WS_SYSMENU);
                        SetWindowLong(hWnd, GWL_STYLE, style);
                    }
                    window.Width = 540;
                    window.Height = 960;
                });
            }
        };
        return window;
    }
#endif


    private const int GWL_STYLE = -16;
    private const int WS_CAPTION = 0xC00000;
    private const int WS_SYSMENU = 0x80000;

    [DllImport("user32.dll", EntryPoint = "GetWindowLong")]
    private static extern int GetWindowLong(IntPtr hWnd, int nIndex);

    [DllImport("user32.dll", EntryPoint = "SetWindowLong")]
    private static extern int SetWindowLong(IntPtr hWnd, int nIndex, int dwNewLong); 
}

Answer 3

I created a new project but can not reproduce your problem. And I added the background color for the Image.

Before adding the Shell.NavBarIsVisible="False" in the AppShell:

After adding the Shell.NavBarIsVisible="False" in the AppShell:

You can see the Shell.NavBarIsVisible="False" worked the Image Control was at the top of the screen.

You can also add the BackgroundColor for the Image Control to check it. I'm using Visual Studio version 17.9.0 Preview 1.1 and tested it on Windows 11.