如何自定义MAUI应用的顶部导航栏？

以下是几种主流的自定义MAUI顶部蓝色导航栏的实现方式，覆盖不同导航框架和场景：

一、使用Shell框架（MAUI推荐） #

1. 基础样式修改 #

直接在AppShell.xaml中设置Shell的全局属性，快速调整导航栏外观：

<Shell
    x:Class="YourAppNamespace.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Shell.BackgroundColor="#2196F3" <!-- 替换为你需要的背景色 -->
    Shell.TitleColor="White" <!-- 标题文字颜色 -->
    Shell.ForegroundColor="White" <!-- 图标/按钮颜色 -->
    Shell.UnselectedColor="#80FFFFFF"> <!-- 未选中项的颜色 -->

    <!-- 你的Shell导航结构 -->
</Shell>

2. 自定义标题栏内容 #

如果需要添加按钮、图标等复杂布局，在目标ContentPage中使用Shell.TitleView完全替换默认标题栏：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.YourPage">

    <Shell.TitleView>
        <HorizontalStackLayout Spacing="12" Padding="16,0" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
            <Image Source="back_arrow.png" WidthRequest="24" HeightRequest="24" />
            <Label Text="我的页面" FontSize="18" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" HorizontalTextAlignment="Center" />
            <Button Text="设置" TextColor="White" BackgroundColor="Transparent" HorizontalOptions="End" />
        </HorizontalStackLayout>
    </Shell.TitleView>

    <!-- 页面主体内容 -->
</ContentPage>

二、使用NavigationPage框架 #

1. 全局样式设置 #

在App.xaml.cs的启动代码中统一配置所有页面的导航栏：

public App()
{
    InitializeComponent();
    MainPage = new NavigationPage(new MainPage())
    {
        BarBackgroundColor = Color.FromHex("#2196F3"),
        BarTextColor = Colors.White
    };
}

2. 单个页面独立设置 #

如果需要给特定页面单独设置导航栏样式，在页面构造函数中添加：

public YourPage()
{
    InitializeComponent();
    NavigationPage.SetBarBackgroundColor(this, Color.FromHex("#FF5722"));
    NavigationPage.SetBarTextColor(this, Colors.White);
}

3. 自定义标题视图 #

同样可以通过NavigationPage.TitleView实现复杂布局：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.YourPage">

    <NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
            <Button Text="返回" TextColor="White" BackgroundColor="Transparent" />
            <Label Text="自定义标题" HorizontalOptions="Center" VerticalOptions="Center" FontSize="18" />
            <Image Source="search_icon.png" WidthRequest="24" HeightRequest="24" HorizontalOptions="End" Margin="0,0,16,0" />
        </StackLayout>
    </NavigationPage.TitleView>

    <!-- 页面主体内容 -->
</ContentPage>

三、平台特定高级自定义 #

如果需要调整导航栏高度、移除阴影等更深度的定制，可通过MAUI的平台特定代码实现：

Android平台 #

在目标页面的OnHandlerChanged方法中添加：

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
#if ANDROID
    var toolbar = Handler?.PlatformView as AndroidX.AppCompat.Widget.Toolbar;
    if (toolbar != null)
    {
        toolbar.Elevation = 0; // 移除导航栏阴影
        toolbar.SetMinimumHeight(100); // 设置自定义高度
        toolbar.SetBackgroundColor(Android.Graphics.Color.ParseColor("#2196F3"));
    }
#endif
}

iOS平台 #

在目标页面的OnHandlerChanged方法中添加：

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
#if IOS
    var navBar = (Handler?.PlatformView as UIKit.UIViewController)?.NavigationController?.NavigationBar;
    if (navBar != null)
    {
        // 移除导航栏阴影
        navBar.ShadowImage = new UIKit.UIImage();
        navBar.SetBackgroundImage(new UIKit.UIImage(), UIKit.UIBarMetrics.Default);
        // 设置背景色
        navBar.BackgroundColor = UIKit.UIColor.FromHexString("#2196F3");
        // 自定义标题样式
        navBar.TitleTextAttributes = new UIKit.UITextAttributes
        {
            ForegroundColor = UIKit.UIColor.White,
            Font = UIKit.UIFont.BoldSystemFontOfSize(18)
        };
    }
#endif
}

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