PipsPager

Kontrol PipsPager membantu pengguna menavigasi dalam konten yang dipaginasi secara linier menggunakan kumpulan glyph yang dapat dikonfigurasi, yang masing-masing mewakili satu "halaman" dalam rentang tanpa batas. Glif menyoroti halaman saat ini, dan menunjukkan ketersediaan halaman sebelumnya dan halaman yang mengikuti. Kontrol bergantung pada konteks saat ini dan tidak mendukung penomoran halaman eksplisit atau organisasi non-linier.

Apa itu pip?

Pip mewakili satuan nilai numerik, biasanya dirender sebagai titik. Namun, mereka dapat disesuaikan untuk menggunakan glyph lainnya seperti tanda hubung atau kotak.

Secara default, setiap titik solid dalam kontrol PipsPager mewakili halaman dalam tata letak konten. Pengguna dapat memilih titik untuk menavigasi ke halaman tersebut dalam konten.

Apakah ini kontrol yang tepat?

Gunakan PipsPager untuk konten yang diatur dalam struktur linier, tidak diberi nomor secara eksplisit, atau di mana representasi berbasis glyph dari halaman bernomor diinginkan.

UI ini umumnya digunakan dalam aplikasi seperti penampil foto dan daftar aplikasi, di mana ruang tampilan terbatas dan jumlah halaman potensial tidak terbatas.

Recommendations

• Pola UI umum untuk PipsPager mencakup penampil foto, daftar aplikasi, carousel, dan tata letak di mana ruang tampilan terbatas.
• Untuk pengalaman yang dioptimalkan untuk input gamepad, kami menyarankan agar tidak menempatkan UI langsung di kiri atau kanan PipsPager yang horizontal, ataupun di atas atau di bawah PipsPager yang berorientasi vertikal.
• Untuk pengalaman yang dioptimalkan untuk input sentuhan, sebaiknya integrasikan PipsPager dengan kontrol tampilan, seperti FlipView, untuk memanfaatkan paginasi konten dengan sentuhan (pengguna juga dapat menggunakan sentuhan untuk memilih pip individual).

Buat PipsPager

• API Penting: PipsPager Class

Buka aplikasi Galeri WinUI 3 dan lihat PipsPager beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

PipsPager default terdiri dari lima pip terlihat yang dapat diorientasikan secara horizontal (default) atau vertikal.

PipsPager juga mendukung tombol navigasi (sebelumnya, berikutnya) untuk berpindah ke halaman yang berdekatan secara bertahap. Secara bawaan, tombol navigasi dilipat dan tidak memakan ruang tata letak.

Pembungkusan antara item pertama dan terakhir tidak didukung.

<PipsPager x:Name="DefaultPipsPager" />

Horizontal PipsPager dengan tombol navigasi

Tombol navigasi (sebelumnya, berikutnya) memungkinkan pengguna berpindah ke halaman yang berdekatan secara bertahap.

Secara default, tombol navigasi diciutkan. Anda dapat mengontrol perilaku ini melalui properti PreviousButtonVisibility dan NextButtonVisibility .

Nilai yang mungkin untuk properti ini adalah:

• Diciutkan: Tombol tidak terlihat oleh pengguna dan tidak mengambil ruang tata letak. (Bawaan)
• Terlihat: Tombol terlihat dan diaktifkan. Setiap tombol secara otomatis disembunyikan ketika PipsPager berada pada tingkat minimum atau maksimum konten. Misalnya, jika halaman saat ini adalah halaman pertama, maka tombol sebelumnya disembunyikan; jika halaman saat ini adalah halaman terakhir, maka tombol berikutnya disembunyikan. Ketika disembunyikan, tombol tidak terlihat tetapi mengambil ruang tata letak.
• VisibleOnPointerOver: Perilakunya sama dengan Visible kecuali bahwa tombol hanya ditampilkan saat pengguna mengarahkan kursor penunjuk ke atas UI PipsPager, atau ketika pengguna menetapkan fokus keyboard pada PipsPager.

