Condividi tramite

TabbedPage

  • Articolo

.NET MAUI 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 elemento figlio è identificato da una serie di schede nella parte superiore o inferiore della pagina. In genere, ogni elemento figlio sarà un e ContentPage quando viene selezionata la 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 destinazioni di data binding e stili.

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 , TabbedPageogni Page oggetto 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.

Avviso

TabbedPage non è compatibile con le app della shell MAUI .NET e viene generata un'eccezione se si tenta di usare TabbedPage in un'app Shell.

Creare un'istanza di TabbedPage

Per creare una TabbedPage è possibile usare due approcci:

Importante

Un TabbedPage oggetto deve essere popolato solo con NavigationPage gli oggetti e ContentPage .

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. Nell'orientamento verticale, le icone della barra di tabulazioni vengono visualizzate 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 disponibili più di cinque schede, verrà visualizzata una scheda Altro che può essere usata per accedere alle altre schede.
  • 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 piattaforma specifica. 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 un oggetto TabbedPage con un insieme Page

Un TabbedPage oggetto può essere popolato con una raccolta di oggetti figlio Page , che in genere saranno ContentPage oggetti . A tale scopo, aggiungere ContentPage oggetti come elementi figlio 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:

.NET MAUI tab bar on a TabbedPage.

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

Popolare un oggetto TabbedPage con un oggetto DataTemplate

TabbedPageItemsSourceeredita le proprietà associabili , ItemTemplatee SelectedItem dalla MultiPage<T> classe . Queste proprietà consentono di generare TabbedPage elementi figlio in modo dinamico impostando la ItemsSource proprietà su una IEnumerable raccolta di oggetti con proprietà pubbliche adatte per i data binding e impostando la ItemTemplate proprietà su con DataTemplate 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}">
    <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:

Screenshot of a .NET MAUI TabbedPage.

Lo spostamento può essere eseguito all'interno di una scheda, purché l'oggetto ContentPage sia sottoposto a wrapping in un NavigationPage oggetto :

<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 ContentPage oggetto viene sottoposto a wrapping in un NavigationPageoggetto , lo spostamento di pagina in avanti può essere eseguito chiamando il PushAsync metodo sulla Navigation proprietà dell'oggetto ContentPage :

await Navigation.PushAsync(new UpcomingAppointmentsPage());

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

Avviso

Anche se un NavigationPage oggetto può essere inserito in un TabbedPageoggetto , non è consigliabile inserire un oggetto TabbedPage in un oggetto NavigationPage.