Récepteur d’appel d’adresses PIP

  • Article

Le contrôle PipsPager aide les utilisateurs à naviguer dans le contenu paginé de manière linéaire à l’aide d’une collection configurable de glyphes, chacun représentant une seule « page » dans une plage illimitée. Les glyphes mettent en surbrillance la page active et indiquent la disponibilité des pages précédentes et suivantes. Le contrôle s’appuie sur le contexte actuel et ne prend pas en charge la numérotation de page explicite ou une organisation non linéaire.

Qu’est-ce qu’un pip ?

Pips représente une unité de valeur numérique, généralement rendue sous forme de points. Toutefois, ils peuvent être personnalisés pour utiliser d’autres glyphes tels que des tirets ou des carrés.

Par défaut, chaque point solide du contrôle PipsPager représente une page dans la disposition de contenu. Un utilisateur peut sélectionner un point pour accéder à cette page dans le contenu.

Est-ce le contrôle approprié ?

Utilisez un PipsPager pour le contenu organisé dans une structure linéaire, n’est pas explicitement numéroté ou lorsqu’une représentation basée sur un glyphe de pages numérotées est souhaitée.

Cette interface utilisateur est couramment utilisée dans les applications telles que les visionneuses de photos et les listes d’applications, où l’espace d’affichage est limité et le nombre de pages potentielles est infini.

Recommandations

  • Les modèles d’interface utilisateur courants pour un PipsPager incluent les visionneuses de photos, les listes d’applications, les carrousels et les dispositions où l’espace d’affichage est limité.
  • Pour les expériences optimisées pour l’entrée du boîtier de commande, nous vous recommandons de ne pas placer l’interface utilisateur directement à gauche ou à droite d’un PipsPager horizontal et au-dessus ou au-dessous d’un PipsPager orienté verticalement.
  • Pour les expériences optimisées pour l’entrée tactile, nous vous recommandons d’intégrer PipsPager à un contrôle d’affichage, tel qu’un FlipView, afin de tirer parti de la pagination sur le contenu avec le toucher (l’utilisateur peut également utiliser tactile pour sélectionner des pips individuels).

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

PipsPager pour les applications UWP nécessite la bibliothèque d’interface utilisateur Windows 2. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows. Les API de ce contrôle existent dans l’espace de noms Microsoft.UI.Xaml.Controls .

Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Consultez Bien démarrer avec WinUI 2 pour plus d’informations.

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

<muxc:PipsPager />

Créer un PipsPager

Ouvrez l’application WinUI 3 Gallery et voyez PipsPager en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Un PipsPager par défaut est composé de cinq pips visibles qui peuvent être orientés horizontalement (par défaut) ou verticalement.

Un PipsPager prend également en charge les boutons de navigation (précédent, suivant) pour se déplacer vers une page adjacente de manière incrémentielle. Par défaut, les boutons de navigation sont réduits et n’occupent pas d’espace de disposition.

L’habillage entre le premier et le dernier élément n’est pas pris en charge.

PipsPager par défaut avec cinq points horizontaux, le premier étant sélectionné. 

<PipsPager x:Name="DefaultPipsPager" />

PipsPager horizontal avec des boutons de navigation

Les boutons de navigation (précédent, suivant) permettent à l’utilisateur de se déplacer vers une page adjacente de manière incrémentielle.

Par défaut, les boutons de navigation sont réduits. Vous pouvez contrôler ce comportement via les propriétés PreviousButtonVisibility et NextButtonVisibility .

Les valeurs possibles pour ces propriétés sont les suivantes :

  • Réduit : le bouton n’est pas visible par l’utilisateur et n’occupe pas d’espace de disposition. (Par défaut)
  • Visible : le bouton est visible et activé. Chaque bouton est automatiquement masqué lorsque PipsPager se trouve à l’étendue minimale ou maximale du contenu. Par exemple, si la page active est la première page, le bouton précédent est masqué ; si la page active est la dernière page, le bouton suivant est masqué. Lorsqu’il est masqué, le bouton n’est pas visible, mais occupe de l’espace de disposition.
  • VisibleOnPointerOver : le comportement est identique à Visible, sauf que le bouton s’affiche uniquement lorsque l’utilisateur pointe le curseur du pointeur sur l’interface utilisateur PipsPager ou que l’utilisateur définit le focus clavier sur pipsPager.

PipsPager avec cinq points horizontaux et des boutons de navigation visibles en fonction de la page active. 

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

PipsPager vertical avec des boutons de navigation visibles sur le pointeur

PipsPager peut être orienté verticalement sans modification du comportement ou de l’expérience d’interaction.

Le bouton supérieur correspond au premier bouton et le bouton inférieur correspond au dernier bouton de la vue horizontale.

L’exemple suivant illustre le paramètre VisibleOnPointerOver pour les boutons de navigation.

Un PipsPager avec cinq points verticaux et des boutons de navigation visibles en fonction du pointeur vers et de la page active. 

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

Défilement des pips

Si le contenu se compose d’un grand nombre de pages (NumberOfPages), vous pouvez utiliser la propriété MaxVisiblePips pour définir le nombre de pips visibles et interactifs.

Si la valeur de NumberOfPages est supérieure à la valeur de MaxVisiblePips, les pips défilent automatiquement pour centrer la page sélectionnée dans le contrôle. Si numberOfPages est égal ou inférieur à MaxVisiblePips, aucun défilement ne se produit et le nombre de pips affiché est identique à la valeur de NumberOfPages.

Si la valeur de MaxVisiblePips est supérieure à l’espace de disposition disponible, les pips affichés sont coupés. Le nombre de pips affiché est le moins élevé de MaxVisiblePips et NumberOfPages.

Par défaut, un maximum de cinq pips sont visibles.

PipsPager avec des pips à défilement horizontal. 

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

Intégrer PipsPager à un contrôle Collection

PipsPager avec cinq points horizontaux sous un album photo FlipView. Le troisième point est sélectionné, ce qui indique la troisième page de contenu.

Un PipsPager est souvent utilisé conjointement avec des contrôles de collection.

L’exemple suivant montre comment lier un PipsPager à un FlipView et fournir un autre moyen de naviguer dans le contenu et d’indiquer la page active.

Notes

Pour utiliser PipsPager comme indicateur de page uniquement et désactiver les interactions utilisateur, définissez la propriété IsEnabled du contrôle sur false dans le contrôle.

<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 et personnalisation du bouton de navigation

Les boutons de navigation et les pips peuvent être personnalisés via les propriétés PreviousButtonStyle, NextButtonStyle, SelectedPipStyle et NormalPipStyle .

Si vous définissez la visibilité via les propriétés PreviousButtonStyle ou NextButtonStyle, ces paramètres sont prioritaires sur les propriétés PreviousButtonVisibility ou NextButtonVisibility, respectivement (sauf s’ils sont définis sur la valeur PipsPagerButtonVisibility de Collapsed).

PipsPager avec cinq points horizontaux et des boutons de navigation personnalisés. 

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