Навигационная цепочка

Панель хлебных крошек предоставляет прямой путь от страниц или папок к текущему местоположению. Он часто используется для случаев, когда путь навигации пользователя (в файловой системе или системе меню) должен быть постоянно видимым; и пользователю может потребоваться вернуться в предыдущее расположение.

Это правильный контроль?

Панель навигации позволяет пользователю отслеживать свое расположение при переходе по приложению или папкам и быстро переходить к предыдущему расположению в пути.

Используйте панель хлебных крошек, если путь, ведущий к текущей позиции, имеет значение. Этот пользовательский интерфейс обычно используется в диспетчерах папок и когда пользователь может перемещаться по нескольким уровням в приложении.

Интерфейс панели "хлебные крошки"

Панель навигации отображает каждый узел в горизонтальной строке, разделенной шевронами.

Если приложение изменено в размере так, что недостаточно места для отображения всех узлов, хлебные крошки сворачиваются, и многоточие заменяет крайние левые узлы. Щелкнув многоточие, откроется всплывающее окно для отображения свернутых узлов.

Анатомия

На рисунке ниже показаны части BreadcrumbBar контроллера. Вы можете изменить внешний вид некоторых частей с помощью упрощенного стиля.

Recommendations

• Используйте панель навигации при наличии большого количества уровней навигации и ожидает, что пользователи смогут вернуться на любой предыдущий уровень.
• Не используйте панель навигации, если у вас есть только 2 возможных уровня навигации. Простая навигация назад будет достаточной.
• Показать текущее расположение в качестве последнего элемента в строке навигации. Однако обычно вы не хотите выполнять навигацию, если пользователь щелкает текущий элемент. (Если вы хотите разрешить пользователю перезагрузить текущую страницу или данные, рассмотрите возможность предоставления выделенного параметра "перезагрузить".

Создание панели навигации

• Важные API:Класс BreadcrumbBar

Откройте приложение коллекции WinUI 3 и просмотрите панель навигации в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

В этом примере показано, как создать панель навигации с использованием стиля по умолчанию. Панель хлебных крошек можно разместить в любом месте пользовательского интерфейса приложения. Вы заполняете вкладки, задав свойство ItemsSource . Здесь задан массив строк, отображаемых на панели навигации.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

ИсточникЭлементов (ItemsSource)

Панель навигации не имеет свойства Items; она имеет только свойство ItemsSource. Это означает, что вы не можете заполнять навигационные ссылки в XAML или добавлять их прямо в коллекцию Items в коде. Вместо этого необходимо создать коллекцию и подключить к ней свойство ItemsSource в коде или с помощью привязки данных.

Элемент ItemsSource можно задать для коллекции любых типов данных в соответствии с потребностями приложения. Элементы данных в коллекции используются как для отображения хлебных крошек в панели, так и для перехода при щелчке на элемент в этой панели. В примерах на этой странице мы создаём простой struct (названный Crumb), который содержит метку для отображения на панели навигации и объект данных, хранящий информацию, используемую для навигации.

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

Шаблон элемента

По умолчанию панель навигации отображает строковое представление каждого элемента в коллекции. Если элементы данных в коллекции не имеют соответствующего ToString переопределения, можно использовать свойство 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, чтобы придать элементу управления уникальный внешний вид. Список доступных ресурсов темы см. в разделе "Стиль элемента управления" и "Шаблон" в документации по API BreadcrumbBar. Для получения дополнительной информации см. раздел Легкий стиль в статье Контроль стилей.

Примеры кода

В этом примере показано, как можно использовать панель навигации в простом сценарии file explorer. В представлении списка отображается содержимое выбранной библиотеки рисунков или музыки и позволяет пользователю детализировать вложенные папки. Панель навигации располагается в шапке представления списка и отображает путь к текущей папке.

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

Связанные статьи

• Основы проектирования навигации
• Обозреватель навигации
• Класс BreadcrumbBar