Bagikan melalui

Pivot

Kontrol Pivot memungkinkan sentuhan di antara sekumpulan kecil bagian konten.

Fokus default menggaris bawahi header terpilih

Apakah ini kontrol yang tepat?

Peringatan

Kontrol Pivot tidak disarankan untuk pola desain Windows 11 . Kami sangat menyarankan untuk menggunakan salah satu alternatif ini sebagai gantinya:

Untuk membuat UI seperti Pivot saat menggunakan WinUI dan Windows App SDK, gunakan kontrol SelectorBar .

Untuk membuat UI bertab, gunakan kontrol TabView .

Untuk mencapai pola navigasi atas umum, sebaiknya gunakan NavigationView, yang secara otomatis beradaptasi dengan ukuran layar yang berbeda dan memungkinkan penyesuaian yang lebih besar.

Beberapa perbedaan utama antara NavigationView dan Pivot tercantum di sini:

  • Pivot mendukung sentuhan untuk beralih antar item.
  • Item meluap dalam carousel Pivot, sementara NavigationView menggunakan menu dropdown meluap sehingga pengguna dapat melihat semua item.
  • Pivot menangani navigasi antar bagian konten, sementara NavigationView memungkinkan kontrol lebih atas perilaku navigasi.

Gunakan NavigationView alih-alih Pivot

Jika UI aplikasi Anda menggunakan kontrol Pivot, Anda dapat mengonversi Pivot ke NavigationView dengan mengikuti contoh ini.

XAML ini membuat NavigationView dengan 3 bagian konten, seperti contoh Pivot di Membuat kontrol pivot.

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView menyediakan kontrol lebih atas kustomisasi navigasi dan memerlukan kode yang sesuai di belakang. Untuk melengkapi XAML di atas, gunakan code-behind berikut:

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

Kode ini meniru pengalaman navigasi kontrol Pivot bawaan tanpa pengalaman swipe antar bagian konten. Namun, seperti yang Anda lihat, Anda juga dapat menyesuaikan beberapa titik, termasuk transisi animasi, parameter navigasi, dan kemampuan tumpukan.

Membuat kontrol pivot

Peringatan

Kontrol Pivot tidak disarankan untuk pola desain Windows 11 . Kami sangat menyarankan untuk menggunakan salah satu alternatif ini sebagai gantinya:

XAML ini membuat kontrol Pivot dasar dengan 3 bagian konten.

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

Item Pivot

Pivot adalah ItemsControl, sehingga dapat berisi kumpulan item dari jenis apa pun. Item apa pun yang Anda tambahkan ke Pivot yang bukan secara eksplisit PivotItem akan secara implisit dibungkus dalam PivotItem. Karena Pivot sering digunakan untuk menavigasi antar halaman konten, biasanya mengisi koleksi Item secara langsung dengan elemen UI XAML. Atau, Anda dapat mengatur properti ItemsSource ke sumber data. Item yang terikat di ItemsSource bisa dari jenis apa pun, tetapi jika item tersebut tidak secara eksplisit PivotItems, Anda harus menentukan ItemTemplate dan HeaderTemplate untuk menentukan bagaimana item ditampilkan.

Anda dapat menggunakan properti SelectedItem untuk mendapatkan atau mengatur item aktif Pivot. Gunakan properti SelectedIndex untuk mendapatkan atau mengatur indeks item aktif.

Header pivot

Anda dapat menggunakan properti LeftHeader dan RightHeader untuk menambahkan kontrol lain ke header Pivot.

Misalnya, Anda dapat menambahkan CommandBar pada RightHeader dari Pivot.

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

Interaksi pivot

Kontrol ini menampilkan interaksi gerakan sentuh ini:

  • Mengetuk header item pivot akan membawa Anda ke konten bagian dari header tersebut.
  • Menggesek ke kiri atau kanan pada header item pivot menavigasi ke bagian yang berdekatan.
  • Menggeser ke kiri atau kanan pada konten bagian tersebut akan menavigasi ke bagian yang bersebelahan.

Kontrol hadir dalam dua mode:

Stasioner

  • Pivot bersifat stasioner ketika semua header pivot pas dalam ruang yang diizinkan.
  • Mengetuk label pivot akan menavigasikan ke halaman yang sesuai, tetapi pivot itu sendiri tidak akan bergerak. Pivot aktif disorot.

Karousel

  • Menggerakkan karusel pivot ketika semua header pivot tidak muat dalam ruang yang tersedia.
  • Mengetuk label pivot akan menavigasi ke halaman yang sesuai, dan label pivot aktif akan bergeser ke posisi pertama.
  • Item pivot dalam perulangan carousel dari bagian pivot terakhir hingga pertama.

Petunjuk / Saran

  • Hindari menggunakan lebih dari 5 header saat menggunakan mode carousel, karena perulangan lebih dari 5 dapat menjadi membingungkan.
  • Header pivot sebaiknya tidak berfungsi sebagai carousel dalam lingkungan 10ft. Atur properti IsHeaderItemsCarouselEnabled ke false jika aplikasi Anda akan berjalan di Xbox.

UWP dan WinUI untuk UWP

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI terbaru untuk UWP untuk mendapatkan gaya dan templat terbaru untuk semua kontrol.

  • Last updated on