如何在.NET MAUI中更改TabBar的选项卡标题字体

Question

在我的 AppShell.xaml 中，我有以下关于 TabBar 的代码。我似乎找不到任何属性或任何东西可以让我改变标题的字体（以及字体大小等）。

在 AppShell.xaml 中，我有一个关于 TabBar 的代码。我无法找到可以更改标题字体（以及字体大小等）的属性或其他内容。

<TabBar x:Name="TabBar">
    <Tab x:Name="HomePage" Title="Home" Icon="tab_home.png">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    </Tab>
</TabBar>

即使在Resources/Styles/Styles.xaml中，我也没有看到外壳或选项卡页面的字体族属性。

- Cody

---

据我所知，在TabBar选项卡上，您无法更改标题文本的字体和大小。 - Julian

Answer 1

您可以尝试在Shell选项卡中设置字体图标。

请参考以下代码：

1.添加所需字体。

public static class MauiProgram 
{
      public static MauiApp CreateMauiApp()
      {
            var builder = MauiApp.CreateBuilder();
            builder
                  .UseMauiApp<App>()
                  .ConfigureFonts(fonts =>
                  {
                        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                // add your font here
                fonts.AddFont("icomoon.ttf", "FA");
            }); 

            return builder.Build();
      }
}

2.Usage:

<TabBar> 
    <ShellContent Title="About" Icon="{FontImage FontFamily=FA , Glyph=&#xe922;}" Route="AboutPage" ContentTemplate="{DataTemplate local:CatsPage}" />
    <ShellContent Title="Items" Icon="{FontImage FontFamily=FA , Glyph=&#xe910;}" ContentTemplate="{DataTemplate local:MainPage}" />
</TabBar>

注意:

请将字体添加到文件夹 Fonts 中，并确保构建操作为 MauiFont。

- Jessie Zhang -MSFT

---

我认为Cody想要更改TabBar选项卡的标题文本的字体和大小，但据我所知这是不可能的。 - Julian

虽然这是一个不错的解决方法，@ewerspej 是正确的，你不能在 TabBars 中更改图标/字体大小，我最终使用了 Syncfusion 的 TabView，它允许更多的自定义。 - Cody

很遗憾，这个答案不起作用，无法更改TabBar标题的字体。请检查我的答案。我测试过了，它可以正常工作。 - Ahmed Samy Moursi Hashwa

Answer 2

根据如何在TabBar中移除或隐藏文本的答案.NET MAUI?，可以进行以下操作。

您可以更改TabBar标题的字体和字号。

在Android中：

您需要在Platforms/Android/Renderers中添加自定义渲染器。

[assembly: ExportRenderer(typeof(Shell), typeof(CustomShellRenderer))]
namespace YourApp.Platforms.Android.Renderers;
    
public class CustomShellRenderer : ShellRenderer
{
    public CustomShellRenderer(Context context) : base(context)
    {
    }
    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new CustomBottomNavViewAppearanceTracker(this, shellItem);
    }
}
public class CustomBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
{
    public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView, appearance);

            // Set custom font with any font file name you need as registered in MauiProgram.cs builder.ConfigureFonts()
            var font = Typeface.CreateFromAsset(ShellContext.AndroidContext.Assets, "FONTFILENAME.ttf");
            // replace FONTSIZE with you needed font size
            var spanFace = new CustomTypefaceSpan("", font, FONTSIZE);
            // if you need you can change the direction of the bottom navigation view
            bottomView.LayoutDirection = LayoutDirection.Rtl;
            var menu = bottomView.Menu;
            for (var i = 0; i < menu.Size(); i++)
            {
                // Set custom label with custom fonts
                var menuItem = menu.GetItem(i);
                if (menuItem == null) continue;
                var spannableString = new SpannableString(menuItem.TitleCondensedFormatted);
                spannableString.SetSpan(spanFace, 0, spannableString.Length(), SpanTypes.ExclusiveExclusive);
                menuItem.SetTitle(spannableString);
            }
     
    }
    public CustomBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
    {
        ShellContext = shellContext;
    }
    private IShellContext ShellContext { get; }
  }
}
public class CustomTypefaceSpan : TypefaceSpan
{
    private float? FontSize { get; }
    private readonly Typeface _typeface;
    public CustomTypefaceSpan(string family, Typeface typeface, float? fontSize = null) : base(family)
    {
        FontSize = fontSize;
        _typeface = typeface;
    }
    public override void UpdateDrawState(TextPaint ds)
    {
        ApplyCustomTypeFace(ds, _typeface);
    }
    public override void UpdateMeasureState(TextPaint paint)
    {
        ApplyCustomTypeFace(paint, _typeface);
    }
    private void ApplyCustomTypeFace(Paint paint, Typeface tf)
    {
        if (FontSize != null && FontSize != 0)
            paint.TextSize = FontSize.Value;
        paint.SetTypeface(tf);
    }
}

在 MauiProgram.cs 中添加一个调用 builder 对象的代码段。

 .ConfigureMauiHandlers(handlers =>
            {
#if ANDROID
                handlers.AddHandler(typeof(Shell), typeof(Platforms.Android.Renderers.CustomShellRenderer));
#endif
            });

我会研究iOS并相应地更新代码。

- Ahmed Samy Moursi Hashwa