Bilah Remah Roti

BreadcrumbBar menyediakan jalur langsung halaman atau folder ke lokasi saat ini. Ini sering digunakan untuk situasi di mana jejak navigasi pengguna (dalam sistem file atau sistem menu) perlu terus terlihat dan pengguna mungkin perlu go back ke lokasi sebelumnya.

Apakah ini kontrol yang tepat?

Bilah navigasi memungkinkan pengguna melacak lokasi mereka saat menavigasi melalui aplikasi atau folder, dan memungkinkan mereka dengan cepat kembali ke lokasi sebelumnya dalam jalur.

Gunakan BreadcrumbBar ketika jalur yang diambil ke posisi saat ini relevan. UI ini umumnya digunakan dalam manajer folder dan ketika pengguna dapat menavigasi banyak tingkat jauh ke dalam aplikasi.

UI bilah remah roti

Bilah navigasi menampilkan setiap simpul dalam garis horizontal, dipisahkan oleh chevron.

Jika aplikasi diubah ukurannya sehingga tidak ada cukup ruang untuk menampilkan semua simpul, remah roti runtuh dan elipsis menggantikan simpul paling kiri. Mengklik tanda elipsis akan membuka jendela munculan untuk menampilkan simpul yang terlipat.

Anatomi

Gambar di bawah ini menunjukkan bagian-bagian BreadcrumbBar kontrol. Anda dapat memodifikasi tampilan beberapa bagian dengan menggunakan gaya ringan.

Recommendations

• Gunakan bilah remah roti ketika Anda memiliki banyak tingkat navigasi dan mengharapkan pengguna untuk dapat kembali ke tingkat sebelumnya.
• Jangan gunakan bilah remah roti jika Anda hanya memiliki 2 tingkat navigasi yang mungkin. Navigasi belakang sederhana sudah cukup.
• Tampilkan lokasi saat ini sebagai item terakhir di bilah remah roti. Namun, Anda biasanya tidak ingin melakukan navigasi apa pun jika pengguna mengklik item saat ini. (Jika Anda ingin membiarkan pengguna memuat ulang halaman atau data saat ini, pertimbangkan untuk menyediakan opsi 'muat ulang' khusus.)

Membuat bilah remah roti

• API Penting:Kelas BreadcrumbBar

Buka aplikasi Galeri WinUI 3 dan lihat BreadcrumbBar beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Contoh ini menunjukkan cara membuat bilah breadcrumb dengan gaya default. Anda dapat menempatkan bilah remah roti di mana saja di antarmuka pengguna aplikasi Anda. Anda mengisi jejak navigasi dengan mengatur properti ItemsSource. Di sini, diatur ke array string yang ditampilkan di bilah jejak navigasi.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

Sumber Item

Bilah remah roti tidak memiliki Items properti, hanya memiliki properti ItemsSource . Ini berarti Anda tidak dapat mengisi breadcrumbs di XAML atau dengan menambahkannya langsung ke koleksi Items dalam kode. Sebagai gantinya, Anda membuat koleksi dan menyambungkan ItemsSource properti ke dalam kode atau menggunakan pengikatan data.

Anda dapat mengatur ItemsSource ke kumpulan semua jenis data agar sesuai dengan kebutuhan aplikasi Anda. Item data dalam koleksi digunakan untuk menampilkan breadcrumb di bilah dan untuk navigasi ketika sebuah item di bilah breadcrumb diklik. Dalam contoh di halaman ini, kami membuat sebuah struct (bernama Crumb) yang berisi label untuk ditampilkan di bilah breadcrumb dan objek data yang menyimpan informasi navigasi.

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

Item Templat

Secara default, bilah breadcrumb menampilkan representasi string dari setiap item dalam koleksi. Jika item data dalam koleksi Anda tidak memiliki penimpaan yang sesuai ToString, Anda bisa menggunakan properti ItemTemplate untuk menentukan template data yang menunjukkan bagaimana item ditampilkan di breadcrumb.

Misalnya, jika koleksi breadcrumb Anda adalah daftar objek StorageFolder, Anda dapat menyediakan templat data dan mengikat ke properti DisplayName seperti ini.

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>

ItemDiklik

Tangani peristiwa ItemClicked untuk menavigasi ke item yang diklik oleh pengguna di bilah navigasi breadcrumbs. Lokasi saat ini biasanya ditampilkan sebagai item terakhir di bilah breadcrumb, jadi Anda harus menyertakan pemeriksaan di penanganan aktivitas Anda jika Anda tidak ingin memuat ulang lokasi saat ini.

Contoh ini memeriksa Indeks untuk melihat apakah Item yang diklik adalah item terakhir dalam koleksi, yang merupakan lokasi saat ini. Jika ya, tidak ada navigasi yang terjadi.

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

Gaya ringan

Anda dapat mengubah Gaya dan ControlTemplate default untuk memberi kontrol tampilan yang unik. Lihat bagian Gaya Kontrol dan Templat dari dokumen API BreadcrumbBar untuk daftar sumber daya tema yang tersedia. Untuk informasi selengkapnya, lihat bagian Gaya Ringan dari artikel Kontrol Gaya.

Contoh kode

Contoh ini menunjukkan bagaimana Anda dapat menggunakan bilah remah roti dalam skenario file explorer sederhana. Tampilan daftar memperlihatkan isi gambar atau pustaka Musik yang dipilih, dan memungkinkan pengguna menelusuri sub-folder. Bilah remah roti ditempatkan di header tampilan daftar, dan memperlihatkan jalur ke folder saat ini.

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

Artikel terkait

• Dasar-dasar desain navigasi
• Tampilan Navigasi
• BreadcrumbBar kelas