Barre de fil d'Ariane (breadcrumb)

Une barre de navigation fournit le chemin d’accès direct des pages ou dossiers à l’emplacement actuel. Il est souvent utilisé dans les situations où la trace de navigation de l’utilisateur (dans un système de fichiers ou un système de menus) doit être visible de manière permanente et l’utilisateur peut avoir besoin de revenir à un emplacement précédent.

Est-ce le contrôle approprié ?

Une barre de navigation permet à un utilisateur de suivre son emplacement lors de la navigation dans une application ou des dossiers, et de revenir rapidement à un emplacement précédent dans le chemin d’accès.

Utilisez une barre de navigation lorsque le chemin d’accès à la position actuelle est pertinent. Cette interface utilisateur est couramment utilisée dans les gestionnaires de dossiers et lorsqu’un utilisateur peut parcourir de nombreux niveaux dans une application.

Interface utilisateur de la barre de navigation

La barre de navigation affiche chaque nœud dans une ligne horizontale, séparée par des chevrons.

Si l’application est redimensionnée de sorte qu’il n’y ait pas suffisamment d’espace pour afficher tous les nœuds, la barre de navigation se réduit et un point de suspension remplace les nœuds les plus à gauche. Cliquer sur les points de suspension ouvre un menu volant pour afficher les nœuds réduits.

Anatomie

L’image ci-dessous montre les parties du BreadcrumbBar contrôle. Vous pouvez modifier l’apparence de certaines parties en utilisant un style léger.

Recommandations

• Utilisez une barre de navigation lorsque vous avez de nombreux niveaux de navigation et que les utilisateurs peuvent revenir à n’importe quel niveau précédent.
• N’utilisez pas de barre de navigation si vous n’avez que 2 niveaux de navigation possibles. Une simple navigation arrière suffit.
• Affichez l’emplacement actuel en tant que dernier élément dans la barre de navigation. Toutefois, vous ne souhaitez généralement pas effectuer de navigation si l’utilisateur clique sur l’élément actif. (Si vous souhaitez permettre à l’utilisateur de recharger la page ou les données actuelles, envisagez de fournir une option de « rechargement » dédiée.)

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.

La barre de navigation 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 .

• Classe Apis:BreadcrumbBar WinUI 2
• Ouvrez l’application WinUI 2 Gallery et voyez la barre de navigation en action. L’application WinUI 2 Gallery comprend des exemples interactifs de la plupart des contrôles et fonctionnalités WinUI 2. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

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:BreadcrumbBar />

Créer une barre de navigation

• API importantes :Classe BreadcrumbBar

Ouvrez l’application Galerie WinUI 3 et voyez la barre de navigation 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.

Cet exemple montre comment créer une barre de navigation avec le style par défaut. Vous pouvez placer la barre de navigation n’importe où dans l’interface utilisateur de votre application. Vous remplissez les barres de navigation en définissant la propriété ItemsSource . Ici, elle est définie sur un tableau de chaînes affichées dans la barre de navigation.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

BreadcrumbBar1.ItemsSource = 
   new string[] { "Home", "Documents", "Design", "Northwind", "Images", "Folder1", "Folder2", "Folder3" };

ItemsSource

La barre de navigation n’a pas de Items propriété, elle a uniquement une propriété ItemsSource . Cela signifie que vous ne pouvez pas remplir les barres de navigation en XAML ou en les ajoutant directement à une Items collection dans le code. Au lieu de cela, vous créez une collection et vous y connectez la ItemsSource propriété dans du code ou à l’aide d’une liaison de données.

Vous pouvez définir itemsSource sur une collection de n’importe quel type de données pour répondre aux besoins de votre application. Les éléments de données de la collection sont utilisés à la fois pour afficher la barre de navigation et pour naviguer lorsque l’utilisateur clique sur un élément de la barre de navigation. Dans les exemples de cette page, nous créons un simple struct (nommé Crumb) qui contient une étiquette à afficher dans la barre de navigation et un objet de données qui contient les informations utilisées pour la navigation.

public readonly struct Crumb
{
    public Crumb(String label, object data)
    {
        Label = label;
        Data = data;
    }
    public string Label { get; }
    public object Data { get; }
    public override string ToString() => Label;
}

ItemTemplate

Par défaut, la barre de navigation affiche la représentation sous forme de chaîne de chaque élément de la collection. Si les éléments de données de votre collection n’ont pas de remplacement approprié ToString , vous pouvez utiliser la propriété ItemTemplate pour spécifier un modèle de données qui définit la façon dont les éléments sont affichés dans la barre de navigation.

Par exemple, si votre collection de barres de navigation était une liste d’objets StorageFolder , vous pouvez fournir un modèle de données et la lier à la propriété DisplayName comme ceci.

ObservableCollection<StorageFolder> Breadcrumbs = 
    new ObservableCollection<StorageFolder>();

