BreadcrumbBar - Windows apps

BreadcrumbBar 提供页面或文件夹当前位置的直接路径。它通常用于用户需要持久可见的导航路径（在文件系统或菜单系统中）的情况，并且用户可能需要返回到以前的位置。

痕迹导航栏包含以下节点：Home、Documents、Design、Northwind、Images、Folder1、Folder2、Folder3。会调整应用的大小，使痕迹导航栏折叠并用省略号替换最左侧的节点。然后，单击省略号会打开一个带有折叠节点的浮出控件

这是正确的控制吗？

痕迹导航栏让用户可以在浏览应用或文件夹时跟踪他们的位置，并可快速跳回到路径中的前一位置。

如果用于跳转到当前位置的路径是相关的，请使用 BreadcrumbBar。在文件夹管理器中，以及在用户可以在应用中深入导航多个级别时，经常使用此 UI。

面包屑导航栏在水平行中显示每个节点，各个节点用大于号分隔。

痕迹导航栏包含以下节点：Home、Documents、Design、Northwind、Images、Folder1、Folder2、Folder3。

如果调整应用大小后没有足够的空间可用于显示所有节点，则痕迹导航将会折叠并用省略号来代替最左侧的节点。单击省略号会打开一个浮出窗口以显示折叠的节点。

调整痕迹导航栏的大小，用省略号替换最左侧的节点。省略号会打开一个显示折叠节点的浮出控件

解剖学

下图显示了控件的各个部件。可以使用轻型样式修改某些部件的外观。

图像显示痕迹导航栏，其中标记了以下部分：省略号、V 形符号、痕迹导航栏项、当前项、省略号浮出控件、省略号下拉列表项

Recommendations

如果你有多个导航级别并希望用户能够返回到任何前一级别，请使用痕迹导航栏。
如果你只有 2 个可能的导航级别，请不要使用痕迹导航栏。简单的后退导航已足够。
将当前位置显示为痕迹导航栏中的最后一个项。但是，如果用户单击当前项，你通常不希望执行任何导航。（要让用户重新加载当前页面或数据，请考虑提供专用的“重新加载”选项。）

重要 API：BreadcrumbBar 类

打开 WinUI 3 库应用，查看 BreadcrumbBar 的运行情况

WinUI 3 画廊图标 WinUI 3 示例库应用包括 WinUI 控件和功能的交互示例。从 Microsoft Store 或浏览 GitHub 上的源代码获取应用。

此示例演示如何使用默认样式创建痕迹导航栏。您可以将面包屑导航栏放置在您的应用 UI 中的任何位置。通过设置 ItemsSource 属性来填充痕迹导航。在此处，该属性设置为痕迹导航栏中显示的字符串数组。

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

项目源

痕迹栏没有属性，它只具有 ItemsSource 属性。这意味着，无法在 XAML 中填充痕迹导航，也无法通过在代码中将痕迹导航直接添加到集合来填充痕迹导航。为此，应该创建一个集合，并在代码中或使用数据绑定将属性连接到该集合。

可以将 ItemsSource 设置为任何类型的数据的集合，以满足应用的需求。集合中的数据项既用于在面包屑栏中显示，也用于在单击面包屑栏中的项时进行导航。在本页面上的示例中，我们将创建一个简单的（名为），其中包含一个显示在痕迹导航栏中的标签，以及一个数据对象，该对象保存了用于导航的信息。

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 属性指定一个数据模板，该模板定义项在痕迹栏中的显示方式。

例如，如果痕迹导航集合是 StorageFolder 对象的列表，则可以提供数据模板并绑定到 DisplayName 属性，如下所示。

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 事件以导航到用户已在痕迹栏中单击的项目。当前位置通常显示为痕迹导航栏中的最后一个项，因此，如果你不想要重新加载当前位置，应在事件处理程序中包含一项检查。

此示例检查索引以查看单击的项是否是集合中的最后一项，即当前位置。如果是，则不发生导航。

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

轻便造型

可以修改默认 Style 和 ControlTemplate 以使控件具有唯一的外观。请参阅 BreadcrumbBar API 文档的“控件样式和模板”部分，以查看可用主题资源的列表。有关详细信息，请参阅样式控件文章的“轻量级样式”部分。

代码示例

此示例演示如何在简单的文件资源管理器方案中使用面包屑导航条。列表视图显示所选图片或音乐库的内容，并让用户深入到子文件夹。面包屑导航栏放置在列表视图的头部，显示当前文件夹的路径。

包含痕迹栏的文件列表的图像，其中显示了当前文件夹的路径

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

导航设计基础知识
NavigationView
BreadcrumbBar 类

反馈

此页面是否有帮助？

Last updated on 2026-03-05

通过

面包屑导航栏

这是正确的控制吗？

面包屑导航栏 UI

解剖学

Recommendations

创建痕迹导航栏

项目源

项目模板

项目点击

轻便造型

代码示例

相关文章

反馈

其他资源