PipsPager

A PipsPager vezérlő segítségével a felhasználók lineárisan lapszámozott tartalmakon belül navigálhatnak egy konfigurálható glyph-gyűjtemény használatával, amelyek mindegyike egyetlen "oldalt" jelöl egy korlátlan tartományon belül. A karakterjelek kiemelik az aktuális oldalt, és jelzik az előző és a következő oldalak elérhetőségét is. A vezérlő az aktuális környezetre támaszkodik, és nem támogatja az explicit oldalszámozást vagy a nem lineáris szervezetet.

Mi az a pip?

A pipek numerikus értékegységet képviselnek, általában pontként jelennek meg. Ezek azonban testre szabhatók más karakterjelek, például kötőjelek vagy négyzetek használatára.

Alapértelmezés szerint a PipsPager vezérlőelem minden egyszínű pontja egy lapot jelöl a tartalomelrendezésben. A felhasználó kijelölhet egy elemet, amellyel a tartalomban erre a lapra navigálhat.

Ez a megfelelő vezérlő?

Használjon PipsPagert lineáris struktúrában rendezett tartalmakhoz, nem explicit számozott tartalomhoz, vagy ha a számozott oldalak glyph-alapú ábrázolása szükséges.

Ezt a felhasználói felületet gyakran használják olyan alkalmazásokban, mint a fényképmegjelenítők és az alkalmazáslisták, ahol a megjelenítési terület korlátozott, és a lehetséges oldalak száma végtelen.

Recommendations

  • A PipsPager gyakori felhasználói felületi mintái közé tartoznak a fényképmegjelenítők, az alkalmazáslisták, a körhinták és az olyan elrendezések, ahol a megjelenítési terület korlátozott.
  • Azokhoz az élményekhez, amelyek a játékpad bemenetre vannak optimalizálva, javasoljuk, hogy ne helyezze el a felhasználói felületet közvetlenül egy vízszintes PipsPager bal vagy jobb oldalára, illetve egy függőleges PipsPager fölé vagy alá.
  • Az érintéses bevitelre optimalizált élményekhez javasoljuk, hogy integrálja a PipsPagert egy nézetvezérlővel, például egy FlipView, hogy érintéssel kihasználhassa a tartalmak lapozását (a felhasználó érintéssel is kiválaszthat egyes pipeket).

PipsPager létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a PipsPager működését

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Az alapértelmezett PipsPager öt látható pipből áll, amelyek vízszintesen (alapértelmezetten) vagy függőlegesen orientáltak.

A PipsPager a navigációs gombokat (előző, következő) is támogatja a növekményesen szomszédos lapra való áttéréshez. Alapértelmezés szerint a navigációs gombok össze vannak csukva, és nem foglalnak helyet az elrendezésben.

Alapértelmezés szerint az első és az utolsó elem közötti körbefuttatás nincs engedélyezve. A Windows App SDK 1.6-os verziójától kezdve a WrapMode tulajdonság használatával lehetővé teheti, hogy a navigáció körbeforduljon az első és az utolsó elem között. További információkért lásd: Sortörés az első és az utolsó elem között.

Alapértelmezett PipsPager öt vízszintes ponttal, és az első ki van jelölve. 

<PipsPager x:Name="DefaultPipsPager" />

Vízszintes PipsPager navigációs gombokkal

A navigációs gombok (előző, következő) lehetővé teszik, hogy a felhasználó növekményesen szomszédos oldalra lépjen.

Alapértelmezés szerint a navigációs gombok össze vannak csukva. Ezt a viselkedést a PreviousButtonVisibility és NextButtonVisibility tulajdonságaival szabályozhatja.

A tulajdonságok lehetséges értékei a következők:

  • Összecsukott: A gomb nem látható a felhasználó számára, és nem helyet foglal el. (Alapértelmezett)
  • Látható: A gomb látható és engedélyezve van. Minden gomb automatikusan elrejtődik, amikor a PipsPager a tartalom minimális vagy maximális határértékén van. Ha például az aktuális oldal az első oldal, akkor az előző gomb el van rejtve; ha az aktuális oldal az utolsó oldal, akkor a következő gomb el van rejtve. Rejtett állapotban a gomb nem látható, de helyet foglal el.
  • VisibleOnPointerOver: A viselkedés ugyanaz, mint a Visible , kivéve, hogy a gomb csak akkor jelenik meg, ha a felhasználó a mutatómutatót a PipsPager felhasználói felületére viszi, vagy a felhasználó a PipsPagerre állítja a billentyűzet fókuszát.

