WPF - Breadcrumb Control (v19.1)

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.

no comments
No Comments

Please login or register to post comments.