Implementare l’esplorazione a schede con la shell di .NET MAUI
- 10 minuti
Lo spostamento tramite schede è un modello di spostamento in cui viene visualizzata in modo permanente una barra con schede (una serie di controlli selezionabili disposti in riga) nella parte superiore o inferiore dello schermo. Lo spostamento tramite schede fornisce un meccanismo che consente a un utente di selezionare una pagina in un'app con più pagine.
In questa unità si apprende come creare un'app che implementa lo spostamento tramite schede.
Che cos'è lo spostamento tramite schede?
In un'app che usa lo spostamento tramite schede, ogni scheda rappresenta una sezione o una pagina specifica dell'app. Gli utenti selezionano le schede visualizzate nell'elenco per spostarsi tra i diversi contenuti dell'applicazione. La figura seguente mostra come usare lo spostamento tramite schede nell'app Orologio di iOS. Le icone evidenziate nella parte inferiore della pagina consentono di passare da una vista all'altra. Queste icone corrispondono alle schede e le viste sono pagine a schede:
Poiché l'elenco schede è sempre visibile, questa modalità di spostamento consente agli utenti di passare rapidamente da un contenuto all'altro all'interno di un'applicazione. La modalità di spostamento tra schede è ideale quando un'applicazione contiene varie sezioni che si prevede vengano usate di frequente. Un ottimo esempio è offerto proprio dalle applicazioni di orologio. Le sezioni relative all'orologio, alla sveglia e al cronometro è probabile che vengano usate spesso.
Nei dispositivi mobili l'elenco schede dispone, in genere, di una quantità limitata di spazio e può includere solo un determinato numero di schede, a seconda delle dimensioni e dell'orientamento del dispositivo. È consigliabile usare solo da tre a quattro schede. Se si includono altre schede, non si ha la certezza che lo spazio a disposizione sia sufficiente per visualizzarle tutte su tutti i dispositivi. Nei sistemi operativi supportati da .NET MAUI è prevista un'area di overflow. Quest'area fornisce spazio aggiuntivo per accedere alle schede per cui non è disponibile spazio sufficiente sullo schermo. Per passare alle schede di overflow, tuttavia, l'utente deve eseguire alcune operazioni aggiuntive. Queste sezioni sono inoltre meno facili da trovare.
Se sono necessarie più di quattro schede, valutare se usare un modello di spostamento diverso, ad esempio tramite riquadri a comparsa. Lo spostamento tramite schede non è inoltre l'opzione migliore se i dati formano una gerarchia naturale master-dettagli. In questi casi, è consigliabile scegliere lo spostamento orizzontale.
Spostamento tramite schede in un'app .NET MAUI
Usa l'oggetto TabBar per implementare lo spostamento tramite schede in un'app shell .NET MAUI. L'oggetto TabBar visualizza una serie di schede e cambia automaticamente il contenuto visualizzato quando l'utente seleziona una scheda. La figura seguente mostra le aree dell'interfaccia utente.
Per usare le schede in un'applicazione shell .NET MAUI, creare un'istanza della classe TabBar come figlio della classe Shell. Aggiungere quindi oggetti Tab a TabBar. In Tab un oggettoShellContent deve essere impostato su un oggetto ContentPage.
Creare un'istanza di TabbedPage
È possibile creare un'istanza di TabBar come figlio della classe Shell. Aggiungere oggetti Tab come elementi figlio di TabBar in base alle esigenze. In Tab un oggettoShellContent deve essere impostato su un oggetto ContentPage.
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<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>
Schede all'interno di un menu con riquadro a comparsa
Un riquadro a comparsa può aprire una pagina con una barra delle schede che visualizza una o più schede.
Per implementare questa progettazione, aggiungi un elemento <ShellContent> all'interno di <FlyoutItem> per ogni scheda che desideri visualizzare.
Impostare Title e Icon in <ShellContent> per controllare il titolo e l'icona della scheda.
<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>