TabbedPage

UI Aplikasi Multi-platform .NET (.NET MAUI) TabbedPage mempertahankan kumpulan anak-anak berjenis Page, hanya salah satunya yang sepenuhnya terlihat pada satu waktu. Setiap anak diidentifikasi oleh serangkaian tab di bagian atas atau bawah halaman. Biasanya, setiap anak akan menjadi dan ContentPage ketika tabnya dipilih, konten halaman ditampilkan.

TabbedPage menentukan properti berikut:

• BarBackground, dari jenis Brush, menentukan latar belakang bilah tab.
• BarBackgroundColor, dari jenis Color, menentukan warna latar belakang bilah tab.
• BarTextColor, dari jenis Color, mewakili warna teks pada bilah tab.
• SelectedTabColor, dari jenis Color, menunjukkan warna tab saat dipilih.
• UnselectedTabColor, dari jenis Color, mewakili warna tab saat tidak dipilih.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Judul tab ditentukan oleh Page.Title properti halaman anak, dan ikon tab ditentukan oleh Page.IconImageSource properti halaman anak.

TabbedPageDalam , setiap Page objek dibuat saat TabbedPage dibangun. Ini dapat menyebabkan pengalaman pengguna yang buruk, terutama jika TabbedPage adalah halaman akar aplikasi Anda. Namun, .NET MAUI Shell memungkinkan halaman yang diakses melalui bilah tab untuk dibuat sesuai permintaan, sebagai respons terhadap navigasi. Untuk informasi selengkapnya tentang aplikasi Shell, lihat Shell.

Peringatan

TabbedPage tidak kompatibel dengan aplikasi .NET MAUI Shell, dan pengecualian akan dilemparkan jika Anda mencoba menggunakan TabbedPage di aplikasi Shell.

Membuat TabbedPage

Dua pendekatan dapat digunakan untuk membuat TabbedPage:

• Isi TabbedPage dengan kumpulan objek anak Page , seperti kumpulan ContentPage objek. Untuk informasi selengkapnya, lihat Mengisi TabbedPage dengan kumpulan Halaman.
• Tetapkan koleksi ke ItemsSource properti dan tetapkan DataTemplate ke ItemTemplate properti untuk mengembalikan halaman untuk objek dalam koleksi. Untuk informasi selengkapnya, lihat Mengisi TabbedPage dengan DataTemplate.

Penting

A TabbedPage hanya boleh diisi dengan NavigationPage objek dan ContentPage .

Terlepas dari pendekatan yang diambil, lokasi bilah tab dalam TabbedPage bergantung pada platform:

• Di iOS, daftar tab muncul di bagian bawah layar, dan konten halaman di atas. Setiap tab terdiri dari judul dan ikon. Dalam orientasi potret, ikon bilah tab muncul di atas judul tab. Dalam orientasi lanskap, ikon dan judul muncul berdampingan. Selain itu, bilah tab reguler atau ringkas dapat ditampilkan, tergantung pada perangkat dan orientasi. Jika ada lebih dari lima tab, tab Lainnya akan muncul, yang dapat digunakan untuk mengakses tab tambahan.
• Di Android, daftar tab muncul di bagian atas layar, dan konten halaman di bawah ini. Setiap tab terdiri dari judul dan ikon. Namun, tab dapat dipindahkan ke bagian bawah layar dengan platform khusus. Jika ada lebih dari lima tab, dan daftar tab berada di bagian bawah layar, tab Lainnya akan muncul yang dapat digunakan untuk mengakses tab tambahan. Untuk informasi tentang memindahkan tab ke bagian bawah layar, lihat Penempatan toolbar TabbedPage di Android.
• Di Windows, daftar tab muncul di bagian atas layar, dan konten halaman berada di bawah ini. Setiap tab terdiri dari judul.

Mengisi TabbedPage dengan koleksi Halaman

TabbedPage Dapat diisi dengan kumpulan objek anakPage, yang biasanya akan menjadi ContentPage objek. Hal ini dicapai dengan menambahkan ContentPage objek sebagai turunan dari 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 objek yang ditambahkan sebagai elemen turunan TabbedPage ditambahkan ke Children koleksi. Properti Children kelas MultiPage<T> , dari mana TabbedPage berasal, adalah ContentProperty dari MultiPage<T>. Oleh karena itu, di XAML tidak perlu secara eksplisit menetapkan Page objek ke Children properti.

Cuplikan layar berikut menunjukkan tampilan bilah tab yang dihasilkan pada TabbedPage:

Konten halaman untuk tab muncul saat tab dipilih.

Mengisi TabbedPage dengan DataTemplate

TabbedPage mewarisi ItemsSourceproperti , ItemTemplate, dan SelectedItem yang dapat diikat dari MultiPage<T> kelas . Properti ini memungkinkan Anda menghasilkan TabbedPage anak secara dinamis, dengan mengatur ItemsSource properti ke IEnumerable kumpulan objek dengan properti publik yang cocok untuk pengikatan data, dan dengan mengatur ItemTemplate properti ke DataTemplate dengan jenis halaman sebagai elemen akar.

Contoh berikut menunjukkan pembuatan TabbedPage anak secara dinamis:

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

Dalam contoh ini, setiap tab terdiri dari ContentPage objek yang menggunakan Image objek dan Label untuk menampilkan data untuk tab:

Menavigasi dalam tab

Navigasi dapat dilakukan dalam tab, asalkan ContentPage objek dibungkus dalam NavigationPage objek:

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

Dalam contoh ini, diisi TabbedPage dengan dua Page objek. Anak pertama adalah ContentPage objek, dan anak kedua adalah objek yang NavigationPageContentPage berisi objek.

ContentPage Ketika dibungkus dalam NavigationPagenavigasi halaman , penerusan dapat dilakukan dengan memanggil PushAsync metode pada Navigation properti ContentPage objek:

await Navigation.PushAsync(new UpcomingAppointmentsPage());

Untuk informasi selengkapnya tentang melakukan navigasi menggunakan NavigationPage kelas , lihat NavigationPage.

Peringatan

NavigationPage Meskipun dapat ditempatkan di , tidak disarankan TabbedPageuntuk menempatkan TabbedPage ke dalam NavigationPage.