PivotPivot

Le contrôle Pivot permet d’utiliser le balayage tactile dans un petit ensemble de sections de contenu.The Pivot control enables touch-swiping between a small set of content sections.

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

Obtenir la bibliothèque d’interface utilisateur WindowsGet the Windows UI Library

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.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Pour plus d’informations, consultez Rayons des angles.For more info, see Corner radius. WinUI est un package NuGet qui contient de nouveaux contrôles et des fonctionnalités d’interface utilisateur pour les applications Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows.For more info, including installation instructions, see Windows UI Library.

API de plateforme : Classe Pivot, Classe NavigationViewPlatform APIs: Pivot class, NavigationView class

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir comment fonctionne le contrôle Pivot.If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot control in action.

Le contrôle Pivot, tout comme NavigationView, souligne l’élément sélectionné.The Pivot control, just like NavigationView, underlines the selected item.

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

Est-ce le contrôle approprié ?Is this the right control?

Pour créer des modèles de navigation supérieure et d’onglets communs, nous recommandons d’utiliser NavigationView, qui s’adapte automatiquement aux différentes tailles d’écran et permet une meilleure personnalisation.To achieve common top navigation and tabs patterns, we recommend using NavigationView, which automatically adapts to different screen sizes and allows for greater customization.

Toutefois, si votre navigation nécessite un balayage tactile, nous vous recommandons d’utiliser le contrôle Pivot.However, if your navigation requires touch-swiping, we recommend using Pivot.

Les autres différences importantes qui existent entre le contrôle NavigationView et le contrôle Pivot se situent au niveau du comportement de dépassement par défaut et au niveau de l’API de navigation :The other key differences between the NavigationView and Pivot controls are the default overflow behavior and the navigation API:

  • Les carrousels Pivot permettent un dépassement des éléments, alors que NavigationView utilise un dépassement par menu déroulant pour que les utilisateurs puissent voir tous les éléments.Pivot carousels overflow items, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • Pivot gère la navigation entre les différentes sections de contenu, tandis que NavigationView permet de mieux contrôler le comportement de navigation.Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

Utiliser NavigationView au lieu de PivotUse NavigationView instead of 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.If your app's UI uses the Pivot control, then you can convert Pivot to NavigationView with the code below.

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.This XAML creates a NavigationView with 3 sections of content, like the example Pivot in Create a pivot control.

<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>
</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é.NavigationView provides more control over navigation customization and requires corresponding code-behind. Pour accompagner le code XAML ci-dessus, utilisez le code-behind suivant :To accompany the above XAML, use the following code-behind:

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

    navOptions.IsNavigationStackEnabled = False;

    switch (item.Name)
    {
        case "Section1Content":
            ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
            break;

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

        case "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.This code mimics the Pivot control's built-in navigation experience, minus the touch-swiping experience between content sections. 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.However, as you can see, you could also customize several points, including the animated transition, navigation parameters, and stack capabilities.

Créer un contrôle PivotCreate a pivot control

Ce code crée un contrôle Pivot de base avec trois sections de contenu.This code creates a basic Pivot control with 3 sections of content.

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

Le contrôle Pivot est un ItemsControl. Il peut donc contenir une collection d’éléments de n’importe quel type.Pivot is an ItemsControl, so it can contain a collection of items of any 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.Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a 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.Because a Pivot is often used to navigate between pages of content, it's common to populate the Items collection directly with XAML UI elements. Vous pouvez également affecter à la propriété ItemsSource une source de données.Or, you can set the ItemsSource property to a data source. 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.Items bound in the ItemsSource can be of any type, but if they aren't explicitly PivotItems, you must define an ItemTemplate and HeaderTemplate to specify how the items are displayed.

Vous pouvez utiliser la propriété SelectedItem pour obtenir ou définir l’élément actif du sélecteur de vue.You can use the SelectedItem property to get or set the Pivot's active item. Utilisez la propriété SelectedItem pour obtenir ou définir l’index de l’élément actif.Use the SelectedIndex property to get or set the index of the active item.

En-têtes de sélecteur de vuePivot headers

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.You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.

Par exemple, vous pouvez ajouter une CommandBar dans le RightHeader du contrôle Pivot.For example, you can add a CommandBar in the Pivot's RightHeader.

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

Le contrôle offre les interactions d’entrée tactile suivantes :The control features these touch gesture interactions:

  • 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.Tapping on a pivot item header navigates to that header's section content.
  • 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.Swiping left or right on a pivot item header navigates to the adjacent section.
  • Un mouvement de balayage sur une section vers la gauche ou la droite permet d’accéder à la section adjacente.Swiping left or right on section content navigates to the adjacent section.

Le contrôle est disponible en deux modes :The control comes in two modes:

StationnaireStationary

  • 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.Pivots are stationary when all pivot headers fit within the allowed space.
  • 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.Tapping on a pivot label navigates to the corresponding page, though the pivot itself will not move. Le sélecteur de vue actif est mis en surbrillance.The active pivot is highlighted.

CarrouselCarousel

  • 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.Pivots carousel when all pivot headers don't fit within the allowed space.
  • 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.Tapping a pivot label navigates to the corresponding page, and the active pivot label will carousel into the first position.
  • 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.Pivot items in a carousel loop from last to first pivot section.

Remarque Dans un environnement de type « 10-foot », les en-têtes Pivot ne doivent pas s’afficher dans une vue Carrousel.Note Pivot headers should not carousel in a 10ft environment. Définissez la propriété IsHeaderItemsCarouselEnabled sur false si votre application doit s’exécuter sur Xbox.Set the IsHeaderItemsCarouselEnabled property to false if your app will run on Xbox.

RecommandationsRecommendations

  • Évitez d’utiliser plus de 5 en-têtes en mode carrousel (rotation), afin de ne pas provoquer de désorientation.Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.

Obtenir l’exemple de codeGet the sample code