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 Title su l’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>. Impostare 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 proprietà Title su Moon Phase e la proprietà Icon 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 proprietà Title su Sunrise e la proprietà Icon 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>. Impostare 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>