.NET MAUI切换已访问标签页出现双标题栏问题求助

问题根源 #

你当前的代码把AppShell嵌套在了NavigationPage中（MainPage = new NavigationPage(new AppShell());），但MAUI的Shell本身已经内置了导航和TabBar机制，这种嵌套会导致导航栏重复渲染：外层NavigationPage提供一个自定义样式的标题栏，而Shell内部的页面在切换回已访问标签时，又会加载自身的默认导航栏，最终出现双重标题栏。

解决步骤 #

1. 移除外层的NavigationPage嵌套 #

修改App.xaml.cs中的MainPage初始化代码，直接使用AppShell作为根页面：

MainPage = new AppShell();

2. 调整导航样式适配Shell机制 #

原来的NavigationbarStyle是针对NavigationPage的，现在需要改为适配Shell的样式设置。更新你的NavigationbarStyle.xaml：

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="foo.Resources.Styles.NavigationbarStyle">

    <Style TargetType="Shell">
        <Setter Property="Shell.NavBarBackgroundColor" Value="{DynamicResource NavigationBarBackgroundColor}"/>
        <Setter Property="Shell.TitleColor" Value="White"/>
        <!-- 如需自定义TabBar样式，可添加以下设置 -->
        <Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource NavigationBarBackgroundColor}"/>
        <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        <Setter Property="Shell.TabBarUnselectedColor" Value="#CCCCCC"/>
    </Style>

</ResourceDictionary>

3. 按需为单个标签页添加导航栈（可选） #

如果某个标签页需要独立的导航栈（比如需要PushAsync打开子页面），可以在AppShell的ShellContent内部嵌套NavigationPage，而非在外层包裹整个Shell：

<Shell
    x:Class="foo.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:foo"
    xmlns:views="clr-namespace:foo.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar x:Name="MainTabBar">
        <ShellContent Title="Home" Icon="alert_icon_2_neg.png">
            <NavigationPage>
                <x:Arguments>
                    <views:StartPage />
                </x:Arguments>
            </NavigationPage>
        </ShellContent>
        <!-- 其他标签页可按此格式配置 -->
    </TabBar>

</Shell>

4. 调整页面的导航属性 #

对于不需要显示返回按钮的页面，在XAML中用Shell.NavBarHasBackButton="False"替代原来的NavigationPage.HasBackButton：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:foo"
             xmlns:converters="clr-namespace:foo.Converters"
             x:Class="foo.MainPage"
             Shell.NavBarHasBackButton="False"
             Title="foo"
             Loaded="ContentPage_Loaded">

    -- Content --
    
</ContentPage>

验证效果 #

完成以上修改后，切换TabBar标签页时，只会保留由Shell统一管理的单个自定义样式标题栏，不会再出现双重标题栏的问题。

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