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.

Zalecenia

• 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 z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze sklepu Microsoft Store 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);
    }
}

Lekkie stylizacje

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 stylizowanie artykułu Kontrolki stylizacji.

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żny

Informacje i przykłady przedstawione w tym artykule są zoptymalizowane pod kątem aplikacji korzystających z zestawu Windows App SDK i WinUI 3, ale są one ogólnie stosowane do aplikacji platformy UWP korzystających z interfejsu 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 znajdują się 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 Store lub pobierz kod źródłowy w witrynie GitHub.

Aby użyć kodu w tym artykule z biblioteką WinUI 2, użyj aliasu w języku XAML (używamy muxc) do odwoływania się do interfejsów API biblioteki interfejsu użytkownika systemu Windows uwzględnionych w projekcie. Aby uzyskać więcej informacji, zobacz Rozpoczynanie pracy z interfejsem WinUI 2.

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

<muxc:BreadcrumbBar />

Powiązane artykuły

• Podstawy projektowania nawigacji
• Widok nawigacji
• Klasa BreadcrumbBar