Brödsmula

En BreadcrumbBar- tillhandahåller den direkta sökvägen för sidor eller mappar till den aktuella platsen. Det används ofta för situationer där användarens navigeringsspår (i ett filsystem eller menysystem) måste vara beständigt synligt och användaren kan behöva gå tillbaka till en tidigare plats.

Är det här rätt kontroll?

Med ett sökvägsfält kan en användare hålla reda på sin plats när de navigerar genom en app eller mappar och gör att de snabbt kan gå tillbaka till en tidigare plats i sökvägen.

Använd en BreadcrumbBar när sökvägen till den aktuella positionen är relevant. Det här användargränssnittet används ofta i mapphanterare och när en användare kan navigera många nivåer djupt in i en app.

Brödsmulefältets gränssnitt

Brödsmulefältet visar varje nod i en vågrät linje, avgränsad med vinkeltecken.

Om appen ändras så att det inte finns tillräckligt med utrymme för att visa alla noder komprimeras sökvägarna och en ellips ersätter noderna längst till vänster. Genom att klicka på ellipsen öppnas en flik som visar de kollapsade noderna.

Anatomi

Bilden nedan visar delarna av BreadcrumbBar-enheten. Du kan ändra utseendet på vissa element med hjälp av enkel stil.

Rekommendationer

• Använd ett sökvägsfält när du har många navigeringsnivåer och förväntar dig att användarna ska kunna återgå till någon tidigare nivå.
• Använd inte en sökvägsindikator om du bara har 2 möjliga navigeringsnivåer. Det räcker med enkel tillbakaknapp .
• Visa den aktuella platsen som det sista objektet i sökvägen. Du vill dock vanligtvis inte utföra någon navigering om användaren klickar på det aktuella objektet. (Om du vill låta användaren läsa in den aktuella sidan eller data igen kan du överväga att ange ett dedikerat alternativ för att ladda om.)

Skapa ett sökvägsfält

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Det här exemplet visar hur du skapar ett sökvägsfält med standardformgivning. Du kan placera sökvägsfältet var som helst i appens användargränssnitt. Du fyller brödsmulorna genom att ange egenskapen ItemsSource. Här är den inställd på en matris med strängar som visas i sökvägsfältet.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

ItemsSource (datakälla för objekt)

Sökvägsfältet har ingen egenskap för Items, den har bara en egenskap ItemsSource. Det innebär att du inte kan fylla i brödsmulorna i XAML eller genom att lägga till dem direkt i en Items-samling i kod. I stället skapar du en samling och ansluter ItemsSource-egenskapen till den i kod eller med hjälp av databindning.

Du kan ange ItemsSource till en samling av alla typer av data som passar appens behov. Dataobjekten i samlingen används både för att visa brödsmulan i fältet och för att navigera när ett objekt i sökvägsfältet klickas. I exemplen på den här sidan skapar vi en enkel struct (med namnet Crumb) som innehåller en etikett som ska visas i sökvägsfältet och ett dataobjekt som innehåller information som används för navigering.

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

Artikelmall

Som standard visar sökvägsfältet strängrepresentationen av varje objekt i samlingen. Om dataobjekten i samlingen inte har någon lämplig ToString åsidosättning kan du använda egenskapen ItemTemplate för att ange en datamall som definierar hur objekten visas i sökvägsfältet.

Om din sökvägssamling till exempel var en lista över StorageFolder objekt, kan du ange en datamall och binda till egenskapen DisplayName så här.

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>

ObjektKlickad

Hantera händelsen ItemClicked för att navigera till objektet som användaren har klickat på i sökvägsfältet. Den aktuella platsen visas vanligtvis som det sista objektet i sökvägen, så du bör inkludera en kontroll i händelsehanteraren om du inte vill läsa in den aktuella platsen igen.

Det här exemplet kontrollerar indexet för att se om det klickade objektet är det sista objektet i samlingen, som är den aktuella platsen. I så fall sker ingen navigering.

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

Lättviktsdesign

Du kan ändra standardformatet och ControlTemplate för att ge kontrollen ett unikt utseende. Se avsnittet Kontrollformat och mall i Api-dokumenten för BreadcrumbBar för en lista över tillgängliga temaresurser. Mer information finns i avsnittet Lättviktsstyling i artikeln Styrning av styling.

Kodexempel

Det här exemplet visar hur du kan använda ett sökvägsfält i ett enkelt utforskarscenario. Listvyn visar innehållet i det valda biblioteket Bilder eller Musik och låter användaren öka detaljnivån i undermappar. Brödsmulefältet är placerat i sidhuvudet i listvyn och visar sökvägen till den aktuella mappen.

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

UWP och WinUI 2

BreadcrumbBar för UWP-appar kräver WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för den här kontrollen finns i namnområdet Microsoft.UI.Xaml.Controls .

Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .

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

<muxc:BreadcrumbBar />

Relaterade artiklar

• Grundläggande design för navigering
• Navigeringsvy
• BreadcrumbBar-klass