Share via

Breadcrumb-Leiste

  • Artikel

Eine BreadcrumbBar stellt den direkten Pfad von Seiten oder Ordnern zum aktuellen Speicherort bereit. Sie wird häufig in Situationen verwendet, in denen der Navigationspfad des Benutzers (in einem Dateisystem oder Menüsystem) dauerhaft sichtbar sein muss und der Benutzer möglicherweise zu einem früheren Speicherort zurückkehren muss.

Breadcrumb-Leiste mit Knoten: Home, Dokumente, Design, Northwind, Images, Folder1, Folder2, Folder3. Die Größe der App wird so geändert, dass breadcrumb zerbröselt und eine Auslassungspunkte die linkssten Knoten ersetzt. Klicken Sie dann auf die Auslassungspunkte, um ein Flyout mit den zerbröselten Knoten zu öffnen.

Ist dies das richtige Steuerelement?

Eine Breadcrumb-Leiste ermöglicht es einem Benutzer, seinen Speicherort nachzuverfolgen, wenn er durch eine App oder Ordner navigiert, und er kann schnell zurück zu einer vorherigen Position im Pfad springen.

Verwenden Sie breadcrumbBar, wenn der Pfad zur aktuellen Position relevant ist. Diese Benutzeroberfläche wird häufig in Ordner-Managern verwendet, und wenn ein Benutzer viele Ebenen tief in eine App navigiert.

Die Breadcrumb-Leiste zeigt jeden Knoten in einer horizontalen Linie an, die durch Chevrons getrennt ist.

Breadcrumb-Leiste mit Knoten: Home, Dokumente, Design, Northwind, Images, Folder1, Folder2, Folder3.

Wenn die Größe der App so geändert wird, dass nicht genügend Platz zum Anzeigen aller Knoten vorhanden ist, werden die Breadcrumbs reduziert, und eine Auslassungspunkte ersetzt die äußersten linken Knoten. Wenn Sie auf die Auslassungspunkte klicken, wird ein Flyout geöffnet, um die reduzierten Knoten anzuzeigen.

Die Größe des Breadcrumb-Balkens wurde geändert, sodass eine Auslassungspunkte die am weitesten links stehenden Knoten ersetzt. Mit den Auslassungspunkten wird ein Flyout mit geöffnet, das die reduzierten Knoten anzeigt.

Aufbau

Die folgende Abbildung zeigt die Teile des Steuerelements BreadcrumbBar . Sie können die Darstellung einiger Teile ändern, indem Sie eine einfache Formatierung verwenden.

Abbildung eines Breadcrumb-Balkens mit den Teilen mit der Bezeichnung Ellipse, Chevron, Breadcrumb-Balkenelement, aktuelles Element, Flyout mit Auslassungspunkten, Auslassungspunkte

Empfehlungen

  • Verwenden Sie eine Breadcrumb-Leiste, wenn Sie über viele Navigationsebenen verfügen und erwarten, dass Benutzer zu einer beliebigen vorherigen Ebene zurückkehren können.
  • Verwenden Sie keine Breadcrumb-Leiste, wenn Sie nur über 2 mögliche Navigationsebenen verfügen. Eine einfache Rückwärtsnavigation ist ausreichend.
  • Zeigt den aktuellen Speicherort als letztes Element in der Breadcrumb-Leiste an. In der Regel möchten Sie jedoch keine Navigation durchführen, wenn der Benutzer auf das aktuelle Element klickt. (Wenn Sie dem Benutzer erlauben möchten, die aktuelle Seite oder die aktuellen Daten neu zu laden, sollten Sie eine dedizierte Option zum Erneutladen bereitstellen.)

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

Die BreadcrumbBar für UWP-Apps erfordert die Windows-UI-Bibliothek 2. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). APIs für dieses Steuerelement sind im Microsoft.UI.Xaml.Controls-Namespace vorhanden.

Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:BreadcrumbBar />

Erstellen einer Brotkrümelleiste

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie breadcrumbBar in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