<PipsPager x:Name="VisibleButtonPipsPager"
    NumberOfPages="5"
    PreviousButtonVisibility="Visible"
    NextButtonVisibility="Visible" />

PipsPager Vertikal dengan tombol navigasi terlihat saat kursor berada di atas

PipsPager dapat berorientasi secara vertikal tanpa perubahan pada pengalaman perilaku atau interaksi.

Tombol atas sesuai dengan tombol pertama dan tombol bawah sesuai dengan tombol terakhir dalam tampilan horizontal.

Contoh berikut menunjukkan pengaturan VisibleOnPointerOver untuk tombol navigasi.

<PipsPager x:Name="VerticalPipsPager"
    NumberOfPages="5"
    Orientation="Vertical" 
    PreviousButtonVisibility="VisibleOnPointerOver" 
    NextButtonVisibility="VisibleOnPointerOver" />

Menggulir pip

Jika konten terdiri dari sejumlah besar halaman (NumberOfPages), Anda dapat menggunakan properti MaxVisiblePips untuk mengatur jumlah pip interaktif yang terlihat.

Jika nilai NumberOfPages lebih besar dari nilai MaxVisiblePips, pip secara otomatis menggulir untuk memusatkan halaman yang dipilih dalam kontrol. Jika NumberOfPages sama dengan atau kurang dari MaxVisiblePips, tidak ada pengguliran yang terjadi dan jumlah pip yang ditampilkan sama dengan nilai NumberOfPages.

Jika nilai MaxVisiblePips lebih besar dari ruang tata letak yang tersedia, pip yang ditampilkan akan dipotong. Jumlah pip yang ditampilkan adalah lebih sedikit dari MaxVisiblePips dan NumberOfPages.

Secara default, maksimum lima pip terlihat.

<PipsPager x:Name="ScrollingPipsPager"
    NumberOfPages="20"
    MaxVisiblePips="10" />

Mengintegrasikan PipsPager dengan kontrol Koleksi

PipsPager sering digunakan bersama dengan kontrol kumpulan.

Contoh berikut menunjukkan cara mengikat PipsPager dengan FlipView dan menyediakan cara lain untuk menavigasi konten dan menunjukkan halaman saat ini.

Nota

Untuk menggunakan PipsPager hanya sebagai indikator halaman dan menonaktifkan interaksi pengguna, atur properti IsEnabled pada kontrol ke false.

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

Kustomisasi tombol pip dan navigasi

Tombol navigasi dan pip dapat disesuaikan melalui properti PreviousButtonStyle, NextButtonStyle, SelectedPipStyle, dan NormalPipStyle.

Jika Anda mengatur visibilitas melalui properti PreviousButtonStyle atau NextButtonStyle, pengaturan ini lebih diutamakan daripada properti PreviousButtonVisibility atau NextButtonVisibility, masing-masing (kecuali jika diatur ke nilai PipsPagerButtonVisibility dari Collapsed).

<Page.Resources>
    <Style x:Key="NavButtonBaseStyle" TargetType="Button" BasedOn="{StaticResource PipsPagerNavigationButtonBaseStyle}">
        <Setter Property="Width" Value="30" />
        <Setter Property="Height" Value="30" />
        <Setter Property="FontSize" Value="12" />
    </Style>

    <Style x:Key="PreviousButtonStyle" BasedOn="{StaticResource NavButtonBaseStyle}" TargetType="Button">
        <Setter Property="Content" Value="&#xEDDB;" />
    </Style>

    <Style x:Key="NextButtonStyle" BasedOn="{StaticResource NavButtonBaseStyle}" TargetType="Button">
        <Setter Property="Content" Value="&#xEDDC;" />
    </Style>
</Page.Resources>

<PipsPager x:Name="CustomNavButtonPipsPager"
    PreviousButtonStyle="{StaticResource PreviousButtonStyle}"
    NextButtonStyle="{StaticResource NextButtonStyle}"
    PreviousButtonVisibility="VisibleOnPointerOver" 
    NextButtonVisibility="VisibleOnPointerOver" />

Artikel terkait

• ScrollViewer
• FlipView
• ItemsRepeater