PipsPager

Ovládací prvek PipsPager pomáhá uživatelům procházet v rámci lineárního stránkovaného obsahu pomocí konfigurovatelné kolekce glyfů, z nichž každá představuje jednu "stránku" v rámci neomezeného rozsahu. Symboly zvýrazňují aktuální stránku a označují dostupnost předchozích i následujících stránek. Ovládací prvek spoléhá na aktuální kontext a nepodporuje explicitní číslování stránek ani nelineární organizaci.

Co je pip?

Pips představuje jednotku číselné hodnoty, která se obvykle vykresluje jako tečky. Lze je ale přizpůsobit tak, aby používaly jiné glyfy, jako jsou pomlčky nebo čtverce.

Ve výchozím nastavení představuje každá plná tečka v ovládacím prvku PipsPager stránku v rozložení obsahu. Uživatel může vybrat tečku a přejít na tuto stránku v obsahu.

Je to správná kontrola?

Použijte PipsPager pro obsah uspořádaný v lineární struktuře, který není explicitně číslovaný, nebo kde je požadovaná reprezentace číslovaných stránek pomocí glyfů.

Toto uživatelské rozhraní se běžně používá v aplikacích, jako jsou prohlížeče fotek a seznamy aplikací, kde je omezený prostor pro zobrazení a počet potenciálních stránek je nekonečný.

Recommendations

• Mezi běžné vzory uživatelského rozhraní pro PipsPager patří čtenáři fotek, seznamy aplikací, karusely a rozložení, kde je místo pro zobrazení omezené.
• Pro prostředí optimalizovaná pro vstup gamepadu nedoporučujeme umístit uživatelské rozhraní přímo doleva nebo doprava od vodorovně orientovaného nástroje PipsPager a nad nebo pod svisle orientovaný PipsPager.
• Pro možnosti optimalizované pro dotykové zadávání doporučujeme integrovat PipsPager s ovládacím prvkem zobrazení, jako je FlipView, aby se využily výhody stránkování obsahu s dotykovým ovládáním (uživatel může také použít dotykové ovládání k výběru jednotlivých bodů).

Vytvoření nástroje PipsPager

• Důležitá rozhraní API: PipsPager (třída)

Otevřete aplikaci Galerie WinUI 3 a podívejte se na pipsPager v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Výchozí PipsPager se skládá z pěti viditelných pipů, které mohou být orientovány vodorovně (výchozí) nebo svisle.

PipsPager také podporuje navigační tlačítka (předchozí, další) pro přechod na přírůstkovou sousední stránku. Ve výchozím nastavení jsou navigační tlačítka sbalená a nezabírají žádné místo v rozložení.

Zabalení mezi první a poslední položkou se nepodporuje.

<PipsPager x:Name="DefaultPipsPager" />

Vodorovný pipsPager s navigačními tlačítky

Navigační tlačítka (předchozí, další) umožňují uživateli přejít na přírůstkovou sousední stránku.

Ve výchozím nastavení jsou navigační tlačítka skrytá. Toto chování můžete řídit vlastnostmi PreviousButtonVisibility a NextButtonVisibility .

Možné hodnoty pro tyto vlastnosti:

• Sbalené: Tlačítko není uživateli viditelné a nezabírá prostor rozložení. (Výchozí)
• Viditelné: Tlačítko je viditelné a povolené. Každé tlačítko se automaticky skryje, pokud je PipsPager v minimálním nebo maximálním rozsahu obsahu. Pokud je například aktuální stránka první stránkou, je předchozí tlačítko skryté; pokud je aktuální stránka poslední stránkou, je tlačítko další skryté. Když je tlačítko skryté, není viditelné, ale zabírá místo v rozložení.
• VisibleOnPointerOver: Chování je stejné jako Viditelné s tím rozdílem , že tlačítko se zobrazí pouze v případě, že uživatel najede kurzorem myši na uživatelské rozhraní PipsPager nebo uživatel nastaví fokus klávesnice na PipsPager.

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

Svislý PipsPager s navigačními tlačítky viditelnými při přejetí kurzorem

PipsPager může být orientovaný svisle beze změny chování nebo interakce.

Horní tlačítko odpovídá prvnímu tlačítku a dolní tlačítko odpovídá poslednímu tlačítku v vodorovném zobrazení.

Následující příklad ukazuje nastavení VisibleOnPointerOver pro navigační tlačítka.

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

Posouvání indikátorů

Pokud se obsah skládá z velkého počtu stránek (NumberOfPages), můžete použít vlastnost MaxVisiblePips k nastavení počtu viditelných interaktivních pipů.

Pokud je hodnota NumberOfPages větší než hodnota MaxVisiblePips, indikátory se automaticky posunou tak, aby byla vybraná stránka umístěna na střed v ovládacím prvku. Pokud je NumberOfPages roven nebo menší než MaxVisiblePips, nedojde k žádnému posouvání a počet zobrazených pipů je stejný jako hodnota NumberOfPages.

Pokud je hodnota MaxVisiblePips větší než dostupný prostor rozložení, zobrazí se oříznuté pipy. Počet zobrazených pipů je menší než MaxVisiblePips a NumberOfPages.

Ve výchozím nastavení je viditelných maximálně pět pipů.

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

Integrace PipsPager s ovládacím prvkem kolekce

PipsPager se často používá ve spojení s ovládacími prvky pro kolekci.

Následující příklad ukazuje, jak vytvořit vazbu PipsPager s FlipView a poskytnout další způsob, jak procházet obsah a indikovat aktuální stránku.

Poznámka:

Chcete-li použít PipsPager pouze jako indikátor stránky a zakázat interakce uživatele, nastavte vlastnost ovládacího prvku IsEnabled na false v ovládacím prvku.

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

Přizpůsobení tlačítka Pip a navigace

Navigační tlačítka a pipy lze přizpůsobit prostřednictvím vlastností PreviousButtonStyle, NextButtonStyle, SelectedPipStylea NormalPipStyle.

Pokud nastavíte viditelnost prostřednictvím vlastností PreviousButtonStyle nebo NextButtonStyle, tato nastavení mají přednost před vlastnostmi PreviousButtonVisibility nebo NextButtonVisibility (pokud nejsou nastaveny na hodnotu PipsPagerButtonVisibility 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" />

Související články

• ScrollViewer
• FlipView
• ItemsRepeater