演習: ポップアップ ナビゲーションを実装する

サンプル シナリオでは、天体、月の満ち欠け、日の出/日の入り時間に関する情報を表示するためのページを含む .NET MAUI アプリがあります。 アプリには [バージョン情報] ページも含まれています。 現在、これらのページはすべてスタンドアロンですが、ユーザーがそれらの間を移動するための論理的な方法を提供する必要があります。

この演習では、アプリにポップアップ ナビゲーションを追加します。

このモジュールでは、.NET 10.0 SDK を使用します。 任意のコマンド ターミナルで次のコマンドを実行して、.NET 10.0 がインストールされていることを確認します。

dotnet --list-sdks

次の例のような出力が表示されます。

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

10 で始まるバージョンが一覧に表示されていることを確実にします。 何も表示されていない場合、またはコマンドが見つからない場合は、 最新の .NET 10.0 SDK をインストールします。

スターター ソリューションを開く

1. exercise repo をクローンまたはダウンロードします。

   注意

   ビルドによって生成されたファイルが最大パス長を超えないようにするため、演習コンテンツを C:\dev などの短いフォルダー パスに複製またはダウンロードすることをお勧めします。

2. 複製されたリポジトリの exercise1 フォルダーに移動し、start フォルダーに移動します。

3. Visual Studio を使用して、Astronomy.sln ソリューションまたは Visual Studio Code 内のフォルダーを開きます。

4. ソリューション エクスプローラー ウィンドウの Astronomy プロジェクトで Pages フォルダーを展開します。 このフォルダーには、次のページが含まれています。

   • AboutPage。 このページには、アプリの バージョン情報 が表示されます。
   • MoonPhasePage。 このページには、地球から見た月の満ち欠けに関する特定の情報が表示されます。
   • SunrisePage。 このページには、地球上の場所の日の出と日の入りの時間が表示されます。 データは Sunrise Sunset web service によって提供されます。

5. アプリケーションをビルドし、実行します。 アプリが起動すると MoonPhasePage が表示されますが、現在、ユーザーが他のページに移動できるようにする手段はありません。

   次の画像は、Android エミュレーター上で実行されているアプリを示しています。

   

6. アプリを閉じて、Visual Studio または Visual Studio Code に戻ります。

ポップアップ ナビゲーションを追加する

1. ソリューション エクスプローラー ウィンドウで AppShell.xaml ページを開きます。

2. XAML マークアップ エディターで、既存の <ShellContent> の項目を <FlyoutItem> で囲みます。 Title 項目の <Flyout> プロパティを [Moon Phase] に設定します。 マークアップは次のようになります。

   <FlyoutItem Title="Moon Phase">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
   </FlyoutItem>
   

3. FlyoutIcon プロパティを <Shell> ノードに追加して画像を表示します。 既定では 3 本の水平バーが表示されますが、好みに合わせて変更できます。 マークアップは次のようになります。

   <Shell
       x:Class="Astronomy.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Astronomy.Pages"
       FlyoutIcon="moon.png">
   

4. アプリケーションを実行します。 これで、アプリの左上隅に月の画像が表示されます。

   

   アイコンをタップすると、ポップアップが表示されます。

   

5. 次に、ポップアップ オプションをさらに追加します。 先ほど作成したものの下に新しい <FlyoutItem> を作成し、その Title を [Sunrise] に設定します。 その ShellContent は、SunrisePage ページを指す必要があります。

6. 別の <FlyoutItem> を追加し、そのタイトルを [バージョン情報] に設定します。 今回は ShellContent を AboutPage に設定します。 これら 2 つのアイテムのための XAML は次のようになるはずです。

   <FlyoutItem Title="Sunrise">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

7. アプリを再実行すると、ポップアップに 3 つのオプションが表示されます。 ポップアップ アイテムをタップすると、それぞれのページが表示されます。

   

   注意

   Windows 以外のプラットフォームで実行している場合は、Sunrise/Sunset Times ページを機能させるために、そのプラットフォームでアプリの Location アクセス許可を有効にする必要がある場合があります。 たとえば、Android デバイスで、Location アクセスを [アプリを使用している間のみ許可] に設定します。

アイコンの追加

ポップアップ アイテムにやや空きがあることに気付いたかもしれません。 Icon プロパティを使用して、ポップアップ項目にアイコンを 追加できます。

一部の画像は、既に Resources\Images フォルダーに追加されており、使用できます。

1. 最初の Icon の FlyoutItem プロパティを [moon.png] に設定します。

   <FlyoutItem Title="Moon Phase" Icon="moon.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}" />
   </FlyoutItem>
   

2. sun.png と question.png をそれぞれ使用して、他の 2 つのポップアップ項目について繰り返します。

   <FlyoutItem Title="Sunrise" Icon="sun.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About" Icon="question.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

3. アプリを実行し、ポップアップを開きます。 各ポップアップ アイテムが、それに関連付けられたアイコンを持つようになりました。

   

ポップアップ ヘッダーを追加する

ポップアップ アイテムはポップアップ メニューの一番上に配置されているため、それらの区別が困難になっています。 View を使用して、上部にスペースを追加したり、さらに <Shell.FlyoutHeader> 全体を追加したりできます。

1. ポップアップ ヘッダーを <Shell> ノードの子として追加します。

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. <Shell.FlyoutHeader> の中で、任意のビュー階層を作成できます。 Grid の付いた Image を入れましょう。

   <Shell.FlyoutHeader>
       <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
           <Image Source="moon.png" />
       </Grid>
   </Shell.FlyoutHeader>