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 を使用するためには、以下の手順が必要です。
- .NET MAUI アプリケーションを作成します。
- AppShell.xaml ファイルを作成します。
- App.xaml ファイルで AppShell.xaml を指定します。
- AppShell.xaml ファイルで FlyoutItem、TabBar、Tab、ShellContent 要素を定義します。
- AppShell.xaml ファイルで、各要素のプロパティを設定し、ページのナビゲーション、タブの切り替え、ナビゲーションバーの制御などの動作を設定します。
- 各ページで、NavigationPage.HasNavigationBar プロパティを true に設定することで、ナビゲーションバーを表示することができます。
- ページのコンテンツを 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 要素はアプリケーション内の異なるコンテンツページを表します。
結果
![](https://prosen.net/wp-content/uploads/2023/03/Simulator-Screen-Shot-iPhone-14-2023-03-22-at-06.38.23-1-473x1024.png)
![](https://prosen.net/wp-content/uploads/2023/03/Simulator-Screen-Shot-iPhone-14-2023-03-22-at-06.38.30-473x1024.png)