PipsPager

  • Artikel

Das PipsPager-Steuerelement unterstützt Benutzer beim Navigieren in linear paginierten Inhalten mithilfe einer konfigurierbaren Sammlung von Glyphen, die jeweils eine einzelne "Seite" innerhalb eines unbegrenzten Bereichs darstellt. Die Glyphen heben die aktuelle Seite hervor und geben die Verfügbarkeit von vorangehenden und nachfolgenden Seiten an. Das Steuerelement basiert auf dem aktuellen Kontext und unterstützt keine explizite Seitennummerierung oder eine nicht lineare Organisation.

Was ist ein Pip?

Pips stellen eine Einheit des numerischen Werts dar, die in der Regel als Punkte gerendert wird. Sie können jedoch angepasst werden, um andere Glyphen wie Bindestriche oder Quadrate zu verwenden.

Standardmäßig stellt jeder Vollpunkt im PipsPager-Steuerelement eine Seite im Inhaltslayout dar. Ein Benutzer kann einen Punkt auswählen, um zu dieser Seite im Inhalt zu navigieren.

Ist dies das richtige Steuerelement?

Verwenden Sie einen PipsPager für Inhalte, die in einer linearen Struktur organisiert sind, nicht explizit nummeriert sind oder bei denen eine glyphenbasierte Darstellung nummerierter Seiten gewünscht ist.

Diese Benutzeroberfläche wird häufig in Apps wie Fotoanzeigen und App-Listen verwendet, wobei der Anzeigeraum begrenzt und die Anzahl potenzieller Seiten unendlich ist.

Empfehlungen

  • Zu den gängigen Ui-Mustern für einen PipsPager gehören Fotoanzeiger, App-Listen, Karussells und Layouts, bei denen der Anzeigeraum begrenzt ist.
  • Für Benutzeroberflächen, die für die Gamepadeingabe optimiert sind, wird empfohlen, die Benutzeroberfläche direkt links oder rechts von einem horizontalen PipsPager und oberhalb oder unterhalb eines vertikal ausgerichteten PipsPagers zu platzieren.
  • Für Benutzeroberflächen, die für toucheingaben optimiert sind, empfehlen wir die Integration des PipsPagers in ein Ansichtssteuerelement, z. B. eine FlipView, um die Seitenpapageinierung von Inhalten mit Toucheingabe zu nutzen (der Benutzer kann auch die Toucheingabe verwenden, um einzelne Pips auszuwählen).

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

Für PipsPager für UWP-Apps ist die Windows UI Library 2 erforderlich. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). APIs für dieses Steuerelement sind im Microsoft.UI.Xaml.Controls-Namespace vorhanden.

Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.

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

<muxc:PipsPager />

Erstellen eines PipsPagers

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie pipsPager in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

Ein PipsPager-Standard besteht aus fünf sichtbaren Pips, die horizontal (Standard) oder vertikal ausgerichtet werden können.

Ein PipsPager unterstützt auch Navigationsschaltflächen (vorherige, nächste), um zu einer inkrementell angrenzenden Seite zu wechseln. Standardmäßig sind die Navigationsschaltflächen reduziert und belegen keinen Layoutbereich.

Das Umschließen zwischen dem ersten und dem letzten Element wird nicht unterstützt.

PipsPager-Steuerelement im Standardzustand mit fünf horizontalen Punkten, von denen der erste ausgewählt ist. 

<PipsPager x:Name="DefaultPipsPager" />

Horizontaler PipsPager mit Navigationsschaltflächen

Mit den Navigationsschaltflächen (vorherige, nächste Schaltfläche) kann der Benutzer zu einer inkrementell angrenzenden Seite wechseln.

Standardmäßig sind die Navigationsschaltflächen reduziert. Sie können dieses Verhalten über die Eigenschaften PreviousButtonVisibility und NextButtonVisibility steuern.

