BreadcrumbBar는 현재 위치에 대한 페이지 또는 폴더의 직접 경로를 제공합니다. 파일 시스템 또는 메뉴 시스템에서 사용자의 탐색 내역을 영구적으로 표시해야 하고, 사용자가 이전 위치로 돌아가야 하는 상황에 자주 사용됩니다.
이동 경로 탐색 막대를 사용하면 사용자가 앱 또는 폴더를 탐색할 때 해당 위치를 추적할 수 있으며 경로의 이전 위치로 빠르게 다시 이동할 수 있습니다.
현재 위치로 이동한 경로가 관련된 경우 BreadcrumbBar를 사용합니다. 이 UI는 일반적으로 폴더 관리자에서 사용되며 사용자가 앱의 여러 수준을 탐색할 수 있는 경우에 사용됩니다.
빵 부스러기 탐색 표시줄은 각 노드를 꺾쇠로 구분하여 가로 방향으로 표시합니다.
앱의 크기가 조정되어 모든 노드를 표시할 충분한 공간이 없는 경우, 브레드크럼이 축소되고 줄임표가 왼쪽의 노드들을 대체합니다. 줄임표를 클릭하면 축소된 노드를 표시하는 플라이아웃이 열립니다.
아래 이미지는 BreadcrumbBar 컨트롤의 부분을 보여줍니다.
경량 스타일 지정을 사용하여 일부 부분의 모양을 수정할 수 있습니다.
WinUI 3 갤러리 앱을 열고 작동 중인 BreadcrumbBar를 확인합니다.
WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.
이 예제에서는 기본 스타일링을 사용하여 이동 경로 탐색 막대를 만드는 방법을 보여줍니다. 탐색 경로 막대를 앱 UI 어디에나 배치할 수 있습니다. ItemsSource 속성을 설정하여 빵부스러기를 채웁니다. 여기에서는 빵 부스러기 막대에 표시되는 문자열 배열로 설정됩니다.
<BreadcrumbBar x:Name="BreadcrumbBar1"/>
BreadcrumbBar1.ItemsSource =
new string[] { "Home", "Documents", "Design", "Northwind", "Images", "Folder1", "Folder2", "Folder3" };
이동 경로 탐색 막대에는 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);
}
}
기본 스타일 및 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;
}
중요
이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.
이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보를 다룹니다.
UWP 앱을 위한 BreadcrumbBar에는 WinUI 2가 필요합니다. 설치 지침을 비롯한 자세한 내용은 WinUI 2를 참조하세요. 이 컨트롤용 API는 Microsoft.UI.Xaml.Controls 네임스페이스에 있습니다.
이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:BreadcrumbBar />
Windows developer 피드백
Windows developer은(는) 오픈 소스 프로젝트입니다. 다음 링크를 선택하여 피드백을 제공해 주세요.
학습
학습 경로
Use the UI and controls in a canvas app in Power Apps - Training
The app user experience often defines the success of your app. This learning path will focus on how to provide the best app navigation, and build the best UI using themes, icons, images, personalization, different form factors, and controls.