A PipsPager öt vízszintes ponttal és navigációs gombokkal, amelyek az aktuális oldal alapján láthatóak. 

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

Függőleges PipsPager, amelynek navigációs gombjai az egérmutató fölött válnak láthatóvá.

A PipsPager függőlegesen is orientált lehet, és nem változtatja meg a viselkedést vagy az interakciós élményt.

A felső gomb az első gombnak felel meg, az alsó gomb pedig a vízszintes nézetben az utolsó gombnak felel meg.

Az alábbi példa a navigációs gombok VisibleOnPointerOver beállítását mutatja be.

Egy PipsPager, amely öt függőleges ponttal rendelkezik, és a navigációs gombok láthatósága a mutató pozíciója és az aktuális oldal alapján változik. 

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

Görgető pontok

Ha a tartalom sok oldalból (NumberOfPages) áll, a MaxVisiblePips tulajdonsággal beállíthatja a látható, interaktív pipek számát.

Ha a NumberOfPages értéke nagyobb, mint a MaxVisiblePips értéke, a pipek automatikusan görgetnek a vezérlőelem kijelölt oldalának középre igazításához. Ha a NumberOfPages értéke egyenlő vagy kisebb, mint a MaxVisiblePips, nem történik görgetés, és a megjelenített pipek száma megegyezik a NumberOfPages értékével.

Ha a MaxVisiblePips értéke nagyobb, mint a rendelkezésre álló elrendezési terület, a megjelenített pipek ki lesznek vágva. A megjelenített pontok száma a MaxVisiblePips és a NumberOfPages közül a kisebb értéke.

Alapértelmezés szerint legfeljebb öt pip látható.

PipsPager vízszintesen görgető pipekkel. 

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

Sortörés az első és az utolsó elem között

Alapértelmezés szerint a PipsPager az első és az utolsó elemnél áll meg, és a navigáció nem tördel. Ha a PreviousButtonVisibility vagy a NextButtonVisibility értékre van állítva Visible, a megfelelő navigációs gomb el van rejtve, amikor a felhasználó eléri a tartalom elejét vagy végét.

Az 1.6-os Windows App SDK kezdve beállíthatja a WrapMode tulajdonságot, hogy a felhasználó folyamatosan navigáljon az utolsó elemtől az elsőig, az elsőtől az utolsóig. Ha a körbefuttatás engedélyezve van, az előző és a következő navigációs gombok továbbra is engedélyezve maradnak a tartalom végén, így a felhasználó az első és az utolsó elem között mozoghat.

A WrapMode tulajdonság lehetséges értékei a következők:

  • Nincs: A navigáció nem tördel. A PipsPager az első és az utolsó elemnél áll meg. (Alapértelmezett)
  • Körkörös: A navigáció körkörösen lép az első és az utolsó elem között.
<PipsPager x:Name="WrappingPipsPager"
    NumberOfPages="5"
    WrapMode="Wrap"
    PreviousButtonVisibility="Visible"
    NextButtonVisibility="Visible" />

A PipsPager integrálása gyűjteményvezérlővel

Egy PipsPager öt vízszintes ponttal a FlipView fényképalbum alatt. A harmadik pont van kiválasztva, amely a tartalom harmadik oldalát jelzi.

A PipsPagert gyakran használják gyűjteményvezérlőkkel együtt.

Az alábbi példa bemutatja, hogyan köthet a PipsPagert egy FlipView-hez, és hogyan nyújtson egy másik módot a tartalom közötti navigálásra és az aktuális oldal jelzésére.

Megjegyzés:

Ha a PipsPagert lapjelzőként szeretné használni, csak és tiltsa le a felhasználói interakciókat, állítsa a vezérlő IsEnabled tulajdonságát hamis értékre a vezérlőben.

<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 és navigációs gombok testreszabása

A navigációs gombok és pipek testre szabhatók a PreviousButtonStyle, NextButtonStyle, SelectedPipStyleés NormalPipStyle tulajdonságaival.

Ha a PreviousButtonStyle vagy a NextButtonStyle tulajdonságokon keresztül állítja be a láthatóságot, ezek a beállítások elsőbbséget élveznek a PreviousButtonVisibility vagy a NextButtonVisibility tulajdonsággal szemben (kivéve, ha az PipsPagerButtonVisibility értéke Collapsed).

PipsPager öt vízszintes ponttal és egyéni navigációs gombokkal. 

<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" />
  • Last updated on