Pivot

  • Artikel

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 3 dan SDK Aplikasi Windows, 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 luapan dalam carousel Pivot, sementara NavigationView menggunakan luapan dropdown menu sehingga pengguna dapat melihat semua item.
  • Pivot menangani navigasi antar bagian konten, sementara NavigationView memungkinkan kontrol lebih atas perilaku navigasi.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows 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 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol.

Menggunakan 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 menyertai 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 menipu pengalaman navigasi bawaan kontrol Pivot, dikurangi pengalaman sentuhan di antara 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 tidak secara eksplisit PivotItem 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 di RightHeader 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 menavigasi ke konten bagian header tersebut.
  • Menggesek ke kiri atau kanan pada header item pivot menavigasi ke bagian yang berdekatan.
  • Menggesek ke kiri atau kanan pada bagian konten menavigasi ke bagian yang berdekatan.

Kontrol hadir dalam dua mode:

Stasioner

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

Carousel

  • Pivot carousel ketika semua header pivot tidak pas dalam ruang yang diizinkan.
  • Mengetuk label pivot menavigasi ke halaman yang sesuai, dan label pivot aktif akan carousel ke posisi pertama.
  • Item pivot dalam perulangan carousel dari bagian pivot terakhir hingga pertama.

Tip

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