.NET MAUI AppShell.xaml の使い方とサンプルコード

AppShell.xaml とは何か、何に使われるか

AppShell.xaml は、.NET Multi-platform App UI (.NET MAUI) フレームワークの一部であり、アプリケーションのメインウィンドウとして機能します。AppShell.xaml ファイルは、アプリケーションの外観とナビゲーションを設定するために使用されます。このファイルには、アプリケーション内の画面を表示するためのページのコンテナや、ナビゲーションバーやタブバーなどのコントロールを定義することができます。

AppShell.xaml はどのように動作するのか

AppShell.xaml ファイルには、以下のような要素が含まれます。

• Shell レイアウト：アプリケーションのルート要素であり、アプリケーション内の全体的なレイアウトを定義します。
• FlyoutItem：ナビゲーションバーに表示されるアイテムを定義します。このアイテムには、アイコン、テキスト、および表示するページが含まれます。
• TabBar：アプリケーションのタブバーを定義します。この要素には、各タブに表示するページとアイコンが含まれます。
• Tab：タブバー内の各タブを定義します。この要素には、表示するページとアイコンが含まれます。
• ShellContent：ページのコンテンツを表示するためのコンテナを定義します。

AppShell.xaml ファイルは、ページのナビゲーション、アプリケーション内の画面の切り替え、タブの切り替え、ナビゲーションバーの制御など、多くの機能を提供します。

AppShell.xaml を使用するときに必要な手順

AppShell.xaml を使用するためには、以下の手順が必要です。

1. .NET MAUI アプリケーションを作成します。
2. AppShell.xaml ファイルを作成します。
3. App.xaml ファイルで AppShell.xaml を指定します。
4. AppShell.xaml ファイルで FlyoutItem、TabBar、Tab、ShellContent 要素を定義します。
5. AppShell.xaml ファイルで、各要素のプロパティを設定し、ページのナビゲーション、タブの切り替え、ナビゲーションバーの制御などの動作を設定します。
6. 各ページで、NavigationPage.HasNavigationBar プロパティを true に設定することで、ナビゲーションバーを表示することができます。
7. ページのコンテンツを ShellContent 要素内に配置します。

AppShell.xaml の利点と欠点

AppShell.xaml を使用することで、アプリケーションの外観やナビゲーションを簡単に定義できます。また、FlyoutItem や TabBar を使用することで、ユーザーがアプリケーション内を簡単にナビゲーションできるようになります。さらに、AppShell.xaml を使用することで、複数のページで共通するナビゲーションバーを簡単に実装できます。

一方で、AppShell.xaml を使用する場合、レイアウトの柔軟性が制限されることがあります。また、アプリケーションの外観をカスタマイズする場合、XAML の知識が必要になるため、開発の敷居が高くなる可能性があります。

実際のサンプルコード

以下は、AppShell.xaml を使用したシンプルなアプリケーションのサンプルコードです。このアプリケーションでは、タブを作成し、タブでページを切り替えることができます。今回新規ページは作成しないので、遷移先はすべてMainPageにしています。

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

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

    <ShellContent
        Title="About"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="AboutPage" />

</Shell>

このコードでは、ShellContent 要素が2つ定義されています。最初の ShellContent 要素では、タイトルが "Home" で、ContentTemplate プロパティが MainPage を参照するように設定されています。この MainPage は、アプリケーションのホームページとして機能するコンテンツページを表します。

2番目の ShellContent 要素では、タイトルが "About" で、ContentTemplate プロパティが MainPage を参照するように設定されています。この MainPage は、アプリケーションのアバウトページとして機能するコンテンツページを表します。

デフォルトだと、Shell.FlyoutBehavior プロパティが "Disabled" に設定されているため、フライアウトは無効になっています。わかりやすくするため、こちらの値は、Flyoutに変更します。

以上のように、AppShell.xaml ファイルには複数の ShellContent 要素を追加することができ、各 ShellContent 要素はアプリケーション内の異なるコンテンツページを表します。

結果