Bagikan melalui

Bilah Remah Roti

  • Artikel

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) harus terus terlihat dan pengguna mungkin perlu kembali ke lokasi sebelumnya.

Bilah remah roti dengan simpul: Rumah, Dokumen, Desain, Northwind, Gambar, Folder1, Folder2, Folder3. Aplikasi ini diubah ukurannya sehingga Breadcrumb runtuh dan elipsis menggantikan node paling kiri. Kemudian, mengeklik elipsis akan membuka flyout dengan simpul yang hancur

Apakah ini kontrol yang tepat?

Bilah remah roti memungkinkan pengguna melacak lokasi mereka saat menavigasi melalui aplikasi atau folder, dan memungkinkan mereka dengan cepat melompat kembali ke lokasi sebelumnya di 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.

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

Bilah remah roti dengan simpul: Rumah, Dokumen, Desain, Northwind, Gambar, Folder1, Folder2, Folder3.

Jika aplikasi diubah ukurannya sehingga tidak ada cukup ruang untuk menampilkan semua simpul, remah roti runtuh dan elipsis menggantikan simpul paling kiri. Mengklik elipsis membuka flyout untuk memperlihatkan simpul yang diciutkan.

Batang breadcrumb diubah ukurannya sehingga elipsis menggantikan node paling kiri. Elipsis membuka flyout dengan yang menunjukkan node yang diciutkan

anatomi

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

Gambar bilah remah roti dengan bagian berlabel: elipsis, chevron, item bilah remah roti, item saat ini, flyout elipsis, item drop-down elipsis

Rekomendasi

  • 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.)

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

BreadcrumbBar untuk aplikasi UWP memerlukan WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Microsoft.UI.Xaml.Controls .

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

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

<muxc:BreadcrumbBar />

Membuat bilah remah roti

Buka aplikasi Galeri WinUI 3 dan lihat BreadcrumbBar beraksi.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di 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 remah roti dengan mengatur properti ItemsSource . Di sini, ini diatur ke array string yang ditampilkan di bilah remah roti.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

ItemsSource

Bilah remah roti tidak memiliki Items properti, hanya memiliki properti ItemsSource . Ini berarti Anda tidak dapat mengisi remah roti di XAML atau dengan menambahkannya langsung ke Items koleksi 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 baik untuk menampilkan remah roti di bilah, dan untuk menavigasi saat item di bilah remah roti diklik. Dalam contoh di halaman ini, kami membuat sederhana struct (bernama Crumb) yang berisi label untuk ditampilkan di bilah remah roti dan objek data yang menyimpan informasi yang digunakan untuk 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;
}

ItemTemplate

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 templat data yang menentukan bagaimana item ditampilkan di bilah remah roti.

Misalnya, jika koleksi breadcrumb Anda adalah daftar objek StorageFolder , Anda dapat menyediakan templat data dan mengikat 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>

ItemClicked

Tangani peristiwa ItemClicked untuk menavigasi ke item yang telah diklik pengguna di bilah remah roti. 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 penjelajah file 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.

Gambar daftar file dengan bilah remah roti 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;
}