Navigační panel

BreadcrumbBar poskytuje přímou cestu od stránek nebo složek k aktuálnímu umístění. Často se používá v situacích, kdy musí být navigační stopa uživatele (v systému souborů nebo systému nabídek) trvale viditelná a uživatel se může potřebovat vrátit na předchozí místo.

Je to správná kontrola?

Panel s popisem cesty umožňuje uživateli sledovat polohu při procházení aplikace nebo složek a umožňuje jim rychle přejít zpět na předchozí místo v cestě.

Použijte BreadcrumbBar, když je důležitá cesta, po které jste se dostali na aktuální pozici. Toto uživatelské rozhraní se běžně používá ve správcích složek a když uživatel může procházet mnoho úrovní hluboko do aplikace.

Uživatelské rozhraní drobečkové navigace

Navigační panel zobrazuje každý uzel v horizontální linii, oddělený šipkami.

Pokud se velikost aplikace změní tak, že není dostatek místa pro zobrazení všech uzlů, navigační panel se sbalí a levé uzly nahradí elipsa. Kliknutím na tři tečky se otevře panel, který zobrazí sbalené uzly.

Anatomie

Následující obrázek znázorňuje části ovládacího prvku BreadcrumbBar. Vzhled některých částí můžete upravit pomocí lehkých stylů.

Recommendations

• Pokud máte mnoho úrovní navigace a očekáváte, že se uživatelé budou moct vrátit na libovolnou předchozí úroveň, použijte panel s popisem cesty.
• Nepoužívejte panel s popisem cesty, pokud máte jenom 2 možné úrovně navigace. Stačí jednoduchá zpětná navigace.
• Zobrazit aktuální umístění jako poslední položku v navigační liště. Obvykle ale nechcete provádět žádnou navigaci, pokud uživatel klikne na aktuální položku. (Pokud chcete uživateli umožnit opětovné načtení aktuální stránky nebo dat, zvažte poskytnutí vyhrazené možnosti opětovného načtení.)

Vytvořte navigační panel

• Důležitá rozhraní API:třída BreadcrumbBar

Otevřete aplikaci WinUI 3 Gallery a podívejte se na BreadcrumbBar v práci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tento příklad ukazuje, jak vytvořit breadcrumb pruh s výchozím stylem. Panel s popisem cesty můžete umístit kdekoli v uživatelském rozhraní aplikace. Navigační cestu naplníte nastavením vlastnosti ItemsSource. Tady je nastavená na pole textových řetězců, které se zobrazují na panelu drobkového navigátoru.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

Zdroj položek

Panel s popisem cesty nemá vlastnost Items, má pouze vlastnost ItemsSource. To znamená, že nemůžete přidat drobečky v XAML nebo je přidat přímo do kolekce Items v kódu. Místo toho vytvoříte kolekci a připojíte k ní vlastnost ItemsSource v kódu nebo pomocí datové vazby.

ItemsSource můžete nastavit na kolekci libovolného typu dat, aby vyhovovala potřebám vaší aplikace. Datové položky v kolekci slouží k zobrazení popisku cesty na panelu a k navigaci při kliknutí na položku v panelu s popisem cesty. V příkladech na této stránce vytvoříme jednoduchý objekt struct (pojmenovaný Crumb), který obsahuje popisek pro zobrazení na panelu cesty a datový objekt, který uchovává informace potřebné pro navigaci.

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

Šablona položky

Ve výchozím nastavení se na navigačním panelu zobrazuje řetězcová reprezentace každé položky v kolekci. Pokud datové položky ve vaší kolekci nemají vhodné přepsání ToString, můžete pomocí vlastnosti ItemTemplate určit datovou šablonu, která definuje, jak se položky zobrazují v navigačním panelu.

Pokud například vaše kolekce rozcestníků byla seznamem objektů StorageFolder, mohli byste zadat šablonu dat a navázat na vlastnost DisplayName, takto.

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>

PoložkaKliknuta

Zpracujte událost ItemClicked a navigujte na položku, na kterou uživatel kliknul v navigačním panelu. Aktuální umístění se obvykle zobrazuje jako poslední položka na navigačním panelu, takže pokud nechcete znovu načíst aktuální umístění, měli byste do obslužné rutiny události zahrnout kontrolu.

Tento příklad zkontroluje indexu a zjistí, jestli je kliknutá položka poslední položkou v kolekci, což je současné místo. Pokud ano, nedojde k žádné navigaci.

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

Lehký styl

Výchozí styl a ovládací prvek ControlTemplate můžete upravit tak, aby ovládací prvek získal jedinečný vzhled. Seznam dostupných prostředků motivu najdete v části Styl a šablona ovládacího prvku v dokumentaci k rozhraní API BreadcrumbBar. Další informace naleznete v části Lehký styl článku Stylingové ovládací prvky.

Příklady kódu

Tento příklad ukazuje, jak můžete použít panel s popisem cesty v jednoduchém file explorer scénáři. Zobrazení seznamu zobrazuje obsah vybrané knihovny Obrázky nebo Hudba a umožňuje uživateli přejít k podrobnostem podsložek. Panel s popisem cesty se umístí do záhlaví zobrazení seznamu a zobrazí cestu k aktuální složce.

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

Související články

• Základy návrhu navigace
• NavigationView
• BreadcrumbBar třídy