.Net MAUI ShellでMoreタブのタイトルを変更する方法について

.Net MAUIのShellではタブに6ページ以上を表示させると、以下のように5ページ以降のページをMoreタブに集めます。

当記事では、このMoreタブのタイトルを変更していきます。

紹介環境
- 開発環境
対応方法
利用方法
動作イメージ
- Android
- iOS
終わりに

紹介環境

当記事は以下の環境で作成しています。

開発環境

Visual Studio 2026
.Net 10
Android 16
iOS 26.1

対応方法

ファイル構造は以下で作成しています。良ければ参考にしてください。

手順1：MAUI側のコントロールを準備します

Moreタブの文言を変更するためにカスタム添付プロパティを準備します。

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.CustomControls;

/// <summary>
/// TabBarのカスタム添付プロパティを定義するクラス
/// </summary>
public class CustomTabBar
{
    /// <summary>
    /// MoreTitleを取得します。
    /// </summary>
    /// <param name="obj"></param>
    /// <returns></returns>
    public static string? GetMoreTitle(BindableObject obj)
    {
        return (string)obj.GetValue(MoreTitleProperty);
    }

    /// <summary>
    /// MoreTitleを設定します。
    /// </summary>
    /// <param name="obj"></param>
    /// <param name="value"></param>
    public static void SetMoreTitle(BindableObject obj, string? value)
    {
        obj.SetValue(MoreTitleProperty, value);
    }

    /// <summary>
    /// その他のタイトル
    /// </summary>
    public static readonly BindableProperty MoreTitleProperty =
        BindableProperty.Create("MoreTitle", typeof(string), typeof(CustomTabBar));
}

手順2：【Android】ハンドラーをカスタマイズします

ShellBottomNavViewAppearanceTrackerをカスタマイズしていきます。

ShellBottomNavViewAppearanceTrackerは直接呼び出せないので、以下のようにShellRendererを経由させます。

using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using SampleApp.Platforms.Android.Handlers.ShellRenderers;

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.Platforms.Android.Handlers;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new CustomShellBottomNavViewAppearanceTracker(this, shellItem);
    }
}

次にShellBottomNavViewAppearanceTrackerを以下のようにカスタマイズしていきます。タブの最大ページ数には、BottomNavigationView.MaxItemCountを利用しています。

using Android.Views;
using Google.Android.Material.BottomNavigation;
using Microsoft.Maui.Controls.Platform.Compatibility;
using SampleApp.CustomControls;

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.Platforms.Android.Handlers.ShellRenderers;

public class CustomShellBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
{
    private readonly ShellItem _shellItem;

    public CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
    {
        _shellItem = shellItem;
    }

    public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView, appearance);

        if (_shellItem.Items.Count > bottomView.MaxItemCount)
        {
            string? moreTitle = CustomTabBar.GetMoreTitle(_shellItem);
            if (!string.IsNullOrEmpty(moreTitle))
            {
                bottomView.Menu.GetItem(bottomView.MaxItemCount - 1)?.SetTitle(moreTitle);
            }
            else
            {
                bottomView.Menu.GetItem(bottomView.MaxItemCount - 1)?.SetTitle("More");
            }
        }
    }
}

手順2：【iOS】ハンドラーをカスタマイズします

ShellItemRendererをカスタマイズしていきます。

ShellItemRendererは直接呼び出せないので、以下のようにShellRendererを経由させます。

using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using SampleApp.Platforms.iOS.Handlers.ShellRenderers;

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.Platforms.iOS.Handlers;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)
    {
        return new CustomShellItemRenderer(this)
        {
            ShellItem = item
        };
    }
}

次にShellItemRendererを以下のようにカスタマイズしていきます。MoreタブをカスタマイズするためにMoreNavigationControllerを利用しています。

using Microsoft.Maui.Controls.Platform.Compatibility;
using SampleApp.CustomControls;

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.Platforms.iOS.Handlers.ShellRenderers;

public class CustomShellItemRenderer : ShellItemRenderer
{
    public CustomShellItemRenderer(IShellContext context) : base(context)
    {
    }

    public override void ViewDidAppear(bool animated)
    {
        base.ViewDidAppear(animated);

        string? moreTitle = CustomTabBar.GetMoreTitle(ShellItem);
        if (!string.IsNullOrEmpty(moreTitle))
        {
            MoreNavigationController?.TopViewController.Title = moreTitle;
        }
        else
        {
            MoreNavigationController?.TopViewController.Title = "More";
        }
    }
}

手順3：カスタマイズしたハンドラーを登録します

以下のようにカスタマイズしたハンドラーをMauiProgramで登録します。

#if ANDROID

using SampleApp.Platforms.Android.Handlers;

#elif IOS

using SampleApp.Platforms.iOS.Handlers;

#endif

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>();

        builder.ConfigureMauiHandlers(handlers =>
        {
#if ANDROID || IOS
            handlers.AddHandler<Shell, CustomShellRenderer>();
#endif
        });

        return builder.Build();
    }
}

利用方法

利用する際は、AppShell.xamlで以下のように実装していきます。例ではその他に変更しています。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SampleApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:SampleApp.Pages"
    xmlns:control="clr-namespace:SampleApp.CustomControls"
    Title="SampleApp">

    <TabBar control:CustomTabBar.MoreTitle="その他">
        <!-- 省略 -->
    </TabBar>
</Shell>