PipsPager

PipsPager denetimi, kullanıcıların her biri sınırsız aralıktaki tek bir "sayfayı" temsil eden yapılandırılabilir bir karakter koleksiyonu kullanarak doğrusal olarak sayfalandırılmış içerikte gezinmelerine yardımcı olur. Glifler mevcut sayfayı vurgular ve hem önceki hem de sonraki sayfaların var olduğuna işaret eder. Denetim, mevcut bağlama dayanır ve belirgin sayfa numaralandırmayı veya doğrusal olmayan bir düzeni desteklemez.

Pip nedir?

Pip'ler genellikle nokta olarak işlenen sayısal değer birimini temsil eder. Ancak, tireler veya kareler gibi diğer glifleri kullanacak şekilde özelleştirilebilirler.

Varsayılan olarak, PipsPager denetimindeki her düz nokta içerik düzenindeki bir sayfayı temsil eder. Kullanıcı, içerikteki o sayfaya gitmek için bir nokta seçebilir.

Doğru kontrol bu mu?

Doğrusal bir yapıda düzenlenmiş, açıkça numaralandırılmayan veya numaralandırılmış sayfaların glif tabanlı gösteriminin istendiği içerik için PipsPager kullanın.

Bu kullanıcı arabirimi genellikle görüntü alanının sınırlı olduğu ve olası sayfa sayısının sonsuz olduğu fotoğraf görüntüleyicileri ve uygulama listeleri gibi uygulamalarda kullanılır.

Recommendations

• PipsPager için yaygın kullanıcı arabirimi desenleri fotoğraf görüntüleyicileri, uygulama listeleri, döngüler ve görüntüleme alanının sınırlı olduğu düzenlerdir.
• Gamepad girişi için en iyi duruma getirilmiş deneyimler için, kullanıcı arabirimini yatay bir PipsPager'ın soluna veya sağına, ve dikey bir PipsPager'ın üstüne ya da altına yerleştirmemenizi öneririz.
• Dokunmatik giriş için en iyi duruma getirilmiş deneyimler için, dokunarak içerik üzerinde sayfalama özelliğinden yararlanmak için PipsPager'ı FlipView gibi bir görünüm denetimiyle tümleştirmenizi öneririz (kullanıcı tek tek pip'leri seçmek için dokunma özelliğini de kullanabilir).

Bir PipsPager Oluşturma

• Önemli API'ler: PipsPager sınıfı

WinUI 3 Galeri uygulamasını açın ve PipsPager'ı çalışır durumda görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Varsayılan PipsPager, yatay (varsayılan) veya dikey olarak yönlendirilebilen beş görünür pip'ten oluşur.

PipsPager, artımlı olarak bitişik bir sayfaya gitmek için gezinti düğmelerini (önceki, sonraki) de destekler. Varsayılan olarak, gezinti düğmeleri daraltılır ve düzen alanı kaplamaz.

İlk ve son öğeler arasında kaydırma desteklenmez.

<PipsPager x:Name="DefaultPipsPager" />

Gezinti düğmeleriyle Yatay PipsPager

Gezinti düğmeleri (önceki, sonraki) kullanıcının artımlı olarak bitişik bir sayfaya geçmesine izin verir.

Varsayılan olarak, gezinti düğmeleri kapatılmıştır. Bu davranışı PreviousButtonVisibility ve NextButtonVisibility özellikleri aracılığıyla denetleyebilirsiniz.

Bu özellikler için olası değerler şunlardır:

• Daraltılmış: Düğme kullanıcı tarafından görünmez ve düzen alanı kaplamaz . (Default)
• Görünür: Düğme görünür ve etkindir. PipsPager içeriğin en düşük veya en yüksek düzeyinde olduğunda her düğme otomatik olarak gizlenir. Örneğin, geçerli sayfa ilk sayfaysa önceki düğme gizlenir; geçerli sayfa son sayfaysa, sonraki düğme gizlenir. Gizlendiğinde düğme görünmez ancak düzen alanı kaplar .
• VisibleOnPointerOver: Bu davranış Visible ile aynıdır, ancak düğme yalnızca kullanıcı işaretçi imlecini PipsPager kullanıcı arabiriminin üzerine getirdiğinde veya kullanıcı klavye odağını PipsPager üzerinde ayarlarsa görüntülenir.

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

İşaretçi üzerine geldiğinde gezinti düğmeleri görünen dikey PipsPager

PipsPager, davranış veya etkileşim deneyiminde değişiklik olmadan dikey olarak yönlendirilebilir.

Üstteki düğme ilk düğmeye, alttaki düğme ise yatay görünümdeki son düğmeye karşılık gelir.

Aşağıdaki örnekte, gezinti düğmeleri için VisibleOnPointerOver ayarı gösterilmektedir.

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

Kaydırma boruları

İçerik çok sayıda sayfadan oluşuyorsa (NumberOfPages) görünür, etkileşimli pip sayısını ayarlamak için MaxVisiblePips özelliğini kullanabilirsiniz.

NumberOfPages değeri MaxVisiblePips değerinden büyükse, pip'ler seçili sayfayı denetimde ortalamak için otomatik olarak kaydırılır. NumberOfPages değeri MaxVisiblePips değerine eşit veya daha küçükse kaydırma gerçekleşmez ve gösterilen pip sayısı NumberOfPages değeriyle aynıdır.

MaxVisiblePips değeri kullanılabilir düzen alanından büyükse, görüntülenen pip'ler kırpılır. Görüntülenen pip miktarı, MaxVisiblePips ve NumberOfPages değerlerinden daha az olanıdır.

Varsayılan olarak, en fazla beş pip görünür.

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

PipsPager'ı Koleksiyon denetimiyle tümleştirme

PipsPager genellikle koleksiyon denetimleriyle birlikte kullanılır.

Aşağıdaki örnekte Bir PipsPager'i FlipView ile bağlama ve içerikte gezinmek ve geçerli sayfayı belirtmek için başka bir yol sağlama gösterilmektedir.

Uyarı

PipsPager'ı yalnızca sayfa göstergesi olarak kullanmak ve kullanıcı etkileşimlerini devre dışı bırakmak için denetimin IsEnabled özelliğini denetimde false olarak ayarlayın.

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

Pip ve gezinti düğmesi özelleştirme

Gezinti düğmeleri ve pip'ler PreviousButtonStyle, NextButtonStyle, SelectedPipStyle ve NormalPipStyle özellikleri aracılığıyla özelleştirilebilir.

PreviousButtonStyle veya NextButtonStyle özellikleri aracılığıyla görünürlük ayarlarsanız, bu ayarlar sırasıyla PreviousButtonVisibility veya NextButtonVisibility özelliklerine göre önceliklidir (ancak PipsPagerButtonVisibility değeri Daraltılmış olarak ayarlanmadıkları sürece).

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

İlgili makaleler

• ScrollViewer
• FlipView
• ItemsRepeater