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

  • 10 分

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

実行するのを決めた最初のことは、アプリをどのように感じるかを確認できるように、ポップアップからすべてのページを削除し、それらを 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. SunrisePage に別の Tab を追加します。 その 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. アプリを実行して、どのように表示されるかを確認します。

    Screenshot of app running with two tabs instead of using flyout menu.

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

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

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

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

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

</FlyoutItem>

  3. <FlyoutItem> 内で、MoonPhasePage を指す <ShellContent> を追加します。 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> 内で、SunrisePage を指すもう 1 つの <ShellContent> を追加します。 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> 内で、AboutPage を指す <ShellContent> を追加します。

    <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>