Строка навигатора
Элемент BreadcrumbBar предоставляет прямой путь страниц или папок к текущему расположению. Он часто используется в ситуациях, когда след навигации пользователя (в файловой системе или системе меню) должен быть постоянно видимым, а пользователю может потребоваться вернуться в предыдущее расположение.
Выбор правильного элемента управления
Панель навигации позволяет пользователю отслеживать свое расположение при навигации по приложению или папкам и позволяет быстро вернуться к предыдущему расположению в пути.
Используйте элемент BreadcrumbBar, если путь к текущей позиции является актуальным. Этот пользовательский интерфейс обычно используется в диспетчерах папок и когда пользователь может перемещаться на нескольких уровнях вглубь приложения.
Пользовательский интерфейс панели навигации
На панели навигации каждый узел отображается горизонтальной линией, разделенной шевронами.
Если размер приложения изменяется так, что не хватает места для отображения всех узлов, элементы навигации сворачиваются, а крайние левые узлы заменяются многоточием. Если щелкнуть многоточие, откроется всплывающий элемент, в который будут показаны свернутые узлы.
Структура
На рисунке ниже показаны части BreadcrumbBar элемента управления . Внешний вид некоторых частей можно изменить с помощью упрощенного стиля.
Рекомендации
- Используйте панель навигации, если у вас много уровней навигации и ожидается, что пользователи смогут вернуться на любой предыдущий уровень.
- Не используйте панель навигации, если у вас есть только 2 возможных уровня навигации. Достаточно простой обратной навигации .
- Отображение текущего расположения в качестве последнего элемента на панели навигации. Однако обычно не требуется выполнять навигацию, если пользователь щелкает текущий элемент. (Если вы хотите разрешить пользователю перезагрузить текущую страницу или данные, рассмотрите возможность выделенной перезагрузки.)
UWP и WinUI 2
Важно!
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
Для breadcrumbBar для приложений UWP требуется библиотека пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API для этого элемента управления существуют в пространстве имен Microsoft.UI.Xaml.Controls .
- Apis WinUI 2:класс BreadcrumbBar
- Откройте приложение "Коллекция WinUI 2" и просмотрите элемент BreadcrumbBar в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Чтобы использовать код из этой статьи с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API-интерфейсов библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2 .
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:BreadcrumbBar />
Создание панели навигации
- Важные API:класс BreadcrumbBar
Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из 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;
}
ItemTemplate
По умолчанию на панели навигации отображается строковое представление каждого элемента в коллекции. Если элементы данных в коллекции не имеют соответствующего ToString переопределения, можно использовать свойство ItemTemplate , чтобы указать шаблон данных, который определяет, как элементы отображаются на панели навигации.
Например, если коллекция breadcrumb была списком объектов 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
Обработайте событие 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. Дополнительные сведения см. в разделе Облегченное определение стиля статьи Стили XAML.
Примеры кода
В этом примере показано, как можно использовать панель навигации в простом сценарии проводника. В представлении списка отображается содержимое выбранной библиотеки "Изображения" или "Музыка" и позволяет пользователю детализировать вложенные папки. Панель навигации помещается в верхний колонтитул представления списка и показывает путь к текущей папке.
<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;
}
Похожие статьи
Windows developer
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по