BreadcrumbControl Class

A breadcrumb control.

Assembly: DevExpress.Xpf.Controls.v20.2.dll

NuGet Packages: DevExpress.WindowsDesktop.Wpf.Controls, DevExpress.Wpf.Navigation

Declaration

C#
VB.NET

public class BreadcrumbControl :
    Control,
    IBreadcrumbDataAdapter

Public Class BreadcrumbControl
    Inherits Control
    Implements IBreadcrumbDataAdapter

Remarks

The Breadcrumb control emulates a navigation bar, similar to the one displayed in Microsoft Explorer starting from Windows 7.

Xaml

<Window ...
        xmlns:dxco="http://schemas.devexpress.com/winfx/2008/xaml/controls">
    <Grid>
        <dxco:BreadcrumbControl 
            ItemsSource="{Binding Documents}" 
            KeyMember="Id"
            ParentMember="ParentId" 
            DisplayMember="Title" />
    </Grid>
</Window>

Edit Modes

The Breadcrumb control can operate in two edit modes:

Path mode. In this mode, end-users type a path in the edit box. The Breadcrumb control displays a drop-down list of suggestions as the user types.
Items mode. In this mode, end-users select a path by selecting the nodes from the drop-down lists.

The Breadcrumb control switches dynamically between these modes at runtime depending on end-user actions (see the animation below).

Use the EditMode property to explicitly set in which mode the control should operate at the moment.

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the BreadcrumbControl class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

how-to-create-a-breadcrumb-control-e4179/CS/PathEditorExample/MainWindow.xaml#L14

<StackPanel>
    <dxco:BreadcrumbControl  ItemsSource="{Binding Items}" VerticalAlignment="Top" SelectedItemPath="{Binding Value, Mode=TwoWay}"
                            DisplayMember="Name" ChildMember="Children" EmptyItemText="Selected root item"/>