Övning: Implementera fliknavigering

Slutförd

I astronomiappen uppmanas du att kombinera flikar med den utfällbara menyn för att underlätta navigeringen mellan de olika sidorna.

Det första du väljer att göra är att ta bort alla sidor från den utfällbara menyn och lägga till dem i en TabBar, så att du kan se hur appen känns.

Lägga till ett tabbar

1. Öppna sidan AppShell.xaml i Solution Explorer-fönstret.

2. På XAML-markeringssidan tar du bort allt i <Shell>.

3. Skapa en <TabBar> och en tom <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. Lägg sedan till en ShellContent i Tab och ange dess innehåll till MoonPhasePage.

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

5. Ge nu fliken en rubrik som ska visas och en ikon med egenskaperna Title och Icon .

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

6. Lägg till en annan Tab för SunrisePage. Ställ in dess Title till soluppgång och dess Icon till sun.png. Den färdiga XAML:en ser ut så här:

   <?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. Kör appen för att se hur den ser ut.

   

Kombinera fliksidor med en utfälld meny

Du bestämmer dig för att det är meningsfullt att ha sidorna för månfasen och soluppgången på samma fliksida. Det är också klokt att hålla sidan separat. Så du bestämmer dig för att lägga till den utfällbara menyn igen. Det första utfällbara objektet visar fliksidan och den andra sidan om.

1. TabBar Ta bort och alla underordnade objekt som finns i den.

2. Lägg till i en <FlyoutItem>. Ange dess Title egenskap till Astronomi och dess ikon till moon.png.

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

3. <FlyoutItem>I lägger du till en <ShellContent> som pekar på MoonPhasePage. Ställ in egenskapen Title på Moon Phase och Icon egenskapen till moon.png.

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

4. Inom samma <FlyoutItem>lägger du till en annan <ShellContent> för att peka på SunrisePage. Ange egenskapen Title Sunrise och egenskapen till sun.png.Icon

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

   Om du nu trycker på det här utfällbara objektet visas en fliksida med två flikar.

5. Om du vill skapa ett nytt utfällt objekt som pekar på AboutPagelägger du till en ny <FlyoutItem>. Ställ in egenskapen Title på Om och Icon egenskapen till question.png.

6. I det <FlyoutItem>lägger du till en <ShellContent> som pekar på AboutPage.

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

7. Kör appen igen. Du bör se två objekt i den utfällbara menyn. Den första öppnar en fliksida som innehåller MoonPhasePage och SunrisePage. Den andra visar AboutPage sig själv.

Behöver du hjälp?

Den sista XAML-koden för AppShell.xaml bör se ut så här:

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