Tableau croisé dynamique

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

Est-ce le contrôle approprié ?

Pour créer une interface utilisateur semblable à Pivot lors de l’utilisation de WinUI 3 et du Windows App SDK, utilisez le contrôle SelectorBar.

Pour créer une interface utilisateur à onglets, utilisez une commande TabView.

Pour créer des modèles courants de navigation supérieure, nous recommandons d’utiliser NavigationView, qui s’adapte automatiquement aux différentes tailles d’écran et permet une meilleure personnalisation.

Voici quelques différences clés entre NavigationView et Pivot :

• Pivot prend en charge le balayage tactile pour passer d’un élément à l’autre.
• Les éléments débordent dans un carrousel Pivot, tandis que NavigationView utilise un débordement de menu déroulant pour 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.

UWP et WinUI 2

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls.

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et fonctionnalités les plus récents pour tous les contrôles.

Utiliser NavigationView au lieu de Pivot

Si l’interface utilisateur de votre application utilise le contrôle Pivot, vous pouvez le convertir en NavigationView en suivant cet exemple.

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 XAML crée un contrôle Pivot de base avec 3 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 Pivot

Pivot est un ItemsControl, donc il peut contenir une collection d’éléments de n’importe quel type. Tout élément que vous ajoutez au Pivot qui n’est pas explicitement un PivotItem est implicitement enveloppé dans un PivotItem. Parce qu’un Pivot est souvent utilisé pour naviguer entre les pages de contenu, il est courant de peupler la collection Items directement avec des éléments d’interface utilisateur XAML. Vous pouvez aussi définir la propriété ItemsSource sur une source de données. Les éléments liés dans l’ItemsSource peuvent être de n’importe quel type, mais s’ils ne sont pas explicitement des PivotItems, vous devez définir un ItemTemplate et HeaderTemplate pour spécifier le mode d'affichage des éléments.

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

En-têtes Pivot

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

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 Pivot

Le contrôle prend en charge les interactions gestuelles tactiles suivantes :

• Appuyer sur l’en-tête d’un élément Pivot redirige vers la section de cet en-tête.
• Balayer vers la gauche ou vers la droite sur l’en-tête d’un élément Pivot redirige vers la section adjacente.
• Balayer vers la gauche ou vers la droite sur le contenu de la section redirige vers la section adjacente.

Le contrôle existe en deux modes :

Stationnaire

• Les pivots sont fixes lorsque tous les en-têtes de pivot rentrent dans l’espace autorisé.
• Appuyer sur un label de pivot redirige vers la page correspondante, bien que le pivot lui-même ne se déplace pas. Le pivot actif est mis en surbrillance.

Carrousel

• Les pivots défilent lorsque tous les en-têtes de pivot ne rentrent pas dans l’espace autorisé.
• Appuyer sur un label de pivot redirige vers la page correspondante, et le label de pivot actif défile en première position.
• Les éléments Pivot dans un carrousel bouclent de la dernière à la première section de pivot.

Rubriques connexes

• Classe Pivot
• SelectorBar
• NavigationView
• TabView
• Notions de base de la conception de la navigation