Zsemlemorzsa bár

A BreadcrumbBar a lapok vagy mappák közvetlen elérési útját biztosítja az aktuális helyre. Gyakran használják olyan helyzetekben, amikor a felhasználó navigációs nyomvonalának (fájlrendszerben vagy menürendszerben) állandó láthatónak kell lennie, és előfordulhat, hogy a felhasználónak egy korábbi helyre kell go back.

Ez a megfelelő vezérlő?

A morzsa sáv lehetővé teszi a felhasználók számára, hogy nyomon kövessék a helyzetüket, amikor egy alkalmazásban vagy mappákban böngésznek, és gyorsan visszaugorjanak az elérési út egy korábbi helyére.

Használjon BreadcrumbBar sávot, ha az aktuális pozícióhoz vezető útvonal releváns. Ezt a felhasználói felületet gyakran használják a mappakezelők, és amikor egy felhasználó több szinten is navigálhat egy alkalmazás mélyére.

A Breadcrumb bar felhasználói felülete

A zsennyesáv az egyes csomópontokat vízszintes vonalban jeleníti meg, chevronokkal elválasztva.

Ha az alkalmazást úgy méretezik át, hogy nincs elegendő hely az összes csomópont megjelenítéséhez, a zsemlék összecsuknak, és egy három pont helyettesíti a bal szélső csomópontokat. Az ellipszisre kattintva egy felugró panel nyílik meg, amely az összecsukott csomópontokat mutatja.

Anatómia

Az alábbi képen a BreadcrumbBar vezérlő részei láthatók. Egyes alkatrészek megjelenését egyszerűsített stílushasználatával módosíthatja.

Recommendations

• Használjon morzsamenüt, ha számos navigációs szinttel rendelkezik, és elvárja, hogy a felhasználók visszatérhessenek bármelyik korábbi szintre.
• Ne használjon morzsamenüt, ha csak 2 lehetséges navigációs szint van. Az egyszerű visszanavigáció elegendő.
• Az aktuális hely megjelenítése utolsó elemként a morzsamenüben. Azonban általában nem szeretne navigálást végrehajtani, ha a felhasználó az aktuális elemre kattint. (Ha engedélyezni szeretné, hogy a felhasználó újra betöltse az aktuális lapot vagy adatokat, fontolja meg egy dedikált "reload" lehetőséget.)

Zsemlérsáv létrehozása

• Fontos API-k:BreadcrumbBar osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a BreadcrumbBar működés közbeni

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Ez a példa bemutatja, hogyan hozhat létre egy zsengelysávot az alapértelmezett stílussal. A zsennyesávot bárhol elhelyezheti az alkalmazás felhasználói felületén. A ItemsSource tulajdonság beállításával feltöltheti a zsemlékeket. Itt karakterláncok tömbjére van állítva, amely az útvonaljelző sávon látható.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

Elemforrás

A kenyérmorzsa sáv nem rendelkezik Items tulajdonsággal, csak ItemsSource tulajdonsága van. Ez azt jelenti, hogy az XAML-ben nem tölthetők fel a zsemlék, és nem adhat hozzá közvetlenül egy Items gyűjteményhez kódban. Ehelyett létrehoz egy gyűjteményt, és kódban vagy adatkötéssel csatlakoztatja hozzá a ItemsSource tulajdonságot.

Az ItemsSource bármilyen típusú adatgyűjteményre állíthatja az alkalmazás igényeinek megfelelően. A gyűjteményben lévő adatelemek a sávban lévő zsenyér megjelenítésére, illetve a zsenyérsáv egy elemének kattintására való navigálásra szolgálnak. Az oldalon található példákban létrehozunk egy egyszerű struct (Crumbnéven), amely tartalmaz egy címkét, amely megjelenik a szélességi sávban, valamint egy olyan adatobjektumot, amely a navigációhoz használt információkat tartalmazza.

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

Tételsablon

Alapértelmezés szerint a breadcrumb sáv megjeleníti a gyűjtemény egyes elemeinek sztringképét. Ha a gyűjtemény adatelemei nem rendelkeznek megfelelő ToString felülbírálással, a ItemTemplate tulajdonsággal meghatározhat egy adatsablont, amely definiálja, hogyan jelenjenek meg az elemek a kenyérmorzsa sávban.

Ha például a breadcrumb-gyűjtemény StorageFolder objektumok listája volt, megadhat egy adatsablont, és a DisplayName tulajdonsághoz az alábbi módon kapcsolódhat.

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>

ElemKattintva

A ItemClicked eseményt kezelve navigáljon arra az elemre, amelyre a felhasználó a nyomkövető sávban kattintott. Az aktuális hely általában az utolsó elemként jelenik meg a zsennyesávban, ezért ha nem szeretné újra betölteni az aktuális helyet, akkor be kell jelentkeznie az eseménykezelőbe.

Ez a példa ellenőrzi az Index-et, hogy a kattintott Elem az utolsó elem-e a gyűjteményben, amely az aktuális pozíció. Ha igen, nem történik navigáció.

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

Könnyű stílus

Az alapértelmezett Stílus és ControlTemplate módosításával egyedi megjelenést adhat a vezérlőnek. Az elérhető témaerőforrások listájáért tekintse meg a BreadcrumbBar API-dokumentumok Vezérlőstílus és sablon szakaszát. További információkért tekintse meg a Stílusvezérlők cikk Könnyű súlyú stílus című szakaszát.

Példakódok

Ez a példa bemutatja, hogyan használhat egy kenyérmorzsa sávot egy egyszerű fájlkezelő forgatókönyvben. A listanézet a kijelölt Képek vagy Zene tár tartalmát jeleníti meg, és lehetővé teszi a felhasználó számára, hogy almappákba részletezzen. A menüsáv a listanézet fejlécébe kerül, és megjeleníti az aktuális mappa elérési útját.

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

Kapcsolódó cikkek

• A navigációs tervezés alapjai
• Navigációs nézet
• BreadcrumbBar osztály