Pivot

Le contrôle Pivot permet d’utiliser le balayage tactile dans un petit ensemble de sections de contenu.

Le focus par défaut souligne l’en-tête sélectionné

Obtenir la bibliothèque d’interface utilisateur Windows

Logo WinUI

La bibliothèque d’interface utilisateur Windows version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis. Pour plus d’informations, consultez Rayons des angles. WinUI est un package NuGet qui contient de nouveaux contrôles et des fonctionnalités d’interface utilisateur pour les applications Windows. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows.

API de plateforme : Classe Pivot, Classe NavigationView

Exemples

Galerie WinUI 2
Galerie WinUI

Si vous avez installé l’application WinUI 2 Gallery , cliquez ici pour ouvrir l’application et voir le contrôle Pivot en action.

Le contrôle Pivot, tout comme NavigationView, souligne l’élément sélectionné.

Le focus par défaut souligne l’en-tête sélectionné

Est-ce le contrôle approprié ?

Notes

Le contrôle Pivot n’est pas recommandé pour les modèles de conception Windows 11. Lorsque vous concevez pour Windows 11, envisagez d’utiliser un contrôle NavigationView ou TabView au lieu d’un contrôle Pivot. Pour obtenir un exemple, consultez la section Utiliser NavigationView au lieu du tableau croisé dynamique .

Pour créer une interface utilisateur à onglets, utilisez un contrôle TabView .

Pour obtenir des modèles de navigation principaux courants, nous vous recommandons d’utiliser NavigationView, qui s’adapte automatiquement aux différentes tailles d’écran et permet une plus grande personnalisation.

Certaines différences clés entre NavigationView et Pivot sont répertoriées ici :

  • Pivot prend en charge le balayage tactile pour basculer entre les éléments.
  • Les éléments de dépassement de capacité dans un carrousel pivot, tandis que NavigationView utilise un dépassement de liste déroulante afin que les utilisateurs puissent voir tous les éléments.
  • Pivot gère la navigation entre les différentes sections de contenu, tandis que NavigationView permet de mieux contrôler le comportement de navigation.

Utiliser NavigationView au lieu de Pivot

Si l’interface utilisateur de votre application utilise le contrôle Pivot, vous pouvez le convertir en contrôle NavigationView à l’aide du code ci-dessous.

Ce code XAML crée un contrôle NavigationView avec trois sections de contenu, comme dans l’exemple de Pivot de Créer un contrôle Pivot.

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView permet de contrôler davantage la personnalisation de la navigation et nécessite pour cela du code-behind adapté. Pour accompagner le code XAML ci-dessus, utilisez le code-behind suivant :

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

Ce code reproduit l’expérience de navigation intégrée du contrôle Pivot, mais n’inclut pas la fonctionnalité de balayage tactile entre les sections de contenu. Toutefois, vous pouvez aussi personnaliser plusieurs éléments, y compris la transition animée, les paramètres de navigation et les fonctionnalités de pile.

Créer un contrôle Pivot

Ce code crée un contrôle Pivot de base avec trois sections de contenu.

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

Éléments du contrôle Pivot

Le contrôle Pivot est un ItemsControl. Il peut donc contenir une collection d’éléments de n’importe quel type. Tout élément que vous ajoutez au contrôle Pivot qui n’est pas explicitement un élément PivotItem est implicitement encapsulé dans un PivotItem. Un sélecteur de vue est souvent utilisé pour naviguer entre des pages de contenu. Il est donc courant de remplir la collection Items directement avec des éléments d’interface utilisateur XAML. Vous pouvez également affecter à la propriété ItemsSource une source de données. Les éléments liés dans la propriété ItemsSource peuvent être de n’importe quel type. Cependant, s’il ne s’agit pas explicitement d’éléments PivotItem, vous devez définir un ItemTemplate et un HeaderTemplate pour spécifier leur mode d’affichage.

Vous pouvez utiliser la propriété SelectedItem pour obtenir ou définir l’élément actif du sélecteur de vue. Utilisez la propriété SelectedItem pour obtenir ou définir l’index de l’élément actif.

En-têtes de sélecteur de vue

Vous pouvez utiliser les propriétés LeftHeader et RightHeader pour ajouter d’autres contrôles à l’en-tête du sélecteur de vue.

Par exemple, vous pouvez ajouter une CommandBar dans le RightHeader du contrôle Pivot.

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

Interaction avec le sélecteur de vue

Le contrôle offre les interactions d’entrée tactile suivantes :

  • Un appui sur un en-tête d’élément sélecteur de vue permet d’accéder au contenu de la section de cet en-tête.
  • Un mouvement de balayage sur un en-tête d’élément sélecteur de vue vers la gauche ou la droite permet d’accéder à la section adjacente.
  • Un mouvement de balayage sur une section vers la gauche ou la droite permet d’accéder à la section adjacente.

Le contrôle est disponible en deux modes :

Stationnaire

  • Les sélecteurs de vue sont stationnaires lorsque l’espace autorisé est suffisant pour contenir tous les en-têtes de sélecteur de vue.
  • Un appui sur une étiquette de sélecteur de vue permet d’accéder à la page correspondante, bien que le sélecteur de vue proprement dit ne bouge pas. Le sélecteur de vue actif est mis en surbrillance.

Carrousel

  • Les sélecteurs de vue sont présentés sous forme de carrousel lorsque l’espace autorisé n’est pas suffisant pour contenir tous les en-têtes de sélecteur de vue.
  • Un appui sur une étiquette de sélecteur de vue permet d’accéder à la page correspondante. L’étiquette du sélecteur de vue actif passe en première position par rotation.
  • Placez les éléments sélecteur de vue dans une boucle carrousel de la dernière à la première section de sélecteur de vue.

Remarque Dans un environnement de type « 10-foot », les en-têtes Pivot ne doivent pas s’afficher dans une vue Carrousel. Définissez la propriété IsHeaderItemsCarouselEnabled sur false si votre application doit s’exécuter sur Xbox.

Recommandations

  • Évitez d’utiliser plus de 5 en-têtes en mode carrousel (rotation), afin de ne pas provoquer de désorientation.

Obtenir l’exemple de code