WPF - Breadcrumb Control (v19.1)

WPF Team Blog
27 May 2019

The new WPF Breadcrumb control is a navigation bar, similar to the one Microsoft Explorer has used since Windows 7.

Breadcrumb Control in Explorer

Data Binding

The Breadcrumb control displays a collection of objects assigned to its ItemsSource property. The data source can contain hierarchical data, each node referring to one or more child nodes. At runtime the control displays the current navigation position within this tree.

The control supports binding to several data source structures.

  • Self-referenced structures include a parent reference, which can be an ID or an object reference. You configure for this case using the ParentMember property.
  • Data types with child element collections are navigated using the field configured in the ChildMember property. Types in the hierarchy can differ, as long as the child collection names are the same.
  • To support hierarchical structures with varying types, a custom child selector implementation (using the IChildSelector interface) can be assigned. This selector uses custom logic to access nested elements.

In all cases, details like item text and image can be retrieved using field name configuration (for instance, DisplayMember and ImageMember), but events are also available to work with different types flexibly.

The demo Breadcrumb Code Examples is available to show these different structures. If you have the demos installed on your machine, you can follow this link to run it.

Edit Modes

The Breadcrumb control can operate in two edit modes:

  • In Path Mode, end users type a path into the edit box. The Breadcrumb control displays a dropdown list of suggestions as the user types.

Path Mode

  • In Items Mode, end users navigate the hierarchy selecting nodes from the dropdown lists.

Items Mode

Both modes are combined at runtime depending on user actions, but it is possible to explicitly set a specific mode when required. This animation shows an example:

Editing Modes

Check out the demo Breadcrumb File System Navigation to test this functionality for yourself. If you have our demos installed on your machine, click this link to get there.

Your Feedback Is Welcome

Please let us know if you have any thoughts on this functionality. Feel free to leave comments below or open Support Center tickets for discussion.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
3 comment(s)
Customer68834
Customer68834
Is it possible to enlarge/customize the dropdown icon (the triangle-arrow), such that it will be easier to use with touch?
14 December 2019
Customer66726
Sasa
This control doesn't support lazy loading. IChildSelector's method  is executed for all items. It doesn't work as expected. It also doesn't support dynamically creation of items. Not usefull for now. 
3 August 2020
Alex Chuev (DevExpress)
Alex Chuev (DevExpress)

We fixed an issue with IChildSelector in v19.1.4 as Kirill mentioned in this support ticket:

BreadcrumbControl's ChildSelector is always invoked for the entire path

Please try updating and feel free to reactivate this ticket if you encounter any difficulties.


Thanks,

Alex

4 August 2020

Please login or register to post comments.