Pasek nawigacyjny okruszkowy

BreadcrumbBar udostępnia bezpośrednią ścieżkę stron lub folderów do aktualnej lokalizacji. Jest on często używany w sytuacjach, w których szlak nawigacji użytkownika (w systemie plików lub systemie menu) musi być trwale widoczny, a użytkownik może wrócić do poprzedniej lokalizacji.

pl-PL:

Czy jest to właściwa kontrola?

Pasek nawigacji umożliwia użytkownikowi śledzenie lokalizacji podczas nawigowania po aplikacji lub folderach i umożliwia szybki powrót do poprzedniego miejsca.

Użyj Paska Okruszków, gdy ścieżka do bieżącej pozycji jest istotna. Ten interfejs użytkownika jest często używany w menedżerach folderów i gdy użytkownik może przechodzić wiele poziomów głęboko do aplikacji.

Interfejs użytkownika paska okruszkowego

Pasek nawigacyjny wyświetla każdy węzeł w jednej linii poziomej, oddzielony symbolami ">" .

Jeśli aplikacja zostanie zmieniona tak, że brakuje miejsca na wyświetlenie wszystkich węzłów, to menu nawigacyjne zostanie zwinęte, a wielokropek zastąpi najbardziej lewostronne węzły. Kliknięcie wielokropka powoduje otwarcie wysuwanego okienka, aby wyświetlić zwinięte węzły.

Anatomia

Na poniższej ilustracji przedstawiono części kontrolki BreadcrumbBar. Można zmodyfikować wygląd niektórych części, używając lekkiego stylu.

Rekomendacje

• Użyj pasku nawigacyjnego, gdy masz wiele poziomów nawigacji i umożliwiasz użytkownikom powrót do dowolnego poprzedniego poziomu.
• Nie używaj okruszków nawigacyjnych, jeśli masz tylko 2 możliwe poziomy nawigacji. Wystarczająca jest prosta nawigacja wsteczna .
• Pokaż bieżącą lokalizację jako ostatni element na pasku nawigacji. Jednak zazwyczaj nie chcesz wykonywać żadnej nawigacji, jeśli użytkownik kliknie bieżący element. (Jeśli chcesz zezwolić użytkownikowi na ponowne załadowanie bieżącej strony lub danych, rozważ udostępnienie dedykowanej opcji "załaduj ponownie").

Utwórz pasek okruszków

• ważne interfejsy API: klasy BreadcrumbBar

Otwórz aplikację Galerii WinUI 3 i zobacz akcję BreadcrumbBar

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie pokazano, jak utworzyć pasek okruszków z domyślnym stylem. Pasek okruszków można umieścić w dowolnym miejscu w interfejsie użytkownika aplikacji. Uzupełniasz ślad nawigacyjny, ustawiając właściwość ItemsSource. W tym miejscu jest ustawiona tablica ciągów, które są wyświetlane na pasku ścieżki nawigacyjnej.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

Źródło elementów

Pasek stron nadrzędnych nie ma właściwości Items, ale ma tylko właściwość ItemsSource. Oznacza to, że nie można wypełnić śladów nawigacyjnych w języku XAML ani dodawać ich bezpośrednio do kolekcji Items w kodzie. Zamiast tego utworzysz kolekcję i połączysz z nią właściwość ItemsSource w kodzie lub przy użyciu powiązania danych.

Możesz ustawić ItemsSource na kolekcję dowolnego typu danych zgodnie z potrzebami aplikacji. Elementy danych w kolekcji są używane zarówno do wyświetlania ścieżki na pasku nawigacyjnym, jak i do nawigowania po kliknięciu elementu na pasku ścieżki. W przykładach na tej stronie utworzymy prostą struct (o nazwie Crumb), która zawiera etykietę do wyświetlenia na pasku nawigacyjnym i obiekt danych, który zawiera informacje używane do nawigacji.

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

SzablonElementu

Domyślnie pasek nawigacyjny wyświetla ciąg znaków reprezentujący każdy element w kolekcji. Jeśli elementy danych w Twojej kolekcji nie mają odpowiedniego przedefiniowania ToString, możesz użyć właściwości ItemTemplate, aby określić szablon danych, który definiuje sposób wyświetlania elementów na pasku nawigacyjnym.

Jeśli na przykład kolekcja ścieżek nawigacyjnych była listą obiektów StorageFolder, możesz podać szablon danych i powiązać właściwość DisplayName w następujący sposób.

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>

Element Kliknięty

Obsłuż zdarzenie ItemClicked, aby przejść do elementu, który użytkownik kliknął na pasku nawigacyjnym. Bieżąca lokalizacja jest zwykle wyświetlana jako ostatni element na pasku nawigacyjnym, dlatego należy dołączyć sprawdzenie w funkcji obsługi zdarzeń, jeśli nie można ponownie załadować bieżącej lokalizacji.

W tym przykładzie sprawdzany jest indeks , aby ustalić, czy kliknięty element , oznaczany jako, jest ostatnim elementem w kolekcji, co stanowi bieżącą lokalizację. Jeśli tak jest, nie nastąpi nawigacja.

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

Lekka stylizacja

Możesz zmodyfikować domyślny styl i kontrolkęTemplate, aby nadać kontrolce unikatowy wygląd. Aby uzyskać listę dostępnych zasobów motywu, zobacz sekcję Styl i Szablon Kontroli w dokumentacji interfejsu API BreadcrumbBar. Aby uzyskać więcej informacji, zobacz sekcję Lekkie stylizacje z artykułu Sterowanie stylizacją.

Przykłady kodu

W tym przykładzie pokazano, jak można użyć paska nawigacyjnego w prostej przeglądarce plików. Widok listy zawiera zawartość wybranej biblioteki Obrazy lub Muzyka i umożliwia użytkownikowi przechodzenie do podfolderów. Pasek nawigacji jest umieszczony w nagłówku widoku listy i pokazuje ścieżkę prowadzącą do aktualnego folderu.

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

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Pasek okruszków w aplikacjach UWP wymaga WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją w przestrzeni nazw Microsoft.UI.Xaml.Controls .

• Interfejsy API WinUI 2:klasa BreadcrumbBar
• Otwórz aplikację Galerii WinUI 2 i zobacz jak działa BreadcrumbBar. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:BreadcrumbBar />

Powiązane artykuły

• Podstawy projektowania nawigacji
• Widok nawigacji
• Klasa BreadcrumbBar