In diesem Beispiel wird gezeigt, wie Sie eine Breadcrumb-Leiste mit der Standardformatierung erstellen. Sie können die Breadcrumb-Leiste an einer beliebigen Stelle auf der Benutzeroberfläche Ihrer App platzieren. Sie füllen die Breadcrumbs auf, indem Sie die ItemsSource-Eigenschaft festlegen. Hier wird auf ein Array von Zeichenfolgen festgelegt, die in der Breadcrumb-Leiste angezeigt werden.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

ItemsSource

Die Breadcrumb-Leiste verfügt nicht über eine Items -Eigenschaft, sie verfügt nur über eine ItemsSource-Eigenschaft . Dies bedeutet, dass Sie die Breadcrumbs nicht in XAML auffüllen können oder sie einer Auflistung im Code direkt Items hinzufügen. Stattdessen erstellen Sie eine Sammlung und verbinden die ItemsSource Eigenschaft im Code oder mithilfe der Datenbindung mit ihr.

Sie können ItemsSource auf eine Sammlung beliebiger Datentypen festlegen, um die Anforderungen Ihrer App zu erfüllen. Die Datenelemente in der Auflistung werden sowohl zum Anzeigen des Breadcrumbs in der Leiste als auch zum Navigieren verwendet, wenn auf ein Element in der Breadcrumb-Leiste geklickt wird. In den Beispielen auf dieser Seite erstellen wir ein einfaches struct (namens Crumb), das eine Bezeichnung enthält, die in der Breadcrumbleiste angezeigt werden soll, und ein Datenobjekt, das informationen enthält, die für die Navigation verwendet werden.

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

Standardmäßig zeigt die Breadcrumbleiste die Zeichenfolgendarstellung jedes Elements in der Auflistung an. Wenn die Datenelemente in Ihrer Sammlung nicht über eine geeignete ToString Außerkraftsetzung verfügen, können Sie die ItemTemplate-Eigenschaft verwenden, um eine Datenvorlage anzugeben, die definiert, wie die Elemente in der Breadcrumbleiste angezeigt werden.

Wenn Ihre Breadcrumb-Auflistung beispielsweise eine Liste von StorageFolder-Objekten war, können Sie eine Datenvorlage bereitstellen und wie folgt an die DisplayName-Eigenschaft binden.

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

Behandeln Sie das ItemClicked-Ereignis , um zu dem Element zu navigieren, auf das der Benutzer in der Breadcrumb-Leiste geklickt hat. Der aktuelle Speicherort wird in der Regel als letztes Element in der Breadcrumb-Leiste angezeigt. Daher sollten Sie eine Überprüfung in Ihren Ereignishandler einschließen, wenn Sie den aktuellen Speicherort nicht erneut laden möchten.

In diesem Beispiel wird der Index überprüft, um festzustellen, ob das angeklickte Element das letzte Element in der Auflistung ist, bei dem es sich um den aktuellen Speicherort handelt. Wenn dies der Fall ist, erfolgt keine Navigation.

// 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);
    }
}

Einfache Formatierung

Sie können das Standardformat und das ControlTemplate-Steuerelement ändern, um dem Steuerelement ein einzigartiges Aussehen zu verleihen. Eine Liste der verfügbaren Designressourcen finden Sie im Abschnitt Steuerelementstil und Vorlage der BreadcrumbBar-API-Dokumentation. Weitere Informationen finden Sie im Abschnitt Einfache Formatierung im Artikel über die Formatierung von Steuerelementen.

Codebeispiele

In diesem Beispiel wird gezeigt, wie Sie eine Breadcrumb-Leiste in einem einfachen Datei-Explorer-Szenario verwenden können. Die Listenansicht zeigt den Inhalt der ausgewählten Bild- oder Musikbibliothek an und ermöglicht dem Benutzer einen Drilldown in Unterordner. Die Breadcrumb-Leiste wird in der Kopfzeile der Listenansicht platziert und zeigt den Pfad zum aktuellen Ordner an.

Abbildung einer Dateiliste mit einer Breadcrumb-Leiste, die den Pfad zum aktuellen Ordner anzeigt 

<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;
}