Exercice : Implémenter la navigation par onglet

Effectué

Dans l’application d’astronomie, vous êtes invité à combiner des onglets avec le menu volant pour faciliter la navigation entre les différentes pages.

La première chose que vous décidez de faire est de supprimer toutes les pages du menu volant et de les ajouter à une TabBar, afin de voir comment l’application se comporte.

Ajout d’une barre d’onglets

1. Dans la fenêtre Explorateur de solutions, ouvrez la page AppShell.xaml.

2. Dans la page de balisage XAML, supprimez tout ce qui se trouve à l’intérieur du <Shell>.

3. Créer une <TabBar> et un <Tab> vide.

   <?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. Ensuite, ajoutez un ShellContent au Tab et définissez son contenu sur le MoonPhasePage.

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

5. Maintenant, attribuez à l’onglet un titre à afficher et une icône en utilisant les propriétés Title et Icon.

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

6. Ajoutez une autre Tab pour la SunrisePage. Définissez son Title sur lever du soleil et son Icon sur sun.png. Le code XAML terminé ressemble à ceci :

   <?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. Exécutez l’application pour voir à quoi elle ressemble.

   

Combiner des pages à onglets avec un menu volant

Vous estimer qu’il est judicieux d’avoir les pages de phase de la lune et de lever du soleil dans la même page à onglets. Il est également judicieux de séparer la page À propos. Vous décidez donc d’ajouter à nouveau le menu volant. Le premier élément de menu volant affiche la page à onglets, et le second la page À propos.

1. Supprimez la TabBar et tous les éléments enfants qu’il contient.

2. À sa place, ajoutez un <FlyoutItem>. Définissez sa propriété Title sur Astronomie et son icône sur moon.png.

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

3. Dans le <FlyoutItem>, ajoutez un <ShellContent> pointant vers le MoonPhasePage. Définissez sa propriété Title sur Phase de la lune, et sa propriété Icon sur moon.png.

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

4. Dans le même <FlyoutItem>, ajoutez un autre <ShellContent> pointant vers la SunrisePage. Définissez sa propriété Title sur Lever du soleil, et sa propriété Icon sur 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>
   

   Un appui sur cet élément de menu volant a désormais pour effet d’afficher une page d’onglets avec deux onglets.

5. Pour créer un élément de menu volant pointant vers la AboutPage, ajoutez un nouveau <FlyoutItem>. Définissez sa propriété Title sur À propos, et sa propriété Icon sur question.png.

6. Dans cet <FlyoutItem>, ajoutez un <ShellContent> pointant vers la AboutPage.

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

7. Réexécutez l’application. Vous devriez voir deux éléments dans le menu volant. Le premier ouvre une page à onglets contenant la MoonPhasePage et la SunrisePage. Le second affiche la AboutPage.

Besoin d'aide ?

Le code XAML final pour AppShell.xaml devrait ressembler à cet exemple :

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