.NET MAUI Flyout Shell应用中如何自定义标题？

问题截图 #

疑问列表 #

• 如何缩小标题的间距？
• 修改汉堡图标后，图标颜色始终为白色，这是怎么回事？
• 是否可以设置标题的字号和字体族？

另外，用户提到：在Android中可以设置contentInsetLeft、contentInsetStart、contentInsetStartWithNavigation，但不知道如何在.NET MAUI中实现此操作。

1. 缩小标题间距（对应Android的contentInset设置） #

在.NET MAUI中，针对Android平台的标题栏内边距调整，需要通过自定义渲染器实现，分两种场景处理：

场景一：使用NavigationPage时 #

在Android项目中创建自定义渲染器类：

using Android.Content;
using AndroidX.AppCompat.Widget;
using Microsoft.Maui.Controls.Platform;

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))]
namespace YourAppNamespace.Droid.Renderers;

public class CustomNavigationRenderer : NavigationPageRenderer
{
    public CustomNavigationRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
    {
        base.OnElementChanged(e);

        if (Toolbar != null)
        {
            // 按需调整数值，单位为dp
            Toolbar.ContentInsetLeft = 0;
            Toolbar.ContentInsetStart = 0;
            Toolbar.ContentInsetStartWithNavigation = 16;
        }
    }
}

场景二：使用Shell时 #

在Android项目中创建自定义Shell渲染器：

using Android.Content;
using AndroidX.AppCompat.Widget;
using Microsoft.Maui.Controls.Platform;

[assembly: ExportRenderer(typeof(Shell), typeof(CustomShellRenderer))]
namespace YourAppNamespace.Droid.Renderers;

public class CustomShellRenderer : ShellRenderer
{
    public CustomShellRenderer(Context context) : base(context)
    {
    }

    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
    {
        return new CustomToolbarAppearanceTracker(this);
    }
}

public class CustomToolbarAppearanceTracker : ShellToolbarAppearanceTracker
{
    public CustomToolbarAppearanceTracker(IShellContext context) : base(context)
    {
    }

    public override void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
    {
        base.SetAppearance(toolbar, toolbarTracker, appearance);
        // 调整内边距
        toolbar.ContentInsetLeft = 0;
        toolbar.ContentInsetStart = 0;
        toolbar.ContentInsetStartWithNavigation = 16;
    }
}

2. 汉堡图标颜色始终为白色的解决方法 #

方式一：通过Shell全局样式设置 #

在App.xaml中直接配置导航栏图标颜色：

<Style TargetType="Shell">
    <Setter Property="Shell.NavBarIconColor" Value="#FF5722" /> <!-- 替换为你需要的颜色值 -->
</Style>

方式二：通过自定义渲染器强制修改 #

如果全局样式不生效，在Android的CustomToolbarAppearanceTracker类中添加：

public override void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
{
    base.SetAppearance(toolbar, toolbarTracker, appearance);
    // 设置汉堡图标颜色
    toolbar.NavigationIcon?.SetColorFilter(Android.Graphics.Color.ParseColor("#FF5722"), Android.Graphics.PorterDuff.Mode.SrcIn);
}

3. 设置标题的字号和字体族 #

方式一：全局Shell样式设置 #

在App.xaml中定义统一的标题样式，需提前注册字体：

<Style TargetType="Shell">
    <Setter Property="Shell.TitleView">
        <Setter.Value>
            <Label Text="{Binding Title}" 
                   FontSize="20" 
                   FontFamily="CustomFont" 
                   TextColor="#333333" />
        </Setter.Value>
    </Setter>
</Style>

在MauiProgram.cs中注册字体（将字体文件放在Resources/Fonts目录）：

builder.ConfigureFonts(fonts =>
{
    fonts.AddFont("CustomFont.ttf", "CustomFont");
});

方式二：页面级别自定义TitleView #

在单个页面的XAML中直接设置：

<ContentPage.TitleView>
    <Label Text="我的页面标题" 
           FontSize="22" 
           FontFamily="CustomFont" 
           TextColor="#000000" />
</ContentPage.TitleView>

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