![]() ![]() If a folder is clicked, drill down into it. Private async void FolderListView_ItemClick(object sender, ItemClickEventArgs e) Don't process last index (current location)īreadcrumbs.RemoveAt(Breadcrumbs.Count - 1) Private async void FolderBreadcrumbBar_ItemClicked(muxc.BreadcrumbBar sender, muxc.BreadcrumbBarItemClickedEventArgs args) Start with Pictures and Music libraries.īreadcrumbs.Add(new Crumb("Home", null)) Public sealed partial class MainPage : Page Private void BreadcrumbBar1_ItemClicked(muxc.BreadcrumbBar sender, muxc.BreadcrumbBarItemClickedEventArgs args) Breadcrumbs is set as BreadcrumbBar1.ItemsSource. This example checks the Index to see whether the clicked Item is the last item in the collection, which is the current location. The current location is typically shown as the last item in the breadcrumb bar, so you should include a check in your event handler if you don't want to reload the current location. ![]() Handle the ItemClicked event to navigate to the item the user has clicked in the breadcrumb bar. If the data items in your collection don't have an appropriate ToString override, you can use the ItemTemplate property to specify a data template that defines how the items are shown in the breadcrumb bar.įor example, if your breadcrumb collection was a list of StorageFolder objects, you could provide a data template and bind to the DisplayName property like this. Public override string ToString() => Label īy default, the breadcrumb bar displays the string representation of each item in the collection. In the examples on this page, we create a simple struct (named Crumb) that contains a label to display in the breadcrumb bar and a data object that holds information used for navigation. The data items in the collection are used both to display the breadcrumb in the bar, and to navigate when an item in the breadcrumb bar is clicked. You can set the ItemsSource to a collection of any type of data to suit the needs of your app. Instead, you create a collection and connect the ItemsSource property to it in code or using data binding. This means you can't populate the breadcrumbs in XAML or by adding them directly to an Items collection in code. The breadcrumb bar does not have an Items property, it only has an ItemsSource property. Here, it's set to an array of strings that are shown in the breadcrumb bar. You populate the breadcrumbs by setting the ItemsSource property. You can place the breadcrumb bar anywhere in your app UI. This example shows how to create a breadcrumb bar with the default styling. Get the app from the Microsoft Store or get the source code on GitHub The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. ![]() Open the WinUI 3 Gallery app and see the BreadcrumbBar in action. (If you want to let the user reload the current page or data, consider providing a dedicated 'reload' option.) However, you typically don't want to perform any navigation if the user clicks the current item. Show the current location as the last item in the breadcrumb bar.Don't use a breadcrumb bar if you only have 2 possible levels of navigation.Use a breadcrumb bar when you have many levels of navigation and expect users to be able to return to any previous level.You can modify the appearance of some parts by using lightweight styling. The image below shows the parts of the BreadcrumbBar control. Clicking the ellipsis opens a flyout to show the collapsed nodes. If the app is resized so that there is not enough space to show all the nodes, the breadcrumbs collapse and an ellipsis replaces the leftmost nodes. The breadcrumb bar displays each node in a horizontal line, separated by chevrons. This UI is commonly used in folder managers and when a user may navigate many levels deep into an app. Use a BreadcrumbBar when the path taken to the current position is relevant. It is often used for situations where the user's navigation trail (in a file system or menu system) needs to be persistently visible and the user may need to go back to a previous location.Ī breadcrumb bar lets a user keep track of their location when navigating through an app or folders, and lets them quickly jump back to a previous location in the path. A BreadcrumbBar provides the direct path of pages or folders to the current location. ![]()
0 Comments
Leave a Reply. |