Click here to Skip to main content
14,835,636 members
Articles / Desktop Programming / WPF
Posted 2 Jan 2009


70 bookmarked

WPF Breadcrumb Folder TextBox

Rate me:
Please Sign up or sign in to vote.
4.41/5 (10 votes)
15 Jan 2009LGPL36 min read
This article provides an implementation of a WPF Breadcrumb control, and describes how to develop one.


This article provides an implementation of a WPF Breadcrumb control and describes how to develop one.


When Vista was released, one of its main features was Breadcrumb explorer bar, I always wanted to build one, but I was lacking the knowledge to develop one myself.

Nesher created a breadcrumb component couple of months ago, which is a fully working one, but it is an XAML intensive solution and is too complicated for me to understand the code, not to mention I want to modify it and add features, so I write my own using MVP pattern (where the model is a string).

His implementation gave me idea of how to develop a breadcrumb, and I took a couple styles from his implementation. Besides that, my implementation is a complete rewrite, and they have a couple of differences:

  • It is fully string based, that means
    • SubFolder polling is done manually. You cannot bind a HierarchicalDataModel and expect it to work automatically.
  • You can use two or more different "Root", like Folder and Animal in demo, this is changeable in runtime.
  • Expander support, which shows when you have too many BreadcrumbItems on the Breadcrumb.


  • Progressbar support.
  • Dropdown support, the BreadcrumbControl itself is a ComboBox (ver2):
  • Autocomplete textbox support


  • Remember child position when changing directory, only rearrange when necessary.


How to Use?

If you want to use the component as directory Breadcrumb only, just add the main control to your window. The main control has a bindable property named SelectedFolder, which is a string, you can bind it to other component, e.g.

<TextBox x:Name="tb" Text="{Binding ElementName=breadcrumb, Path=RootFolder}" />
<uc:BreadcrumbControl Margin="0,50,0,0" x:Name="breadcrumb" />

If you want to use the component to display custom data, you will have to write:

  • A view, which is a DataTemplate,
    <DataTemplate x:Key="folderDataTemplate">
        <!-- an Icon and a textbox -->
        <Image Height="16" Width="16" 
             Source="{Binding Icon}" />
        <TextBlock Text="{Binding DisplayName}" Margin="2,0" />
    <!-- hook it to SubItemTemplate of BreadcrumbControl -->
    <uc:BreadcrumbControl SubItemTemplate="{StaticResource folderDataTemplate}"/>
  • A presenter, which is derived from BreadcrumbItemBase, which implements the following: If you want to attach your model, you can attach it inside your derived presenter.
    //Poll a list of subfolders of current directory. (it's only called when needed)
    //Threading is already implemented, you dont have to implement your own.
    public override BreadcrumbItemBase[] PollSubFolders(); 
    //Convert from DisplayPath to LogicalPath, or vice versa
    //DisplayPath is based on DisplayName (e.g. Computer\C:\\Program Files\qzLite3)
    //LogicalPath is based on FolderName (e.g. C:\ProgramFiles\qzLite3)
    public override string ConvertPath(BreadcrumbItemBase.PathType pt, string path)
    //Return Icon of current folder
    public override ImageSource GetIcon()
  • Modify the BreadcrumbControl to support your new presenter and view.
    CustomPresenter Root = new CustomPresenter();
    //Once you run the above code, the BreadcrumbControl will use your presenter.

How It Works?

As I mentioned before, the whole thing is string based, ItemsPresenter returns string as folder, folder creation is based on a folder name, that's why you have to make sure the code is legit before passing it to CurrentFolder property in BreadcrumbControl. (TypedPresenter does have some kind of lookup, other implementations don't check if the folder exists).

