Partager via

Barre de sélecteur

Une barre de sélecteur permet à un utilisateur de basculer entre un petit nombre d’ensembles ou de vues de données différents. Un élément à la fois peut être sélectionné.

Barre de sélecteur avec les nœuds Récents, Partagés, Favoris. Le nœud récent est sélectionné, comme indiqué par une ligne bleue sous le texte.

Lorsqu’un utilisateur sélectionne un élément dans la barre de sélecteurs, vous modifiez généralement l’affichage en effectuant les opérations suivantes :

  • navigation entre différentes pages dans votre application.
  • modification des données affichées dans un contrôle de collection.

La barre de sélecteur est un contrôle léger qui prend en charge une icône et un texte. Il est destiné à présenter un nombre limité d’options afin qu’il ne réorganise pas les éléments pour s’adapter à différentes tailles de fenêtre.

Est-ce le contrôle approprié ?

Utilisez une barre de sélection lorsque vous souhaitez permettre à un utilisateur de naviguer entre un nombre limité de vues ou de pages et qu’une seule option peut être sélectionnée à la fois.

Voici quelques exemples :

  • Basculer entre les pages « Récents », « Partagés » et « Favoris », où chaque page affiche une liste unique de contenu.
  • Basculement entre les affichages « Tout », « Non lus », « Marqués » et « Urgent », où chaque affichage affiche une liste de messages électroniques filtrée de manière unique.

Quand un autre contrôle doit-il être utilisé ?

Il existe certains scénarios où un autre contrôle peut être plus approprié à utiliser.

  • Utilisez NavigationView lorsque vous avez besoin d’une navigation cohérente d’application de niveau supérieur qui s’adapte à différentes tailles de fenêtre.
  • Utilisez TabView lorsque l’utilisateur doit pouvoir ouvrir, fermer, réorganiser ou supprimer de nouvelles vues du contenu.
  • Utilisez PipsPager lorsque vous avez besoin d’une pagination régulière d’une vue de données unique.
  • Utilisez RadioButtons lorsqu’une option n’est pas sélectionnée par défaut et que le contexte n’est pas lié à la navigation de page.

Créer un contrôle SelectorBar

Ouvrez l’application galerie WinUI 3 et consultez la barre de sélection en action

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub

Ce code XAML crée un contrôle SelectorBar de base avec 3 sections de contenu.

<SelectorBar x:Name="SelectorBar">
    <SelectorBarItem x:Name="SelectorBarItemRecent" 
                     Text="Recent" Icon="Clock"/>
    <SelectorBarItem x:Name="SelectorBarItemShared" 
                     Text="Shared" Icon="Share"/>
    <SelectorBarItem x:Name="SelectorBarItemFavorites" 
                     Text="Favorites" Icon="Favorite"/>
</SelectorBar>

Cela montre comment ajouter un SelectorBarItem dans le code.

SelectorBarItem newItem = new SelectorBarItem()
{
    Text = "New Item",
    Icon = new SymbolIcon(Symbol.Add)
};
selectorBar.Items.Add(newItem);

Éléments selectorBar

Vous remplissez la collection SelectorBar Items avec les objets SelectorBarItem . Vous pouvez effectuer cette opération directement en XAML ou en code. Étant donné qu’il est destiné à afficher un nombre limité d’options, SelectorBar n’a pas de ItemsSource propriété pour la liaison à une collection externe d’éléments.

Contenu de l’élément

La classe SelectorBarItem fournit des propriétés Text et Icon que vous utilisez pour définir le contenu de votre barre de sélecteur. Vous pouvez définir une ou les deux propriétés ; Toutefois, nous vous recommandons de définir la propriété pour rendre l’élément Text plus explicite.

La Icon propriété prend un IconElement. Vous pouvez donc utiliser l’un de ces types d’icônes dérivés :

Note

SelectorBarItem hérite de la propriété Child de ItemContainer. Vous pouvez utiliser cette propriété pour définir le contenu, mais nous vous déconseillons de le faire. Le contenu défini de cette façon n’obtient pas les états visuels et de style fournis par le modèle de contrôle SelectorBarItem.

Sélection d’élément

Vous pouvez utiliser la propriété SelectedItem pour obtenir ou définir l’élément actif de SelectorBar. Cette opération est synchronisée avec la propriété IsSelected de SelectorBarItem. Si vous définissez l’une ou l’autre propriété, l’autre est mis à jour automatiquement.

Chaque fois que le sélecteur obtient le focus et SelectedItem est null, SelectedItem est automatiquement défini sur la première instance focusable dans la collection Items , le cas échéant.

