Template Customizing in WPF Breadcrumb (HierarchyNavigator)

4 May 20212 minutes to read

When Business Objects are used for data binding, ItemTemplate should be used to determine how the user interface will be displayed. A HierarchicalDataTemplate can be used as an ItemTemplate specifying the template for each item.


HierarchicalDataTemplate is used to show data in a hierarchical structure.

The steps to create a HierarchicalDataTemplate are as follows:

  1. Create a Business Object with its collections.
public class HierarchyItem
	public string ContentString { get; set; }
	public HierarchyItem(string content, params HierarchyItem[] myItems)
		this.ContentString = content;
		itemsObservableCollection = new ObservableCollection<HierarchyItem>();
		foreach (var item in myItems)
		Items = itemsObservableCollection;
    private ObservableCollection<HierarchyItem> itemsObservableCollection;
	public ObservableCollection<HierarchyItem> Items
		get { return itemsObservableCollection; }
			if (itemsObservableCollection != value)
    			itemsObservableCollection = value;
public class HierarchicalItemsSource : ObservableCollection<HierarchyItem>
	public HierarchicalItemsSource()
		this.Add(new HierarchyItem("Syncfusion",
		new HierarchyItem("User Interface",
		new HierarchyItem("Silverlight"),
		new HierarchyItem("WPF"),
		new HierarchyItem("MVC")),
		new HierarchyItem("Reporting Edition",
		new HierarchyItem("IO"),
		new HierarchyItem("PDF generator"),
		new HierarchyItem("WPF")
  1. Add HierarchicalDataTemplate.
  2. Add a template and ItemsSource to bind the object collections.
<local:HierarchicalItemsSource x:Key="hierarchicalItemsSource"/>
<HierarchicalDataTemplate x:Key="myHierarchicalTemplate" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding ContentString}" Margin="2,0" />
  1. Add hierarchicalItemsSource with the HierarchyNavigator control ItemsSource property.
<syncfusion:HierarchyNavigator Name="hierarchyNavigator1" 
		ItemTemplate="{StaticResource myHierarchicalTemplate}"                
		ItemsSource="{StaticResource hierarchicalItemsSource}"/>