Mögliche Werte für diese Eigenschaften sind:

  • Reduziert: Die Schaltfläche ist für den Benutzer nicht sichtbar und nimmt keinen Layoutbereich ein. (Standardwert)
  • Sichtbar: Die Schaltfläche ist sichtbar und aktiviert. Jede Schaltfläche wird automatisch ausgeblendet, wenn pipsPager die minimale oder maximale Ausdehnung des Inhalts aufweist. Wenn die aktuelle Seite beispielsweise die erste Seite ist, wird die vorherige Schaltfläche ausgeblendet. wenn die aktuelle Seite die letzte Seite ist, wird die nächste Schaltfläche ausgeblendet. Wenn sie ausgeblendet ist, ist die Schaltfläche nicht sichtbar, nimmt aber Layoutraum in Anspruch.
  • VisibleOnPointerOver: Das Verhalten ist identisch mit Visible, mit der Ausnahme , dass die Schaltfläche nur angezeigt wird, wenn der Benutzer den Zeigercursor auf die PipsPager-Benutzeroberfläche bewegt oder der Benutzer den Tastaturfokus auf pipsPager festlegt.

Ein PipsPager mit fünf horizontalen Punkten und Navigationsschaltflächen, die basierend auf der aktuellen Seite sichtbar sind. 

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

Vertikaler PipsPager mit Navigationsschaltflächen, die auf dem Zeiger angezeigt werden

PipsPager kann vertikal ausgerichtet werden, ohne dass sich das Verhalten oder die Interaktionserfahrung ändert.

Die obere Schaltfläche entspricht der ersten Schaltfläche und die untere Schaltfläche der letzten Schaltfläche in der horizontalen Ansicht.

Im folgenden Beispiel wird die VisibleOnPointerOver-Einstellung für die Navigationsschaltflächen veranschaulicht.

Ein PipsPager mit fünf vertikalen Punkten und Navigationsschaltflächen, die auf Zeiger über und aktuelle Seite basieren. 

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

Bildlauf pips

Wenn der Inhalt aus einer großen Anzahl von Seiten (NumberOfPages) besteht, können Sie die MaxVisiblePips-Eigenschaft verwenden, um die Anzahl sichtbarer interaktiver Pips festzulegen.

Wenn der Wert von NumberOfPages größer als der Wert von MaxVisiblePips ist, scrollen die Pips automatisch, um die ausgewählte Seite im Steuerelement zu zentrieren. Wenn NumberOfPages gleich oder kleiner als MaxVisiblePips ist, wird kein Bildlauf ausgeführt, und die Anzahl der angezeigten Pips entspricht dem Wert von NumberOfPages.

Wenn der Wert von MaxVisiblePips größer als der verfügbare Layoutraum ist, werden die angezeigten Pips abgeschnitten. Die Anzahl der angezeigten Pips ist der geringere Wert von MaxVisiblePips und NumberOfPages.

Standardmäßig sind maximal fünf Pips sichtbar.

Ein PipsPager mit horizontal scrollenden Pips. 

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

Integrieren von PipsPager in ein Sammlungssteuerelement

Ein PipsPager mit fünf horizontalen Punkten unter einem FlipView-Fotoalbum. Der dritte Punkt ist ausgewählt, der die dritte Seite des Inhalts angibt.

Ein PipsPager wird häufig in Verbindung mit Sammlungssteuerelementen verwendet.

Das folgende Beispiel zeigt, wie sie einen PipsPager mit einer FlipView binden und eine andere Möglichkeit zum Navigieren durch Inhalte und die Angabe der aktuellen Seite bieten.

Hinweis

Um pipsPager nur als Seitenindikator zu verwenden und Benutzerinteraktionen zu deaktivieren, legen Sie die IsEnabled-Eigenschaft des Steuerelements im Steuerelement auf false fest.

<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- und Navigationsschaltflächenanpassung

Die Navigationsschaltflächen und Pips können über die Eigenschaften PreviousButtonStyle, NextButtonStyle, SelectedPipStyle und NormalPipStyle angepasst werden.

Wenn Sie die Sichtbarkeit über die Eigenschaften PreviousButtonStyle oder NextButtonStyle festlegen, haben diese Einstellungen Vorrang vor den Eigenschaften PreviousButtonVisibility bzw. NextButtonVisibility (es sei denn, sie sind auf den PipsPagerButtonVisibility-Wert von Collapsed festgelegt).

Ein PipsPager mit fünf horizontalen Punkten und benutzerdefinierten Navigationsschaltflächen. 

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