Oefening: Tabbladnavigatie implementeren

Voltooid

In de astronomie-app wordt u gevraagd tabbladen te combineren met de flyout om te helpen met navigatie tussen de verschillende pagina's.

Het eerste wat u besluit te doen, is alle pagina's uit de flyout verwijderen en toevoegen aan een TabBar, zodat u kunt zien hoe de app zich voelt.

Een tabbalk toevoegen

1. Open in het venster Solution Explorer de pagina AppShell.xaml .

2. Verwijder alles in de <Shell>pagina XAML-markeringen.

3. Maak een <TabBar> en een lege <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. Voeg vervolgens een ShellContent aan de Tab en stel de inhoud ervan in op de MoonPhasePage.

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

5. Geef nu het tabblad een titel die moet worden weergegeven en een pictogram met behulp van de Title en Icon eigenschappen.

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

6. Voeg een andere Tab toe voor de SunrisePage. Stel de Titlezonsopkomst en het op Iconsun.png. De voltooide XAML ziet er als volgt uit:

   <?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. Voer de app uit om te zien hoe deze eruitziet.

   

Tabbladpagina's combineren met een flyout

U besluit dat het zinvol is om de maanfase en zonsopgangpagina's op dezelfde tabbladpagina te hebben. Het is ook zinvol om de infopagina gescheiden te houden. Dus u besluit de flyout weer toe te voegen. Het eerste flyout-item geeft de tabbladpagina weer en de tweede de pagina over.

1. Verwijder de TabBar onderliggende items en alle onderliggende items erin.

2. Voeg op zijn plaats een <FlyoutItem>. Stel de eigenschap ervan Title in op Astronomie en het bijbehorende pictogram op moon.png.

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

3. Voeg binnen de <FlyoutItem>, een <ShellContent> die verwijst naar de MoonPhasePage. Stel de eigenschap in Title op Maanfase en Icon eigenschap op moon.png.

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

4. Voeg binnen hetzelfde <FlyoutItem>bestand nog een <ShellContent> toe om naar de SunrisePage. Stel de Title eigenschap in op Zonsopgang en Icon eigenschap op 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>
   

   Als u nu op dit flyout-item tikt, wordt een tabbladpagina met twee tabbladen weergegeven.

5. Als u een nieuw flyout-item wilt maken dat naar de AboutPageflyout verwijst, voegt u een nieuw <FlyoutItem>item toe. Stel de eigenschap in Title op Info en Icon eigenschap op question.png.

6. <FlyoutItem>Voeg daarbinnen een <ShellContent> punt toe aan de AboutPage.

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

7. Voer de app opnieuw uit. U ziet twee items in de flyout. De eerste opent een tabbladpagina met de MoonPhasePage en SunrisePage. De tweede geeft de AboutPage zelf weer.

Hulp nodig?

De uiteindelijke XAML-code voor AppShell.xaml moet er als volgt uitzien:

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