Esercizio: implementare l’esplorazione a schede

Completato

È stata ricevuta una richiesta di combinare le schede con il riquadro a comparsa nell'app relativa all'astronomia per facilitare lo spostamento tra le diverse pagine.

La prima cosa che si decide di fare è rimuovere tutte le pagine dal riquadro a comparsa e aggiungerle a un oggetto TabBar, in modo da poter vedere come sarà l'aspetto dell'app.

Aggiunta di un oggetto TabBar

1. Nella finestra Esplora soluzioni aprire la pagina AppShell.xaml .

2. Nella pagina del markup XAML eliminare tutti gli elementi all'interno di <Shell>.

3. Creare un oggetto <TabBar> e un oggetto <Tab> vuoto.

   <?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. Quindi, aggiungi un oggetto ShellContent a Tab e impostane il contenuto su MoonPhasePage.

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

5. Assegnare ora alla scheda un titolo da visualizzare e un'icona usando le proprietà Title e Icon.

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

6. Aggiungere un altro oggetto Tab per SunrisePage. Imposta il suo Title a alba e il suo Icon su sun.png. Il codice XAML completato è simile al seguente:

   <?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. Eseguire l'app per verificarne l'aspetto.

   

Combinare le schede con un riquadro a comparsa

Si decide che può essere appropriato inserire le pagine relative a fasi lunari e alba nella stessa scheda. È anche consigliabile tenere separata la pagina relativa alle informazioni. Si decide quindi di aggiungere di nuovo il riquadro a comparsa. Il primo elemento del riquadro a comparsa visualizza la scheda e il secondo la pagina relativa alle informazioni.

1. Elimina il TabBar e tutti gli elementi figlio contenuti in esso.

2. Al suo posto, aggiungere un oggetto <FlyoutItem>. Imposta la proprietà Title su Astronomy e l'icona su moon.png.

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

3. In <FlyoutItem>, aggiungi un <ShellContent> che punta a MoonPhasePage. Impostare la sua Title proprietà su Moon Phase e la Icon proprietà su moon.png.

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

4. Nello stesso <FlyoutItem>, aggiungi un altro <ShellContent> per puntare a SunrisePage. Impostare la Title proprietà su Sunrise e la Icon proprietà su 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>
   

   A questo punto, toccando questo riquadro a comparsa viene visualizzata una pagina con due schede.

5. Per creare un nuovo riquadro a comparsa che punta a AboutPage, aggiungere un nuovo oggetto <FlyoutItem>. Imposta la proprietà Title su About e la proprietà Icon su question.png.

6. In <FlyoutItem>, aggiungi un <ShellContent> che punta a AboutPage.

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

7. Eseguire nuovamente l'app. Nel riquadro a comparsa verranno visualizzati due elementi. Il primo apre una scheda che contiene MoonPhasePage e SunrisePage. Il secondo mostra l'oggetto AboutPage da solo.

Hai bisogno di assistenza?

Il codice XAML finale per AppShell.xaml dovrebbe essere simile all'esempio seguente:

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