Partilhar via

PipsPager

  • Artigo

O controle PipsPager ajuda os usuários a navegar dentro de conteúdo paginado linearmente usando uma coleção configurável de glifos, cada um dos quais representa uma única "página" dentro de um intervalo ilimitado. Os glifos destacam a página atual e indicam a disponibilidade das páginas anteriores e seguintes. O controle depende do contexto atual e não oferece suporte a numeração de página explícita ou a uma organização não linear.

O que é um pip?

Pips representam uma unidade de valor numérico, normalmente renderizada como pontos. No entanto, eles podem ser personalizados para usar outros glifos, como traços ou quadrados.

Por padrão, cada ponto sólido no controle PipsPager representa uma página no layout de conteúdo. Um usuário pode selecionar um ponto para navegar até essa página no conteúdo.

Será este o controlo correto?

Use um PipsPager para conteúdo organizado em uma estrutura linear, não está explicitamente numerado ou onde uma representação baseada em glifo de páginas numeradas é desejada.

Essa interface do usuário é comumente usada em aplicativos como visualizadores de fotos e listas de aplicativos, onde o espaço de exibição é limitado e o número de páginas potenciais é infinito.

Recomendações

  • Os padrões comuns da interface do usuário para um PipsPager incluem visualizadores de fotos, listas de aplicativos, carrosséis e layouts em que o espaço de exibição é limitado.
  • Para experiências otimizadas para entrada de gamepad, recomendamos não colocar a interface do usuário diretamente à esquerda ou à direita de um PipsPager horizontal e acima ou abaixo de um PipsPager orientado verticalmente.
  • Para experiências otimizadas para entrada tátil, recomendamos integrar o PipsPager com um controlador de visualização, como um FlipView, para aproveitar a paginação no conteúdo com toque (o utilizador pode também utilizar o toque para selecionar pips individuais).

Criar um PipsPager

Abra o aplicativo WinUI 3 Gallery e veja o PipsPager em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Um PipsPager padrão é composto por cinco pips visíveis que podem ser orientados horizontalmente (padrão) ou verticalmente.

Um PipsPager também suporta botões de navegação (anterior, próximo) para mover para uma página incrementalmente adjacente. Por padrão, os botões de navegação são recolhidos e não ocupam espaço de layout.

Não há suporte para encapsulamento entre o primeiro e o último itens.

Um PipsPager padrão com cinco pontos horizontais e o primeiro selecionado. 

<PipsPager x:Name="DefaultPipsPager" />

PipsPager horizontal com botões de navegação

Os botões de navegação (anterior, próximo) permitem que o usuário se mova para uma página incrementalmente adjacente.

Por predefinição, os botões de navegação são ocultados. Você pode controlar esse comportamento por meio das propriedades PreviousButtonVisibility e NextButtonVisibility.

Os valores possíveis para essas propriedades são:

  • Recolhido: O botão não é visível para o utilizador e não ocupa espaço de layout. (Padrão)
  • Visible: O botão está visível e ativado. Cada botão é automaticamente oculto quando o PipsPager está na extensão mínima ou máxima do conteúdo. Por exemplo, se a página atual for a primeira página, o botão anterior estará oculto; Se a página atual for a última página, o botão Avançar estará oculto. Quando oculto, o botão não é visível, mas ocupa espaço de layout.
  • VisibleOnPointerOver: O comportamento é o mesmo que Visible exceto que o botão só é exibido quando o usuário passa o cursor do ponteiro sobre a interface do usuário PipsPager ou o usuário define o foco do teclado no PipsPager.

Um PipsPager com cinco pontos horizontais e botões de navegação visíveis com base na página atual. 

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

PipsPager vertical com botões de navegação visíveis ao passar o cursor

O PipsPager pode ser orientado verticalmente sem alterar o comportamento ou a experiência de interação.

O botão superior corresponde ao primeiro botão e o botão inferior corresponde ao último botão na vista horizontal.

O exemplo a seguir demonstra a configuração VisibleOnPointerOver para os botões de navegação.

Um PipsPager com cinco pontos verticais e visibilidade dos botões de navegação com base no ponteiro sobre a página atual. 

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

Indicadores de deslocamento

Se o conteúdo consistir em um grande número de páginas (NumberOfPages), você pode usar a propriedade MaxVisiblePips para definir o número de pips visíveis e interativos.

Se o valor de NumberOfPages for maior do que o valor de MaxVisiblePips, os pips rolam automaticamente para centralizar a página selecionada no controle. Se o NumberOfPages for igual ou menor que MaxVisiblePips, nenhuma rolagem ocorrerá e o número de pips mostrado será o mesmo que o valor de NumberOfPages.

Se o valor de MaxVisiblePips for maior do que o espaço de layout disponível, os pips exibidos serão recortados. O número de pips exibidos corresponde ao menor valor entre MaxVisiblePips e NumberOfPages.

Por padrão, um máximo de cinco pips são visíveis.

Um PipsPager com pips que deslizam horizontalmente. 

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

Integre o PipsPager com um controlador Collection

Um PipsPager com cinco pontos horizontais por baixo de um álbum de fotografias FlipView. O terceiro ponto é selecionado, o que indica a terceira página de conteúdo.

Um PipsPager é frequentemente usado em conjunto com controles de coleção.

O exemplo a seguir mostra como vincular um PipsPager a um FlipView e fornecer outra maneira de navegar pelo conteúdo e indicar a página atual.

Observação

Para usar o PipsPager como um indicador de página apenas e desabilitar interações do usuário, defina a propriedade IsEnabled do controle como false no controle.

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

Personalização do pip e do botão de navegação

As propriedades PreviousButtonStyle, NextButtonStyle, SelectedPipStylee NormalPipStyle permitem personalizar os botões de navegação e os pips.

Se você definir a visibilidade por meio das propriedades PreviousButtonStyle ou NextButtonStyle, essas configurações terão precedência sobre as propriedades PreviousButtonVisibility ou NextButtonVisibility respectivamente (a menos que estejam definidas como o valor PipsPagerButtonVisibility de Collapsed).

Um PipsPager com cinco pontos horizontais e botões de navegação personalizados. 

<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 e WinUI 2

Importante

As informações e os exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativo Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

O PipsPager para aplicativos UWP requer WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem no namespace Microsoft.UI.Xaml.Controls.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

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

<muxc:PipsPager />