PipsPager

Met het besturingselement PipsPager kunnen gebruikers binnen lineair gepagineerde inhoud navigeren met behulp van een configureerbare verzameling glyphs, die elk één 'pagina' binnen een onbeperkt bereik vertegenwoordigen. De symbolen markeren de huidige pagina en geven de beschikbaarheid aan van zowel voorgaande als volgende pagina's. Het besturingselement is afhankelijk van de huidige context en biedt geen ondersteuning voor expliciete paginanummering of een niet-lineaire organisatie.

Wat is een pip?

Pips vertegenwoordigen een eenheid van numerieke waarde, meestal weergegeven als punten. Ze kunnen echter worden aangepast voor het gebruik van andere glyphs, zoals streepjes of vierkanten.

Standaard vertegenwoordigt elke volle punt in het PipsPager-besturingselement een pagina in de inhoudsopmaak. Een gebruiker kan een punt selecteren om naar die pagina in de inhoud te navigeren.

Is dit de juiste controle?

Gebruik een PipsPager voor inhoud die is geordend in een lineaire structuur, niet expliciet is genummerd of waarbij een op glyph gebaseerde weergave van genummerde pagina's gewenst is.

Deze gebruikersinterface wordt vaak gebruikt in apps zoals fotoviewers en app-lijsten, waarbij de weergaveruimte beperkt is en het aantal potentiële pagina's oneindig is.

Aanbevelingen

• Algemene UI-patronen voor een PipsPager omvatten fotoviewers, app-lijsten, carrousels en indelingen waar de weergaveruimte beperkt is.
• Voor ervaringen die zijn geoptimaliseerd voor gamepadinvoer raden we aan de gebruikersinterface niet direct links of rechts van een horizontale PipsPager te plaatsen en niet boven of onder een verticaal georiënteerde PipsPager.
• Voor ervaringen die zijn geoptimaliseerd voor aanraakinvoer, raden we u aan om pipsPager te integreren met een weergavebesturingselement, zoals een FlipView-, om te profiteren van paginering van on-content met aanraking (de gebruiker kan ook touch gebruiken om afzonderlijke pips te selecteren).

Een PipsPager maken

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Een standaard PipsPager bestaat uit vijf zichtbare pips die horizontaal (standaard) of verticaal kunnen worden georiënteerd.

Een PipsPager ondersteunt ook navigatieknoppen (vorige, volgende) om naar een incrementeel aangrenzende pagina te gaan. Standaard worden de navigatieknoppen samengevouwen en nemen de indelingsruimte niet in beslag.

Wrapping tussen de eerste en laatste items wordt niet ondersteund.

<PipsPager x:Name="DefaultPipsPager" />

Horizontale PipsPager met navigatieknoppen

Met de navigatieknoppen (vorige, volgende) kan de gebruiker naar een incrementeel aangrenzende pagina gaan.

De navigatieknoppen worden standaard samengevouwen. U kunt dit gedrag beheren via de eigenschappen PreviousButtonVisibility en NextButtonVisibility.

Mogelijke waarden voor deze eigenschappen zijn:

• samengevouwen: de knop is niet zichtbaar voor de gebruiker en neemt geen indelingsruimte in beslag. (Standaard)
• Zichtbaar: de knop is zichtbaar en ingeschakeld. Elke knop wordt automatisch verborgen wanneer de PipsPager minimaal of maximaal deel uitmaakt van de inhoud. Als de huidige pagina bijvoorbeeld de eerste pagina is, is de vorige knop verborgen; als de huidige pagina de laatste pagina is, is de volgende knop verborgen. Als de knop verborgen is, is deze niet zichtbaar, maar neemt wel indelingsruimte in.
• VisibleOnPointerOver: het gedrag is hetzelfde als Visible behalve dat de knop alleen wordt weergegeven wanneer de gebruiker de cursor boven de PipsPager-gebruikersinterface beweegt of de gebruiker de focus op het toetsenbord instelt op PipsPager.

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

Verticale PipsPager met navigatieknoppen zichtbaar bij aanwijzer

De PipsPager kan verticaal worden georiënteerd zonder verandering in gedrag of interactie-ervaring.

De bovenste knop komt overeen met de eerste knop en de onderste knop komt overeen met de laatste knop in de horizontale weergave.

In het volgende voorbeeld ziet u de instelling VisibleOnPointerOver voor de navigatieknoppen.

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

Scrollende stipjes

Als de inhoud bestaat uit een groot aantal pagina's (NumberOfPages), kunt u de eigenschap MaxVisiblePips gebruiken om het aantal zichtbare, interactieve pips in te stellen.

Als de waarde van NumberOfPages groter is dan de waarde van MaxVisiblePips, schuiven de pips automatisch om de geselecteerde pagina in het besturingselement te centreren. Als numberOfPages gelijk is aan of kleiner is dan MaxVisiblePips, wordt er geen schuifbewerking uitgevoerd en is het aantal weergegeven pips hetzelfde als de waarde van NumberOfPages.

Als de waarde van MaxVisiblePips groter is dan de beschikbare indelingsruimte, worden de weergegeven pips geknipt. Het aantal weergegeven pips is het kleinere aantal van MaxVisiblePips en NumberOfPages.

Standaard zijn maximaal vijf pips zichtbaar.

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

PipsPager integreren met een verzamelingsbeheer

Een PipsPager wordt vaak gebruikt in combinatie met verzamelingsbesturingselementen.

In het volgende voorbeeld ziet u hoe u een PipsPager verbindt met een FlipView- en een andere manier biedt om door de inhoud te navigeren en de huidige pagina aan te geven.

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

Aanpassing van pip- en navigatieknop

De navigatieknoppen en indicatoren kunnen worden aangepast via de PreviousButtonStyle, NextButtonStyle, SelectedPipStyleen NormalPipStyle eigenschappen.

Als u zichtbaarheid instelt via de eigenschappen PreviousButtonStyle of NextButtonStyle, hebben deze instellingen voorrang op respectievelijk de eigenschappen PreviousButtonVisibility of NextButtonVisibility (tenzij ze zijn ingesteld op de PipsPagerButtonVisibility waarde van Samengevouwen).

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

UWP en WinUI 2

Voor de PipsPager voor UWP-apps is WinUI 2 vereist. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. API's voor deze control bevinden zich in de Microsoft.UI.Xaml.Controls naamruimte.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:PipsPager />

Verwante artikelen

• ScrollViewer-
• FlipView
• ItemsRepeater-