PipsPager

El control PipsPager permite que los usuarios naveguen por contenido paginado linealmente mediante una colección configurable de glifos, cada uno de los cuales representa una única "página" dentro de un intervalo potencialmente ilimitado. Los glifos resaltan la página actual e indican la disponibilidad de las páginas anteriores y posteriores. El control se basa en el contexto actual y no admite la numeración explícita de páginas ni una organización no lineal.

¿Qué es un pip?

Las pip representan una unidad de valor numérico, que normalmente se representa como puntos. Sin embargo, se pueden personalizar para usar otros glifos, como guiones o cuadrados.

De forma predeterminada, cada punto sólido del control PipsPager representa una página en el diseño del contenido. Un usuario puede seleccionar un punto para ir a esa página en el contenido.

¿Es este el control adecuado?

Utilice PipsPager para el contenido organizado en una estructura lineal, no se numera explícitamente, o donde se desee una representación basada en glifos de páginas numeradas.

Esta UI se usa normalmente en aplicaciones como visores de fotos y listas de aplicaciones, donde el espacio de visualización está limitado y el número de páginas potenciales es infinito.

Recommendations

• Los patrones de UI comunes para PipsPager incluyen visores de fotos, listas de aplicaciones, carruseles y diseños en los que el espacio de visualización está limitado.
• Para experiencias optimizadas para la entrada de gamepad, te recomendamos no colocar la UI directamente a la izquierda o a la derecha de un PipsPager horizontal, ni por encima o por debajo de un PipsPager orientado verticalmente.
• En el caso de experiencias optimizadas para la entrada táctil, se recomienda integrar PipsPager con un control de vista, como FlipView, para aprovechar la paginación en el contenido con la función táctil (el usuario también puede usar la función táctil para seleccionar pips individuales).

Creación de un PipsPager

La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

PipsPager predeterminado consta de cinco pips visibles que se pueden orientar horizontalmente (valor predeterminado) o verticalmente.

PipsPager también admite botones de navegación (anterior, siguiente) para pasar a una página adyacente de forma incremental. De manera predeterminada, los botones de navegación se contraen y no ocupan espacio de diseño.

No se admite la envoltura entre el primer y el último elemento.

<PipsPager x:Name="DefaultPipsPager" />

PipsPager horizontal con botones de navegación

Los botones de navegación (anterior, siguiente) permiten al usuario pasar a una página adyacente de forma incremental.

Por defecto, los botones de navegación están ocultos. Puede controlar este comportamiento a través de las propiedades PreviousButtonVisibility y NextButtonVisibility.

Los posibles valores para estas propiedades son:

• Contraído: el botón no es visible para el usuario y no ocupa espacio de diseño. (Valor predeterminado)
• Visible: el botón está visible y habilitado. Cada botón se oculta automáticamente cuando PipsPager está en la extensión mínima o máxima del contenido. Por ejemplo, si la página actual es la primera página, el botón anterior está oculto; si la página actual es la última página, el botón siguiente está oculto. Cuando está oculto, el botón no está visible, pero ocupa espacio de diseño.
• VisibleOnPointerOver: el comportamiento es el mismo que Visible, salvo que el botón solo se muestra cuando el usuario mantiene el cursor de puntero sobre la UI de PipsPager o el usuario establece el foco de teclado en PipsPager.

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

PipsPager vertical con botones de navegación visibles al pasar el puntero

PipsPager se puede orientar verticalmente sin ningún cambio en la experiencia de comportamiento o interacción.

El botón superior corresponde al primer botón y el botón inferior corresponde al último botón de la vista horizontal.

En el ejemplo siguiente se muestra la configuración VisibleOnPointerOver para los botones de navegación.

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

Indicadores de desplazamiento

Si el contenido consta de un gran número de páginas (NumberOfPages), puede usar la propiedad MaxVisiblePips para establecer el número de pips interactivos visibles.

Si el valor de NumberOfPages es mayor que el valor de MaxVisiblePips, los pips se desplazan automáticamente para centrar la página seleccionada en el control. Si NumberOfPages es igual o menor que MaxVisiblePips, no se produce ningún desplazamiento y el número de pips mostrados es el mismo que el valor de NumberOfPages.

Si el valor de MaxVisiblePips es mayor que el espacio de diseño disponible, se recortan los pips mostrados. El número de pips mostrados es el menor de MaxVisiblePips y NumberOfPages.

De forma predeterminada, se puede ver un máximo de cinco pips.

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

Integrar PipsPager con un control de colección

El PipsPager se usa a menudo junto con los controles de colecciones.

En el ejemplo siguiente se muestra cómo enlazar PipsPager con un FlipView y proporcionar otra manera de navegar por el contenido e indicar la página actual.

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

Personalización de pip y botón de navegación

Los botones de navegación y pips se pueden personalizar mediante las propiedades PreviousButtonStyle, NextButtonStyle, SelectedPipStyle y NormalPipStyle.

Si establece la visibilidad a través de las propiedades PreviousButtonStyle o NextButtonStyle, esta configuración tiene prioridad sobre las propiedades PreviousButtonVisibility o NextButtonVisibility, respectivamente (a menos que se establezcan en el valor PipsPagerButtonVisibility de 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" />

Artículos relacionados

• ScrollViewer
• FlipView
• ItemsRepeater