Condividi tramite

PipsPager

  • Articolo

Il controllo PipsPager consente agli utenti di spostarsi all'interno di contenuti impaginati linearmente usando una raccolta configurabile di glifi, ognuno dei quali rappresenta una singola "pagina" all'interno di un intervallo illimitato. I glifi evidenziano la pagina corrente e indicano la disponibilità delle pagine precedenti e successive. Il controllo si basa sul contesto corrente e non supporta la numerazione esplicita delle pagine o un'organizzazione non lineare.

Cos'è un pip?

I pip rappresentano un'unità di valore numerico, in genere sottoposta a rendering come punti. Tuttavia, possono essere personalizzati per usare altri glifi, ad esempio trattini o quadrati.

Per impostazione predefinita, ogni punto solido nel controllo PipsPager rappresenta una pagina nel layout del contenuto. Un utente può selezionare un punto per passare a tale pagina nel contenuto.

È il controllo giusto?

Usare pipsPager per il contenuto organizzato in una struttura lineare, non è numerato in modo esplicito o in cui è desiderata una rappresentazione basata su glifi di pagine numerate.

Questa interfaccia utente viene comunemente usata nelle app, ad esempio visualizzatori di foto ed elenchi di app, in cui lo spazio di visualizzazione è limitato e il numero di pagine potenziali è infinito.

Consigli

  • I modelli di interfaccia utente comuni per pipsPager includono visualizzatori di foto, elenchi di app, carousels e layout in cui lo spazio di visualizzazione è limitato.
  • Per le esperienze ottimizzate per l'input del game pad, ti consigliamo di posizionare l'interfaccia utente direttamente a sinistra o a destra di un PipsPager orizzontale e sopra o sotto un PipsPager orientato verticalmente.
  • Per le esperienze ottimizzate per l'input tocco, è consigliabile integrare PipsPager con un controllo di visualizzazione, ad esempio FlipView, per sfruttare i vantaggi dell'impaginazione sul contenuto con il tocco (l'utente può anche usare il tocco per selezionare singoli pip).

Piattaforma UWP e WinUI 2

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

PipsPager per le app UWP richiede WinUI 2. Per maggiori informazioni, incluse le istruzioni per l'installazione, vedere WinUI 2. Le API per questo controllo esistono nello spazio dei nomi Microsoft.UI.Xaml.Controls.

Per usare il codice in questo articolo con WinUI 2, usare un alias in XAML (si usa muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedere Attività iniziali di WinUI 2.

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

<muxc:PipsPager />

Creare un pipsPager

Aprire l'app Raccolta WinUI 3 e vedere PipsPager in azione.

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

PipsPager predefinito è costituito da cinque pip visibili che possono essere orientati orizzontalmente (impostazione predefinita) o verticalmente.

PipsPager supporta anche i pulsanti di spostamento (precedente, successivo) per passare a una pagina adiacente incrementale. Per impostazione predefinita, i pulsanti di spostamento vengono compressi e non occupano spazio di layout.

Il wrapping tra il primo e l'ultimo elemento non è supportato.

PipsPager predefinito con cinque punti orizzontali e il primo selezionato. 

<PipsPager x:Name="DefaultPipsPager" />

PipsPager orizzontale con pulsanti di spostamento

I pulsanti di spostamento (precedente, successivo) consentono all'utente di passare a una pagina adiacente in modo incrementale.

Per impostazione predefinita, i pulsanti di spostamento vengono compressi. È possibile controllare questo comportamento tramite le proprietà PreviousButtonVisibility e NextButtonVisibility.

I valori possibili per questa proprietà sono:

  • Compresso: il pulsante non è visibile all'utente e non occupa spazio di layout. (impostazione predefinita).
  • Visibile: il pulsante è visibile e abilitato. Ogni pulsante viene nascosto automaticamente quando PipsPager è al livello minimo o massimo del contenuto. Ad esempio, se la pagina corrente è la prima pagina, il pulsante precedente è nascosto; se la pagina corrente è l'ultima pagina, il pulsante successivo è nascosto. Se nascosto, il pulsante non è visibile ma occupa spazio di layout.
  • VisibleOnPointerOver: il comportamento è uguale a Visible , ad eccezione del fatto che il pulsante viene visualizzato solo quando l'utente passa il cursore del puntatore sull'interfaccia utente di PipsPager o l'utente imposta lo stato attivo della tastiera su PipsPager.

PipsPager con cinque punti orizzontali e pulsanti di spostamento visibili in base alla pagina corrente. 

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

PipsPager verticale con pulsanti di spostamento visibili sul puntatore

PipsPager può essere orientato verticalmente senza alcuna modifica al comportamento o all'esperienza di interazione.

Il pulsante superiore corrisponde al primo pulsante e il pulsante inferiore corrisponde all'ultimo pulsante nella visualizzazione orizzontale.

Nell'esempio seguente viene illustrata l'impostazione VisibleOnPointerOver per i pulsanti di spostamento.

PipsPager con cinque punti verticali e la visibilità dei pulsanti di spostamento in base al puntatore su e alla pagina corrente. 

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

Pip di scorrimento

Se il contenuto è costituito da un numero elevato di pagine (NumberOfPages), è possibile utilizzare la proprietà MaxVisiblePips per impostare il numero di pip interattivi visibili.

Se il valore di NumberOfPages è maggiore del valore di MaxVisiblePips, i pip scorrono automaticamente per centrare la pagina selezionata nel controllo. Se NumberOfPages è uguale o minore di MaxVisiblePips, non viene eseguito alcun scorrimento e il numero di pip visualizzati è uguale al valore di NumberOfPages.

Se il valore di MaxVisiblePips è maggiore dello spazio di layout disponibile, i pip visualizzati vengono ritagliati. Il numero di pip visualizzati è minore di MaxVisiblePips e NumberOfPages.

Per impostazione predefinita, sono visibili un massimo di cinque pip.

PipsPager con pips scorrevoli orizzontalmente. 

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

Integrare PipsPager con un controllo Collection

PipsPager con cinque punti orizzontali sotto un album fotografico FlipView. Il terzo punto è selezionato, che indica la terza pagina di contenuto.

Un PipsPager viene spesso usato insieme ai controlli di raccolta.

L'esempio seguente illustra come associare pipsPager a un controllo FlipView e fornire un altro modo per spostarsi tra il contenuto e indicare la pagina corrente.

Nota

Per usare PipsPager solo come indicatore di pagina e disabilitare le interazioni utente, impostare la proprietà IsEnabled del controllo su false nel controllo.

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

Personalizzazione del pulsante pip e del pulsante di spostamento

I pulsanti di spostamento e i pip possono essere personalizzati tramite le proprietà PreviousButtonStyle, NextButtonStyle, SelectedPipStyle e NormalPipStyle .

Se si imposta la visibilità tramite le proprietà PreviousButtonStyle o NextButtonStyle, queste impostazioni hanno la precedenza sulle proprietà PreviousButtonVisibility o NextButtonVisibility rispettivamente (a meno che non siano impostate sul valore PipsPagerButtonVisibility di Collapsed).

PipsPager con cinque punti orizzontali e pulsanti di spostamento personalizzati. 

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