<BreadcrumbBar x:Name="FolderBreadcrumbBar"
            ItemsSource="{x:Bind Breadcrumbs}">
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="StorageFolder">
            <TextBlock Text="{x:Bind DisplayName}"/>
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>

ItemClicked

Gérez l’événement ItemClicked pour accéder à l’élément sur lequel l’utilisateur a cliqué dans la barre de navigation. L’emplacement actuel est généralement affiché comme le dernier élément dans la barre de navigation. Vous devez donc inclure un case activée dans votre gestionnaire d’événements si vous ne souhaitez pas recharger l’emplacement actuel.

Cet exemple vérifie l’index pour voir si l’élément cliqué est le dernier élément de la collection, qui est l’emplacement actuel. Si c’est le cas, aucune navigation n’est effectuée.

// Breadcrumbs is set as BreadcrumbBar1.ItemsSource.
List<Crumb> Breadcrumbs = new List<Crumb>();

...

private void BreadcrumbBar1_ItemClicked(muxc.BreadcrumbBar sender, muxc.BreadcrumbBarItemClickedEventArgs args)
{
    if (args.Index < Breadcrumbs.Count - 1)
    {
        var crumb = (Crumb)args.Item;
        Frame.Navigate((Type)crumb.Data);
    }
}

Création d’un style léger

Vous pouvez modifier le style et le ControlTemplate par défaut pour donner au contrôle une apparence unique. Pour obtenir la liste des ressources de thème disponibles, consultez la section Style de contrôle et modèle de la documentation de l’API BreadcrumbBar. Pour plus d’informations, consultez la section Style léger de l’article Application de styles aux contrôles.

Exemples de code

Cet exemple montre comment utiliser une barre de navigation dans un scénario d’explorateur de fichiers simple. L’affichage Liste affiche le contenu de la bibliothèque Images ou Musique sélectionnée, et permet à l’utilisateur d’explorer les sous-dossiers. La barre de navigation est placée dans l’en-tête de l’affichage de liste et affiche le chemin d’accès au dossier actif.

<Grid>
   <ListView x:Name="FolderListView" Margin="24,0"
             IsItemClickEnabled="True" 
             ItemClick="FolderListView_ItemClick">
      <ListView.Header>
         <BreadcrumbBar x:Name="FolderBreadcrumbBar"
                             ItemsSource="{x:Bind Breadcrumbs}"
                             ItemClicked="FolderBreadcrumbBar_ItemClicked">
         </BreadcrumbBar>
      </ListView.Header>
      <ListView.ItemTemplate>
         <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>
</Grid>

public sealed partial class MainPage : Page
{
    List<IStorageItem> Items;
    ObservableCollection<object> Breadcrumbs = 
        new ObservableCollection<object>();

    public MainPage()
    {
        this.InitializeComponent();
        InitializeView();
    }

    private void InitializeView()
    {
        // Start with Pictures and Music libraries.
        Items = new List<IStorageItem>();
        Items.Add(KnownFolders.PicturesLibrary);
        Items.Add(KnownFolders.MusicLibrary);
        FolderListView.ItemsSource = Items;

        Breadcrumbs.Clear();
        Breadcrumbs.Add(new Crumb("Home", null));
    }

    private async void FolderBreadcrumbBar_ItemClicked(muxc.BreadcrumbBar sender, muxc.BreadcrumbBarItemClickedEventArgs args)
    {
        // Don't process last index (current location)
        if (args.Index < Breadcrumbs.Count - 1)
        {
            // Home is special case.
            if (args.Index == 0)
            {
                InitializeView();
            }
            // Go back to the clicked item.
            else
            {
                var crumb = (Crumb)args.Item;
                await GetFolderItems((StorageFolder)crumb.Data);

                // Remove breadcrumbs at the end until 
                // you get to the one that was clicked.
                while (Breadcrumbs.Count > args.Index + 1)
                {
                    Breadcrumbs.RemoveAt(Breadcrumbs.Count - 1);
                }
            }
        }
    }

    private async void FolderListView_ItemClick(object sender, ItemClickEventArgs e)
    {
        // Ignore if a file is clicked.
        // If a folder is clicked, drill down into it.
        if (e.ClickedItem is StorageFolder)
        {
            StorageFolder folder = e.ClickedItem as StorageFolder;
            await GetFolderItems(folder);
            Breadcrumbs.Add(new Crumb(folder.DisplayName, folder));
        }
    }

    private async Task GetFolderItems(StorageFolder folder)
    {
        IReadOnlyList<IStorageItem> itemsList = await folder.GetItemsAsync();
        FolderListView.ItemsSource = itemsList;
    }
}

public readonly struct Crumb
{
    public Crumb(String label, object data)
    {
        Label = label;
        Data = data;
    }
    public string Label { get; }
    public object Data { get; }
    public override string ToString() => Label;
}

Articles connexes

• Informations de base relatives à la conception de la navigation
• NavigationView
• Classe BreadcrumbBar