如何在.NET MAUI视图中移除Shell导航栏？

问题场景 #

开发.NET MAUI应用时，使用Shell的TabBar实现视图导航，已在ContentPage和Shell根元素设置Shell.NavBarIsVisible="False"，但导航栏仍未隐藏，且设置ShellContent的Title时导航栏会显示，内容出现向下滚动的情况。相关代码如下：

Shell布局代码 #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:LasCarnalasApp"
    x:Class="LasCarnalasApp.AdminShell">

    <TabBar>
        <ShellContent
            Title="Añadir Producto"
            Icon="add_product_icon.png"
            Route="ProductsPage"
            ContentTemplate="{DataTemplate local:ProductsPage}" />

        <ShellContent
            Title="Ver Ganancias"
            Icon="profit_icon.png"
            ContentTemplate="{DataTemplate local:ProfitsPage}"
            Route="ProfitsPage"/>

    </TabBar>
 
</Shell>

ProductsPage布局代码 #

<?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="LasCarnalasApp.ProductsPage"
             Shell.NavBarIsVisible="False">

    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

解决方案 #

1. 在Tab层级设置导航栏隐藏属性 #

使用TabBar时，导航栏的显示状态由Tab节点控制，而非ShellContent或ContentPage。需为每个ShellContent包裹Tab元素，并在Tab上设置Shell.NavBarIsVisible="False"：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:LasCarnalasApp"
    x:Class="LasCarnalasApp.AdminShell">

    <TabBar>
        <Tab Shell.NavBarIsVisible="False">
            <ShellContent
                Title="Añadir Producto"
                Icon="add_product_icon.png"
                Route="ProductsPage"
                ContentTemplate="{DataTemplate local:ProductsPage}" />
        </Tab>
        <Tab Shell.NavBarIsVisible="False">
            <ShellContent
                Title="Ver Ganancias"
                Icon="profit_icon.png"
                ContentTemplate="{DataTemplate local:ProfitsPage}"
                Route="ProfitsPage"/>
        </Tab>
    </TabBar>
 
</Shell>

2. 全局隐藏Shell导航栏 #

若希望整个Shell应用都隐藏导航栏，可直接在Shell根元素上设置Shell.NavBarIsVisible="False"：

<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:LasCarnalasApp"
    x:Class="LasCarnalasApp.AdminShell"
    Shell.NavBarIsVisible="False">

    <TabBar>
        <!-- 原ShellContent代码不变 -->
    </TabBar>
 
</Shell>

3. 后台代码动态控制 #

如需在运行时动态隐藏导航栏，可在ContentPage的后台代码中添加如下逻辑：

protected override void OnAppearing()
{
    base.OnAppearing();
    Shell.SetNavBarIsVisible(this, false);
}

核心原因 #

在.NET MAUI Shell的TabBar结构中，Tab是导航栏显示状态的最高控制节点，直接在ShellContent或ContentPage上设置的Shell.NavBarIsVisible属性会被Tab的配置覆盖，因此必须将该属性设置在Tab元素上才能生效。

内容的提问来源于stack exchange，提问作者Carlos Ramirez