이동 경로 탐색 막대

BreadcrumbBar는 현재 위치에 대한 페이지 또는 폴더의 직접 경로를 제공합니다. 파일 시스템 또는 메뉴 시스템에서 사용자의 탐색 내역을 영구적으로 표시해야 하고, 사용자가 이전 위치로 돌아가야 하는 상황에 자주 사용됩니다.

올바른 컨트롤인가요?

이동 경로 탐색 막대를 사용하면 사용자가 앱 또는 폴더를 탐색할 때 해당 위치를 추적할 수 있으며 경로의 이전 위치로 빠르게 다시 이동할 수 있습니다.

현재 위치로 이동한 경로가 관련된 경우 BreadcrumbBar를 사용합니다. 이 UI는 일반적으로 폴더 관리자에서 사용되며 사용자가 앱의 여러 수준을 탐색할 수 있는 경우에 사용됩니다.

이동 경로 탐색 막대 UI

이동 경로 탐색 막대는 각 노드를 펼침 단추로 구분된 가로선으로 표시합니다.

모든 노드를 표시할 충분한 공간이 없게 앱의 크기가 조정된 경우 이동 경로가 축소되고 줄임표가 맨 왼쪽 노드를 대체합니다. 줄임표를 클릭하면 축소된 노드를 표시하는 플라이아웃이 열립니다.

구조

아래 이미지는 BreadcrumbBar 컨트롤의 부분을 보여줍니다. 경량 스타일 지정을 사용하여 일부 부분의 모양을 수정할 수 있습니다.

권장 사항

• 이동 경로 탐색 막대는 탐색 수준이 많고 사용자가 이전 수준으로 돌아갈 수 있을 것으로 예상되는 경우에 사용합니다.
• 가능한 탐색 수준이 2개뿐인 경우에는 이동 경로 탐색 막대를 사용하지 마세요. 간단한 뒤로 탐색으로 충분합니다.
• 현재 위치를 이동 경로 탐색 막대의 마지막 항목으로 표시합니다. 그러나 일반적으로 사용자가 현재 항목을 클릭하는 경우 탐색을 수행하지 않는 것이 좋습니다. (사용자가 현재 페이지 또는 데이터를 다시 로드하도록 하려면 전용 '다시 로드' 옵션을 제공하는 것이 좋습니다.)

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 통상적으로 WinUI 2를 사용하는 UWP 앱에도 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 BreadcrumBar에는 Windows UI 라이브러리 2가 필요합니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이 컨트롤용 API는 Microsoft.UI.Xaml.Controls 네임스페이스에 있습니다.

• WinUI 2 API:BreadcrumbBar 클래스
• WinUI 2 갤러리 앱을 열고 작동 중인 BreadcrumbBar를 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.

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

<muxc:BreadcrumbBar />

이동 경로 탐색 막대 만들기

• 중요 API: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" };

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 속성을 사용하여 항목이 이동 경로 탐색 막대에 표시되는 방식을 정의하는 데이터 템플릿을 지정할 수 있습니다.

예를 들어 이동 경로 탐색 막대가 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);
    }
}

경량 스타일링

기본 스타일 및 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 클래스