アイキャッチ画像

.NET MAUI Shellでメニュー・タブにアプリ終了機能を配置する方法について

.NET MAUI Shellでメニューやタブにアプリ終了機能を配置する方法を紹介していきます。

紹介環境

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

開発環境

  • Visual Studio 2022
  • .Net 8

1.アプリ終了機能を実装

アプリ終了機能を実装してきます。

ShellContent や ShellItem に選択時のイベントが存在しないため、画面読み込み時のイベントにアプリ終了機能を実装していきます。

実装してみた例は以下のようになります。

<?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"
             x:Class="SampleMauiApp.ClosePage"
             Title="閉じる">
    <VerticalStackLayout Loaded="Layout_Loaded">
    </VerticalStackLayout>
</ContentPage>
namespace SampleMauiApp;

public partial class ClosePage : ContentPage
{
    public ClosePage()
    {
        InitializeComponent();
    }

    private void Layout_Loaded(object sender, EventArgs e)
    {
        CloseApp();
    }

    private void CloseApp()
    {
#if IOS
        // iOSは、「Application.Quit();」で終了できません。
        // そのため、以下で終了させます。
        Environment.Exit(0);
#else
        App.Current?.Quit();
#endif
    }
}

アプリ終了機能について

.Net MAUIのアプリ終了は「Application.Quit();」で行えます。しかし、iOSのアプリ終了は「Application.Quit();」で行えないため、「Environment.Exit(0);」を利用しています。

    private void CloseApp()
    {
#if IOS
        // iOSは、「Application.Quit();」で終了できません。
        // そのため、以下で終了させます。
        Environment.Exit(0);
#else
        App.Current?.Quit();
#endif
    }

LayoutクラスのLoadedを利用する理由について

画面読み込み時のイベントはPageクラスのAppearingが存在していますが、Appearingで「Application.Quit();」を実装した場合、「Value does not fall within the expected range.」というエラーになることがあります。

このエラーを回避するためにLayoutクラスのLoadedを利用します。

2.メニュー・タブにアプリ終了機能を配置

アプリ終了機能を実装した画面を配置します。

以下は一例になります。利用する際はアプリ終了機能を利用したい場所にClosePageを配置してください。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SampleMauiApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SampleMauiApp"
    Shell.FlyoutBehavior="Locked"
    Title="SampleMauiApp">

    <ShellContent
            Title="Home"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="Home" />
    <ShellContent
            Title="閉じる"
            ContentTemplate="{DataTemplate local:ClosePage}"
            Route="Close" />
</Shell>

動作イメージ

動作イメージ(Windows)

おわりに

.NET MAUI Shellでメニューやタブにアプリ終了機能を配置する方法を紹介してみました。最初はPageクラスのAppearingに実装するだけだと思いましたが、エラーになったので意外と苦戦しました。