アイキャッチ画像

.Net MAUIでiOS26のタブをスクロール時に最小化する方法について

.Net MAUIでiOS26のタブをスクロール時に最小化する方法を紹介していきます。

紹介環境

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

開発環境

  • Visual Studio 2026
  • .Net 10
  • iOS 26.1

はじめに

タブをスクロール時に最小化させるために、iOS26以降で利用できるUITabBarController.MinimizeBehaviorを利用します。

UITabBarController.MinimizeBehaviorには、以下の種類があります。

  • automatic:システムのデフォルト
  • never:タブを最小化させない
  • onScrollDown:スクロールダウン時に最小化
  • onScrollUp:スクロールアップ時に最小化

詳細は以下から確認できます。

対応方法

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

ファイル構造

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

UITabBarController.MinimizeBehaviorに合わせて制御できるように、以下の列挙体を用意します。

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

/// <summary>
/// iOSのタブバーの最小化動作を定義する列挙体
/// </summary>
public enum TabBarMinimizeBehavior
{
    Automatic,
    Never,
    OnScrollDown,
    OnScrollUp
}

次に様々な画面で利用できるように添付プロパティを利用します。作成した内容が以下のようになります。

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

/// <summary>
/// Shellのカスタム添付プロパティを定義するクラス
/// </summary>
public static class CustomShell
{
    /// <summary>
    /// <c>iOSTabBarMinimizeBehavior</c>のプロパティ名
    /// </summary>
    public const string iOSTabBarMinimizeBehaviorPropertyName = "iOSTabBarMinimizeBehavior";

    /// <summary>
    /// iOSのタブバーの最小化動作を取得します。
    /// </summary>
    /// <param name="obj"></param>
    /// <returns></returns>
    public static TabBarMinimizeBehavior GetiOSTabBarMinimizeBehavior(BindableObject obj)
    {
        return (TabBarMinimizeBehavior)obj.GetValue(iOSTabBarMinimizeBehaviorProperty);
    }

    /// <summary>
    /// iOSのタブバーの最小化動作を設定します。
    /// </summary>
    /// <param name="obj"></param>
    /// <param name="value"></param>
    public static void SetiOSTabBarMinimizeBehavior(BindableObject obj, TabBarMinimizeBehavior value)
    {
        obj.SetValue(iOSTabBarMinimizeBehaviorProperty, value);
    }

    /// <summary>
    /// iOSのタブバーの最小化動作を表す添付プロパティ
    /// </summary>
    public static readonly BindableProperty iOSTabBarMinimizeBehaviorProperty =
        BindableProperty.CreateAttached(iOSTabBarMinimizeBehaviorPropertyName, typeof(TabBarMinimizeBehavior), typeof(CustomShell), TabBarMinimizeBehavior.Automatic);
}

手順2:ハンドラーをカスタマイズします

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

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

using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;

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

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellPageRendererTracker CreatePageRendererTracker()
    {
        return new CustomShellPageRendererTracker(this);
    }
}

次にShellPageRendererTrackerを以下のようにカスタマイズしていきます。タブをスクロール時に最小化させるためにTabBarMinimizeBehaviorを利用していきます。

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

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

public class CustomShellPageRendererTracker(IShellContext context) : ShellPageRendererTracker(context)
{
    protected override void OnPageSet(Page oldPage, Page newPage)
    {
        base.OnPageSet(oldPage, newPage);

        if (oldPage is not null)
        {
            oldPage.Loaded -= OnPageLoaded;
        }

        if (newPage is not null)
        {
            newPage.Loaded += OnPageLoaded;
        }
    }

    private void OnPageLoaded(object? sender, EventArgs e)
    {
        if (sender is Page page)
        {
            UpdateTabBarMinimizeBehavior(page);
        }
    }

    private void UpdateTabBarMinimizeBehavior(Page page)
    {
        if (!OperatingSystem.IsIOSVersionAtLeast(26))
            return;

        TabBarMinimizeBehavior tabBarMinimizeBehavior = CustomShell.GetiOSTabBarMinimizeBehavior(page);

        this.ViewController.TabBarController?.TabBarMinimizeBehavior = tabBarMinimizeBehavior switch
        {
            TabBarMinimizeBehavior.Never => UIKit.UITabBarMinimizeBehavior.Never,
            TabBarMinimizeBehavior.OnScrollDown => UIKit.UITabBarMinimizeBehavior.OnScrollDown,
            TabBarMinimizeBehavior.OnScrollUp => UIKit.UITabBarMinimizeBehavior.OnScrollUp,
            _ => UIKit.UITabBarMinimizeBehavior.Automatic,
        };
    }
}

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

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

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

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

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

        return builder.Build();
    }
}

利用方法

利用する際は、画面で以下のように実装していきます。例ではOnScrollDownを利用しています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:control="clr-namespace:SampleApp.CustomControls"
    control:CustomShell.iOSTabBarMinimizeBehavior="OnScrollDown"
    x:Class="SampleApp.Pages.OnScrollDownPage"
    Title="OnScrollDownPage">
    <ScrollView>
        <VerticalStackLayout>
            <!-- 省略 -->
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

動作イメージ

動作イメージは以下のようになります。

最小化しない時

動作イメージ(最小化しない時)

最小化した時

動作イメージ(最小化した時)

終わりに

iOS 26でスクロール時にタブの最小化が行えることを知り、実装してみたいと思いましたので紹介してみました。この記事や役に立てば幸いです。