Chaque fois que l’élément sélectionné est supprimé de la Items collection, la SelectedItem propriété est définie nullsur . Si SelectedItem la valeur est définie null pendant que selectorBar a le focus, SelectorBar n’a pas d’élément sélectionné, mais conserve le focus.

La définition SelectedItem d’un élément qui n’est pas actuellement dans la Items collection lève une exception.

Il n’existe aucune SelectedIndex propriété, mais vous pouvez obtenir l’index de ce SelectedItem type :

int currentSelectedIndex = 
    selectorBar.Items.IndexOf(selectorBar.SelectedItem);

Sélection modifiée

Gérez l’événement SelectionChanged pour répondre à la sélection des utilisateurs et modifier ce qui est affiché à l’utilisateur. L’événement SelectionChanged est déclenché lorsqu’un élément est sélectionné de l’une des façons suivantes :

  • Automatisation de l'interface utilisateur
  • Focus tabulation (et un nouvel élément est sélectionné)
  • Navigation de gauche et de droite dans selectorBar
  • Événement appuyé via la souris ou l’interaction tactile
  • Sélection programmatique (via la propriété SelectorBar.SelectedItem ou la propriété IsSelected de SelectorBarItem).

Lorsqu’un utilisateur sélectionne un élément, vous modifiez généralement l’affichage en accédant entre différentes pages de votre application ou en modifiant les données affichées dans un contrôle de collection. Les deux exemples sont présentés ici.

Conseil / Astuce

Vous trouverez ces exemples dans la page SelectorBar de l’application Galerie WinUI. Utilisez l’application Galerie WinUI pour exécuter et afficher le code complet.

Cet exemple montre comment gérer l’événement SelectionChanged pour naviguer entre différentes pages. La navigation utilise slideNavigationTransitionEffect pour faire glisser les pages à partir de la gauche ou de droite, selon les besoins.

<SelectorBar x:Name="SelectorBar2" 
             SelectionChanged="SelectorBar2_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPage1" Text="Page1" 
                     IsSelected="True" />
    <SelectorBarItem x:Name="SelectorBarItemPage2" Text="Page2" />
    <SelectorBarItem x:Name="SelectorBarItemPage3" Text="Page3" />
    <SelectorBarItem x:Name="SelectorBarItemPage4" Text="Page4" />
    <SelectorBarItem x:Name="SelectorBarItemPage5" Text="Page5" />
</SelectorBar>

<Frame x:Name="ContentFrame" IsNavigationStackEnabled="False" />

int previousSelectedIndex = 0;

private void SelectorBar2_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    SelectorBarItem selectedItem = sender.SelectedItem;
    int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
    System.Type pageType;

    switch (currentSelectedIndex)
    {
        case 0:
            pageType = typeof(SamplePage1);
            break;
        case 1:
            pageType = typeof(SamplePage2);
            break;
        case 2:
            pageType = typeof(SamplePage3);
            break;
        case 3:
            pageType = typeof(SamplePage4);
            break;
        default:
            pageType = typeof(SamplePage5);
            break;
    }

    var slideNavigationTransitionEffect = 
            currentSelectedIndex - previousSelectedIndex > 0 ? 
                SlideNavigationTransitionEffect.FromRight : 
                SlideNavigationTransitionEffect.FromLeft;

    ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() 
                            { Effect = slideNavigationTransitionEffect });

    previousSelectedIndex = currentSelectedIndex;
}

Afficher différentes collections dans un ItemsView

Cet exemple montre comment modifier la source de données d’un ItemsView lorsque l’utilisateur sélectionne une option dans selectorBar.

<SelectorBar x:Name="SelectorBar3" 
             SelectionChanged="SelectorBar3_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPink" Text="Pink"
                     IsSelected="True"/>
    <SelectorBarItem x:Name="SelectorBarItemPlum" Text="Plum"/>
    <SelectorBarItem x:Name="SelectorBarItemPowderBlue" Text="PowderBlue"/>
</SelectorBar>

<ItemsView x:Name="ItemsView3" 
           ItemTemplate="{StaticResource ColorsTemplate}"/>
    <ItemsView.Layout>
        <UniformGridLayout/>
    </ItemsView.Layout>
</ItemsView/>

private void SelectorBar3_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    if (sender.SelectedItem == SelectorBarItemPink)
    {
        ItemsView3.ItemsSource = PinkColorCollection;
    }
    else if (sender.SelectedItem == SelectorBarItemPlum)
    {
        ItemsView3.ItemsSource = PlumColorCollection;
    }
    else
    {
        ItemsView3.ItemsSource = PowderBlueColorCollection;
    }
}

UWP et WinUI 2

Important

Le contrôle SelectorBar n’est pas disponible pour UWP et WinUI 2. Pour obtenir des alternatives, consultez NavigationView ou TabView.

  • Last updated on