TabbedPage

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) TabbedPage gestisce una raccolta di elementi figlio di tipo Page, solo uno dei quali è completamente visibile alla volta. Ogni tab è identificato da una serie di schede nella parte superiore o inferiore della pagina. In genere, ogni elemento figlio sarà un ContentPage e, quando viene selezionata la sua scheda, il contenuto della pagina viene visualizzato.

TabbedPage definisce le proprietà seguenti:

• BarBackground, di tipo Brush, definisce lo sfondo della barra delle schede.
• BarBackgroundColor, di tipo Color, definisce il colore di sfondo della barra delle schede.
• BarTextColor, di tipo Color, rappresenta il colore del testo sulla barra delle schede.
• SelectedTabColor, di tipo Color, indica il colore di una scheda quando è selezionata.
• UnselectedTabColor, di tipo Color, rappresenta il colore di una scheda quando non è selezionata.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinatari di data binding e possono essere stilizzati.

Il titolo di una scheda è definito dalla Page.Title proprietà della pagina figlio e l'icona della scheda è definita dalla Page.IconImageSource proprietà della pagina figlio.

In un TabbedPage, ogni oggetto Page viene creato quando TabbedPage viene costruito. Ciò può causare un'esperienza utente scarsa, in particolare se TabbedPage è la pagina radice dell'app. Tuttavia, la shell MAUI di .NET consente di creare pagine accessibili tramite una barra delle schede su richiesta, in risposta alla navigazione. Per altre informazioni sulle app shell, vedere Shell.

Creare una TabbedPage

È possibile usare due approcci per creare un oggetto TabbedPage:

• Popolare il TabbedPage con una raccolta di oggetti figlio Page, come ad esempio una raccolta di oggetti ContentPage. Per altre informazioni, vedere Popolare un TabbedPage con una raccolta di pagine.
• Assegnare un insieme alla ItemsSource proprietà e assegnare un DataTemplate oggetto alla ItemTemplate proprietà per restituire pagine per gli oggetti nell'insieme. Per ulteriori informazioni, consultare Popolare un TabbedPage con un DataTemplate.

Indipendentemente dall'approccio adottato, la posizione della barra delle schede in un TabbedPage oggetto dipende dalla piattaforma:

• In iOS l'elenco delle schede viene visualizzato nella parte inferiore della schermata e il contenuto della pagina è sopra. Ogni scheda è costituita da un titolo e da un'icona. In modalità verticale, le icone della barra delle schede appaiono sopra i titoli delle schede. Nell'orientamento orizzontale, le icone e i titoli vengono visualizzati affiancati. Inoltre, è possibile visualizzare una barra a schede normale o compatta, a seconda del dispositivo e dell'orientamento. Se sono presenti più di cinque schede, verrà visualizzata una scheda Altro , che può essere usata per accedere alle schede aggiuntive.
• In Android l'elenco delle schede viene visualizzato nella parte superiore della schermata e il contenuto della pagina è riportato di seguito. Ogni scheda è costituita da un titolo e da un'icona. Tuttavia, le schede possono essere spostate nella parte inferiore della schermata con una proprietà specifica della piattaforma. Se sono presenti più di cinque schede e l'elenco di schede si trova nella parte inferiore della schermata, verrà visualizzata una scheda Altro che può essere usata per accedere alle schede aggiuntive. Per informazioni sullo spostamento delle schede nella parte inferiore della schermata, vedere Posizionamento della barra degli strumenti tabbedPage in Android.
• In Windows l'elenco delle schede viene visualizzato nella parte superiore della schermata e il contenuto della pagina è riportato di seguito. Ogni scheda è costituita da un titolo.

Popolare una TabbedPage con una collezione di Page

Un oggetto TabbedPage può essere popolato con una raccolta di oggetti figlio Page, che in genere saranno oggetti ContentPage. Questo si ottiene aggiungendo ContentPage oggetti come figli di TabbedPage:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <local:SchedulePage />
    <local:SettingsPage />
</TabbedPage>

Page gli oggetti aggiunti come elementi figlio di TabbedPage vengono aggiunti alla Children raccolta. La Children proprietà della MultiPage<T> classe, da cui TabbedPage deriva, è l'oggetto ContentProperty di MultiPage<T>. Pertanto, in XAML non è necessario assegnare in modo esplicito gli Page oggetti alla Children proprietà .

Lo screenshot seguente mostra l'aspetto della barra delle schede risultante in TabbedPage:

Il contenuto della pagina per una scheda viene visualizzato quando la scheda è selezionata.

Popolare un oggetto TabbedPage con un oggetto DataTemplate

TabbedPage eredita le proprietà associabili ItemsSource, ItemTemplate e SelectedItem dalla classe MultiPage<T>. Queste proprietà consentono di generare TabbedPage elementi figlio in modo dinamico, impostando la proprietà ItemsSource su una raccolta di oggetti IEnumerable con proprietà pubbliche adatte per i data binding, e impostando la proprietà ItemTemplate su un DataTemplate con un tipo di pagina come elemento radice.

L'esempio seguente mostra la generazione dinamica degli TabbedPage elementi figlio:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo"
            x:Class="TabbedPageDemo.MainPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}"
            x:DataType="local:Monkey">
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}"
                         IconImageSource="monkeyicon.png">
                <StackLayout Padding="5, 25">
                    <Label Text="{Binding Name}"
                           FontAttributes="Bold"
                           FontSize="18"
                           HorizontalOptions="Center" />
                    <Image Source="{Binding PhotoUrl}"
                           HorizontalOptions="Center"
                           WidthRequest="200"
                           HeightRequest="200" />
                    <StackLayout Padding="50, 10">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Family: "
                                   FontAttributes="Bold" />
                            <Label Text="{Binding Family}" />
                        </StackLayout>
                        ...
                    </StackLayout>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

In questo esempio ogni scheda è costituita da un ContentPage oggetto che usa Image oggetti e Label per visualizzare i dati per la scheda:

Spostarsi all'interno di una scheda

La navigazione può essere eseguita all'interno di una scheda, purché l'oggetto ContentPage sia racchiuso in un oggetto NavigationPage

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule"
                    IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

In questo esempio l'oggetto TabbedPage viene popolato con due Page oggetti . Il primo figlio è un ContentPage oggetto e il secondo figlio è un NavigationPage oggetto contenente un ContentPage oggetto .

Quando un oggetto ContentPage è racchiuso in un NavigationPage, la navigazione in avanti tra le pagine può essere eseguita chiamando il metodo PushAsync sulla proprietà Navigation dell'oggetto ContentPage:

await Navigation.PushAsync(new UpcomingAppointmentsPage());

Per altre informazioni sull'esecuzione dello spostamento tramite la NavigationPage classe , vedere NavigationPage.

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS || MACCATALYST
    handlers.AddHandler<TabbedPage, Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer>();
#endif
});