String based makes it easier to develop (Breadcrumb usually uses as navigation purpose, sometimes you don't want to make a model for every navigation item), however, it restricts the amount of information to display in view, fortunately for BreadcrumbItems, it requires only an Icon and a text, I can easily use a "Converter" to do this work. For folder path, I used PathToDirNameConverter, for Icon, I used a FileToIcon converter.

The diagram is as follows:


Part of the program (AutoCompleteTextBox and BreadcrumbCore) is designed using Model - View - Presenter design pattern, this separate UI code and Logic code and reduce complexity.

The BreadcrubCore contains a number of components: breadcrumbIndex.jpg

  • A BreadcrumbCore - contain an expander,
    • Contains one or more BreadcrumbItems
  • An AutoCompleteTextBox (AutoCompleteTextBox)
  • A ProgressBar (accessible via Progress and IsIndeterminate in BreadcrumbControl)
  • A number of buttons
    • A toggle button which toggles between the AutoCompleteTextBox and BreadcrumbCore
    • A toggle button for dropdown
    • A refresh button (raise RefreshClicked event when clicked)


The "AutoCompleteTextBox" suggest items based on input, it will look for all items in the current folder, and display if the text is matched:

List<string> retVal = new List<string>();
foreach (BreadcrumbItemBase subFolder in _currentPresenter.ActualSubFolders)
if (subFolder.FolderPath.ToLower().StartsWith(_selectedPath.ToLower()))
Suggestions = retVal.ToArray(); // output the suggestions

The BreadcrumbItem

The BreadcrumbItem are items inside the container, it's composed of a custom BreadcrumbItemBase(Presenter) and a ComboBox(View):

BreadcrumbItemBase is the presenter of BreadcrumbItems, a couple of ItemsPresenter defined in the demo:

  • BreadcrumbItemBase - Base class, derive from this for define custom BreadcrumbItemBase
  • FolderPresenter - Contains logic to current folder and poll subfolders
  • AnimalPresenter - For test purpose only, generate cat/dog/rat combination as subfolders

The view part of BreadcrumbItems is a styled ComboBox, which has Items bound to ItemPresenter's SubFolders, the ComboBox has the following items:

  • Main button (buttonCurrent), which occupied most space on the ComboBox, when user clicked on it, change to current folder. (That's why it is called button Current)
  • Toggle button (buttonExpand) which specifies if the Popup is shown (I used nesher's style here)
  • Popup (PART_Popup), the popup part, it's called that way because WPF required it..
  • ItemsPresenter (itemList), located in the popup, hold all SubFolders (strings).

Nesher's implementation uses a context menu instead of ComboBox, this can be easier implemented using ComboBox, however, the default position of the Popup in the ComboBox Aligned Left side of the ComboBox, one have to change the Placement and PlacementTarget property of the Popup, like below:

<Popup ... Placement="Bottom" PlacementTarget="{Binding ElementName=buttonExpand}" />


And BTW, TranslateTransform doesn't work to reposition the Popup, e.g., the following doesn't work:

  <TranslateTransform X="150" Y="0"/>

The Expander is a ComboBox with no DisplayText and a customized Icon. When the Breadcrumb Items's IsHitTestVisible is set to false (by BreadcrumbCorePanel), they will add themselves to the expander, and remove when reverse. In version 2, the expander is replaced with Root combobox.

public bool HitTestVisible { get { return true; } 
   set { changedHitTestVisible(value); } } //Bound to UI
private void changedHitTestVisible(bool value)
  if (!value) _parentPresenter.Expander.Add(DisplayPath);
  else _parentPresenter.Expander.Remove(DisplayPath);

The ToggleButton is hidden if there's no item in the list.

Uncompleted Items

  • History ComboBox



  • 02-01-09 Initial version
  • 03-01-09 Fix: Ghost folder in expander
  • 03-01-09 Add: Return selected folder model (for TypedPresenter)
  • 04-01-09 Add: Alt+D Toggle TextBox/Breadcrumb
  • 04-01-09 Add: Autocomplete textbox now supports non-diskfolder types
  • 04-01-09 Version 1.2
  • 04-01-09 Fix: Pressing enter button in textbox does not switch back to breadcrumb if the text is not changed
  • 05-01-09 Update: Code clean up, assembly is created (QuickZip.UserControls.Breadcrumb.dll)
  • 05-01-09 Add: The view part is moved to BreadcrumbControl.SubItemTemplate (See demo, article requires update)
  • 05-01-09 Fix: Some update to TypedPresenter is added
  • 05-01-09 Version 1.3
  • 05-01-09 Fix: Alt+D Toggle not working correctly
  • 05-01-09 Update: Select last char when toggle to textbox
  • 05-01-09 Add: Remember child position
  • 05-01-09 Fix: Crash when suggestion changes when selection folder
  • 05-01-09 Version 1.4
  • 06-01-09 Fix: Ghost folder again (broken in last version)
  • 06-01-09 Version 1.5
  • 07-01-09 Add: QuickZip.UserControls.TypedBreadcrumb.dll, designed for Model use
  • 07-01-09 ----: (Expander is not complete and autocomplete textbox not showing suggestions in some case, will be added in next version)
  • 07-01-09 Update: Demo updated to reflect changes
  • 07-01-09 Article update
  • 07-01-09 Version 1.6
  • 08-01-09 Fix: Expander and AutocompleteTextbox in TypedBreadcrumb
  • 08-01-09 Version 1.7
  • 16-01-09 Update: Rewrite, simplified the code and added some documentation (not finished yet)
  • 16-01-09 Update: Removed the expander and placed the expander logic in root (looks more like Vista's breadcrumb).
  • 16-01-09 Add: Support folder with null FolderName now (e.g. Desktop\Computer)
  • 16-01-09 Add: Support Adding Custom folder to expander list now (see IRoot interface in IExpander.cs, or the demo)
  • 16-01-09 Add: Support Adding Separator to expander list
  • 16-01-09 Version 2.1
  • 16-01-09 Article updated
  • 16-01-09 Add: Refresh button
  • 16-01-09 Add: History dropdown
  • 16-01-09 Fix: Splitter width
  • 16-01-09 Update: Display Root caption when no items are selected
  • 17-01-09 Fix: IsTextBoxEnabled is now working
  • 17-01-09 Version 2.2
  • 17-01-09 Fix: DropDown SelectedIndex not reset when opened
  • 18-01-09 Add: RefreshCommand/Parameter/Target
  • 18-01-09 Update: Documentation of BreadcrumbItemBase.cs
  • 18-01-09 Version 2.3
  • 20-01-09 Update: Better DataBinding support
  • 22-01-09 Add: Animation when root folder resizing, change folder
  • 22-01-09 Version 2.4
  • 23-01-09 Fix: Adding folder to expander (internally) will change root selected index, and lead to unintended folder change
  • 23-01-09 Version 2.5


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

Leung Yat Chun (Fainx)
Founder FANIX.ME
Hong Kong Hong Kong
From the end of the Universe we have Fainx and Quick Zip.
http://www.FANIX.ME is stolen by and moved to
May Thy Lord Your God be blessed always.

DirectoryInfoEx - [1.0.27]
WPF FileExplorer3 - [3.0.19]
WPF HtmlTextBlock - [Codeplex]
WPF ListView MultiSelect - [0.4]
WPF UIEventHub MultiSelect/DragDrop w Touch support - [3.0]
WPF BreadcrumbFolderTextBox - [2.5]
WPF BreadcrumbTree and Breadcrumb
WPF Aero Titlebar - [0.2]

Comments and Discussions

QuestionFileExplorer3 Pin
Leung Yat Chun (Fainx)8-Nov-13 3:25
professionalLeung Yat Chun (Fainx)8-Nov-13 3:25 
QuestionCan't compile in VS2010 Pin
Yomodo27-Dec-11 0:40
MemberYomodo27-Dec-11 0:40 
AnswerRe: Can't compile in VS2010 Pin
Serge Desmedt21-Aug-12 9:16
professionalSerge Desmedt21-Aug-12 9:16 
BugHeight does not work Pin
Decipator30-Jun-11 8:23
MemberDecipator30-Jun-11 8:23 
QuestionEnhancement for Tab key Pin
dreamgarden20-Jun-11 18:00
Memberdreamgarden20-Jun-11 18:00 
AnswerAnother enhancement Pin
dreamgarden22-Jun-11 13:50
Memberdreamgarden22-Jun-11 13:50 
GeneralRe: Another enhancement Pin
Leung Yat Chun (Fainx)24-Jun-11 20:10
professionalLeung Yat Chun (Fainx)24-Jun-11 20:10 
GeneralThe event SelectionChanged is NOT raised when a breadcrumb item is click Pin
vgnam28-Jul-10 0:32
Membervgnam28-Jul-10 0:32 
GeneralRe: The event SelectionChanged is NOT raised when a breadcrumb item is click Pin
Leung Yat Chun (Fainx)28-Jul-10 0:52
professionalLeung Yat Chun (Fainx)28-Jul-10 0:52 
GeneralRe: The event SelectionChanged is NOT raised when a breadcrumb item is click [modified] Pin
vgnam28-Jul-10 1:15
Membervgnam28-Jul-10 1:15 
GeneralError when binding SelectedFolder to a DataContext's property Pin
vgnam25-Jul-10 22:10
Membervgnam25-Jul-10 22:10 
AnswerRe: Error when binding SelectedFolder to a DataContext's property Pin
Leung Yat Chun (Fainx)26-Jul-10 5:08
professionalLeung Yat Chun (Fainx)26-Jul-10 5:08 
GeneralRe: Error when binding SelectedFolder to a DataContext's property Pin
vgnam26-Jul-10 17:33
Membervgnam26-Jul-10 17:33 
GeneralRe: Error when binding SelectedFolder to a DataContext's property Pin
vgnam26-Jul-10 19:26
Membervgnam26-Jul-10 19:26 
GeneralRe: Error when binding SelectedFolder to a DataContext's property Pin
vgnam28-Jul-10 0:19
Membervgnam28-Jul-10 0:19 
GeneralRe: Error when binding SelectedFolder to a DataContext's property Pin
Leung Yat Chun (Fainx)28-Jul-10 0:41
professionalLeung Yat Chun (Fainx)28-Jul-10 0:41 
QuestionCan not bind SelectedFolder to a textbox's Text property Pin
vgnam23-Jul-10 2:37
Membervgnam23-Jul-10 2:37 
AnswerRe: Can not bind SelectedFolder to a textbox's Text property Pin
Leung Yat Chun (Fainx)23-Jul-10 4:16
professionalLeung Yat Chun (Fainx)23-Jul-10 4:16 
GeneralRe: Can not bind SelectedFolder to a textbox's Text property Pin
vgnam25-Jul-10 21:55
Membervgnam25-Jul-10 21:55 
GeneralChange folder notification while inline editing. Pin
Jaspreet Singh Bhangoo6-Jan-10 3:21
MemberJaspreet Singh Bhangoo6-Jan-10 3:21 
GeneralRe: Change folder notification while inline editing. Pin
Leung Yat Chun (Fainx)6-Jan-10 3:53
professionalLeung Yat Chun (Fainx)6-Jan-10 3:53 
GeneralRe: Change folder notification while inline editing. [modified] Pin
Jaspreet Singh Bhangoo6-Jan-10 19:32
MemberJaspreet Singh Bhangoo6-Jan-10 19:32 
GeneralCascading menu selection Pin
sonofdaedalus23-Dec-09 18:20
Membersonofdaedalus23-Dec-09 18:20 
GeneralRe: Cascading menu selection Pin
Leung Yat Chun (Fainx)31-Dec-09 3:50
professionalLeung Yat Chun (Fainx)31-Dec-09 3:50 
GeneralMy vote of 1 Pin
DannyVarod30-Jan-09 4:37
MemberDannyVarod30-Jan-09 4:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.