İçerik Haritası Çubuğu

BreadcrumbBar, sayfaları veya klasörleri mevcut konuma götüren doğrudan bir yol sağlar. Genellikle kullanıcının dosya sisteminde veya menü sisteminde gezinti izinin kalıcı olarak görünür olması gerektiği ve kullanıcının önceki bir konuma geri dönmesi gerekebileceği durumlarda kullanılır.

Düğümlerle izlek çubuğu .

Doğru kontrol bu mu?

İçerik haritası çubuğu, kullanıcının bir uygulama veya klasörler arasında gezinirken konumunu izlemesine olanak tanır ve yolun önceki bir konumuna hızla geri dönmelerini sağlar.

Geçerli konuma giden yol önemli olduğunda BreadcrumbBar kullanın. Bu kullanıcı arabirimi genellikle klasör yöneticilerinde ve bir kullanıcının bir uygulamanın çok sayıda düzeyinde gezinebileceği durumlarda kullanılır.

İzlence çubuğu kullanıcı arabirimi

Navigasyon çubuğu, her düğümü açılı işaretlerle ayrılmış olarak yatay bir çizgide gösterir.

Uygulama, tüm düğümleri göstermek için yeterli alan olmayacak şekilde yeniden boyutlandırılırsa içerik haritaları daraltılır ve en soldaki düğümlerin yerini üç nokta alır. Üç noktaya tıklanması, daraltılmış düğümleri göstermek için bir açılır menü açar.

Anatomi

Aşağıdaki görüntüde BreadcrumbBar denetiminin bölümleri gösterilmektedir. basit stilkullanarak bazı parçaların görünümünü değiştirebilirsiniz.

Recommendations

• Çok sayıda gezinti düzeyiniz varsa ve kullanıcıların önceki düzeylere geri dönebilmesini beklerken içerik haritası çubuğunu kullanın.
• Yalnızca 2 olası gezinti düzeyiniz varsa iz çubuğu kullanmayın. Basit arka navigasyon yeterlidir.
• Geçerli konumu içerik haritası çubuğundaki son öğe olarak gösterin. Ancak, kullanıcı geçerli öğeye tıklarsa genellikle herhangi bir gezinti gerçekleştirmek istemezsiniz. (Kullanıcının geçerli sayfayı veya verileri yeniden yüklemesine izin vermek istiyorsanız, ayrılmış bir 'yeniden yükleme' seçeneği sağlamayı göz önünde bulundurun.)

Gezinme çubuğu oluşturma

• Önemli API'ler:BreadcrumbBar sınıfı

WinUI 3 Galeri uygulamasını açın ve BreadcrumbBar'ı çalışırken görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Bu örnekte, varsayılan stile sahip bir içerik haritası çubuğunun nasıl oluşturulacağı gösterilmektedir. Uygulama kullanıcı arayüzünüzde gezinme çubuğunu herhangi bir yere yerleştirebilirsiniz. ItemsSource özelliğini ayarlayarak iz yollarını doldurursunuz. Burada içerik haritası çubuğunda gösterilen bir dizi dizeye ayarlanır.

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

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

Öğe Kaynağı

Gezinti çubuğunun Items özelliği yoktur, yalnızca ItemsSource özelliği vardır. Bu, XAML'de veya doğrudan koddaki bir Items koleksiyonuna ekleyerek navigasyon izlerini (breadcrumbs) dolduramayacağınız anlamına gelir. Bunun yerine, bir koleksiyon oluşturur ve kodda veya veri bağlama kullanarak ItemsSource özelliğini buna bağlarsınız.

ItemsSource uygulamanızın gereksinimlerine uyacak şekilde herhangi bir veri türünde bir koleksiyona ayarlayabilirsiniz. Koleksiyondaki veri öğeleri hem içerik haritasını çubukta görüntülemek hem de içerik haritası çubuğundaki bir öğeye tıklandığında gezinmek için kullanılır. Bu sayfadaki örneklerde, içerik haritası çubuğunda görüntülenecek bir etiket ve gezinti için kullanılan bilgileri barındıran bir veri nesnesi içeren basit bir struct (Crumbolarak adlandırılır) oluştururuz.

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

Öğe Şablonu

Varsayılan olarak, içerik haritası çubuğu koleksiyondaki her öğenin dize gösterimini görüntüler. Koleksiyonunuzdaki veri öğelerinin uygun bir ToString üst yazımı yoksa, öğelerin gezinti çubuğunda nasıl gösterileceğini tanımlayan bir veri şablonu belirtmek için ItemTemplate özelliğini kullanabilirsiniz.

Örneğin, içerik haritası koleksiyonunuz StorageFolder nesnelerinin listesiyse, bir veri şablonu sağlayabilir ve bunun gibi DisplayName özelliğine bağlanabilirsiniz.

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>

ÖğeTıklandı

Kullanıcıyı izlek çubuğunda tıkladığı öğeye yönlendirmek için ItemClicked olayını işleyin. Geçerli konum genellikle içerik haritası çubuğundaki son öğe olarak gösterilir, bu nedenle geçerli konumu yeniden yüklemek istemiyorsanız olay işleyicinize bir denetim eklemeniz gerekir.

Bu örnek, tıklanan Öğe'nin, geçerli konum olan koleksiyondaki son öğe olup olmadığını görmek için Dizini denetler. Bu durumda gezinti gerçekleşmez.

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

Hafif stil

Denetime benzersiz bir görünüm vermek için varsayılan Style ve ControlTemplate değerlerini değiştirebilirsiniz. Kullanılabilir tema kaynaklarının listesi için BreadcrumbBar API belgelerinin Denetim Stili ve Şablon bölümüne bakın. Daha fazla bilgi için Stil denetimleri makalesinin Hafif stil bölümüne bakın.

Kod örnekleri

Bu örnekte basit bir file explorer senaryosunda içerik haritası çubuğunu nasıl kullanabileceğiniz gösterilmektedir. Liste görünümü seçili Resimler veya Müzik kitaplığının içeriğini gösterir ve kullanıcının alt klasörlerde detaya gitmesine olanak tanır. Gezinme yolu çubuğu, liste görünümünün başlık kısmına yerleştirilir ve geçerli klasörün yolunu gösterir.

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

İlgili makaleler

• Navigasyon tasarımı temelleri
• NavigationView (Gezinti Görünümü)
• BreadcrumbBar sınıfı