.NET MAUI中TabbedPage嵌入NavigationPage时Windows导航栏显示异常

一、修复导航栏显示异常 #

当TabbedPage嵌套在NavigationPage中时，Windows平台会出现导航栏样式冲突，可通过以下两种方式解决：

1. 调整页面嵌套结构 #

避免将TabbedPage直接嵌入NavigationPage，改为让每个Tab子页面单独嵌套NavigationPage：

// 原错误嵌套
var navPage = new NavigationPage(new MyTabbedPage());

// 修改后的正确嵌套
var tabbedPage = new MyTabbedPage();
// 给每个Tab子页面添加NavigationPage
tabbedPage.Children.Add(new NavigationPage(new HomePage()));
tabbedPage.Children.Add(new NavigationPage(new SettingsPage()));

这种方式能让Windows平台正确渲染每个页面的导航栏，同时保留Tab切换功能。

2. 自定义Windows平台导航栏样式 #

如果必须保留TabbedPage在外层嵌套，可通过平台特定代码修改导航栏样式：
在项目的Platforms/Windows/App.xaml.cs中添加以下代码，禁用TabbedPage顶部的额外导航栏：

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    base.OnLaunched(args);

    // 获取当前窗口的根页面
    if (App.Current.MainPage is NavigationPage navPage && navPage.CurrentPage is TabbedPage tabbedPage)
    {
        var winTabbedPage = tabbedPage.Handler.PlatformView as Microsoft.UI.Xaml.Controls.TabView;
        if (winTabbedPage != null)
        {
            // 隐藏TabView自带的顶部标题栏
            winTabbedPage.HeaderVisibility = Microsoft.UI.Xaml.Controls.TabViewHeaderVisibility.Collapsed;
        }
    }
}

二、实现Windows平台TabbedPage底部显示 #

默认Windows平台的TabbedPage标签在顶部，要移到底部可通过以下两种方式：

1. 使用MAUI TabBar（推荐） #

从.NET MAUI 7开始，推荐使用TabBar替代传统TabbedPage，它支持跨平台设置标签位置：

<!-- 在App.xaml中定义Shell结构 -->
<Shell>
    <TabBar TabPlacement="Bottom">
        <Tab Title="首页" Icon="home.png">
            <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
        </Tab>
        <Tab Title="设置" Icon="settings.png">
            <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
        </Tab>
    </TabBar>
</Shell>

TabPlacement="Bottom"可让Windows平台的Tab标签直接显示在底部，无需额外平台代码。

2. 自定义TabbedPage渲染器（兼容旧版本） #

如果仍使用传统TabbedPage，可创建Windows平台自定义渲染器：

1. 在Platforms/Windows文件夹下创建CustomTabbedPageRenderer.cs：

using Microsoft.Maui.Controls.Platform;
using Microsoft.UI.Xaml.Controls;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YourAppName.Platforms.Windows
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (Control is TabView tabView)
            {
                // 设置Tab标签位置为底部
                tabView.TabStripPlacement = Microsoft.UI.Xaml.Controls.TabViewTabStripPlacement.Bottom;
            }
        }
    }
}

2. 在共享项目中直接使用TabbedPage即可，渲染器会自动生效。

内容的提问来源于stack exchange，提问作者Guilherme Ribeiro Morato