演習: タブ ナビゲーションを実装する

天文学アプリでは、異なるページ間のナビゲーションに役立つように、タブとポップアップを組み合わせることが求められています。

実行するのを決めた最初のことは、アプリをどのように感じるかを確認できるように、ポップアップからすべてのページを削除し、それらを TabBar に追加することです。

TabBar を追加する

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

2. XAML マークアップ ページで、<Shell> の内側にあるすべてを削除します。

3. <TabBar> と空の <Tab> を作成します。

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">
   
       <TabBar>
           <Tab>
   
           </Tab>
       </TabBar>
   </Shell>
   

4. 次に、ShellContent を Tab に追加し、そのコンテンツを MoonPhasePage に設定します。

   <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
   </TabBar>
   

5. ここで Title プロパティと Icon プロパティを使用して、表示するタイトルとアイコンをタブに提供します。

   <Tab Title="Moon Phase" Icon="moon.png">
   

6. Tab に別の SunrisePage を追加します。 その Title を sunrise に設定し、その Icon を sun.png に設定します。 完成した XAML は次のようになります。

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">  
   
       <TabBar>
           <Tab Title="Moon Phase" Icon="moon.png">
               <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
           </Tab>
           <Tab Title="Sunrise" Icon="sun.png">
               <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
           </Tab>
       </TabBar>
   </Shell>
   

7. アプリを実行して、どのように表示されるかを確認します。

   

タブ ページとポップアップを組み合わせる

あなたは、同じタブ ページに月相のページと日の出のページを含めることは理にかなうと判断しています。 about ページは分けておくのも理にかなっています。 そのため、ポップアップを再度追加することにします。 最初のポップアップ アイテムにはタブ ページが表示され、2 つ目には概要ページが表示されます。

1. TabBar とその中に含まれるすべての子アイテムを削除します。

2. その代わりに、<FlyoutItem> を追加します。 Title プロパティを Astronomy に、アイコンを moon.png に設定します。

   <FlyoutItem Title="Astronomy" Icon="moon.png">
   
   </FlyoutItem>
   

3. <FlyoutItem> 内で、<ShellContent> を指す MoonPhasePage を追加します。 Title プロパティを Moon Phase に、Icon プロパティを moon.png に設定します。

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

4. 同じ <FlyoutItem> 内で、<ShellContent> を指すもう 1 つの SunrisePage を追加します。 Title プロパティを Sunrise に、Icon プロパティを sun.png に設定します。

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

   これで、このポップアップ アイテムをタップすると、2 つのタブがあるタブ ページが表示されるようになりました。

5. AboutPage を指し示す新しいポップアップ項目を作成するには、新しい <FlyoutItem> を追加します。 Title プロパティを About に、Icon プロパティを question.png に設定します。

6. その <FlyoutItem> 内で、<ShellContent> を指す AboutPage を追加します。

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

7. 再度アプリを実行します。 ポップアップ内に 2 つの項目が表示されるはずです。 最初のものは、MoonPhasePage と SunrisePage を含むタブ ページを開きます。 2 つ目からは、それ自体で AboutPage が表示されます。

お困りの際は、

AppShell.xaml の最終的な XAML コードは、次の例のようになるはずです。

<?xml version="1.0" encoding="UTF-8" ?>
<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">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->

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

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

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