Syncfusion Wpf Tree Navigator

Implementing SfTreeNavigator (WPF)

When to Use This Skill

Use this skill when the user needs to:

• Build in-place hierarchical drill-down navigation in WPF (no popup, no separate panel)
• Display a multi-level tree structure that expands within its own footprint
• Show product/category/department hierarchy navigation
• Choose between breadcrumb-style (Default) or stacked-header (Extended) navigation
• Bind a nested business object collection to tree navigator items
• Programmatically set or read the currently selected item

Component Overview

SfTreeNavigator                        (root container)
├── Header                             — root label text (always visible)
├── HeaderTemplate                     — customize root header appearance
└── SfTreeNavigatorItem  (×N)          (each level item)
    ├── Header                         — item display text
    └── SfTreeNavigatorItem  (×N)      (nested child items, unlimited depth)

Assembly: Syncfusion.SfTreeNavigator.WPF
Namespace: Syncfusion.Windows.Controls.Navigation
XAML prefix: navigation: (typical alias)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly reference and namespace
• Declarative XAML with SfTreeNavigatorItem
• C# code-behind creation
• Header on SfTreeNavigator
• Themes with SfSkinManager

Populating Items

📄 Read: references/populating-items.md

• Declarative items via Items collection
• Data binding via ItemsSource
• Nested Model + ViewModel with ObservableCollection
• ItemTemplate with HierarchicalDataTemplate
• Connecting child levels via ItemsSource binding in template

Navigation Mode

📄 Read: references/navigation-mode.md

• Default — single header + back button at top
• Extended — stacked breadcrumb headers from root to current level
• When to use each mode
• TreeNavigatorHeaderItem styling in Extended mode
• Decision guide

Header and Selection

📄 Read: references/header-and-selection.md

• HeaderTemplate — customize root header appearance
• Header — root title string
• SelectedItem — get/set the selected item
• TwoWay MVVM binding for SelectedItem
• Programmatic selection

Quick Start

xmlns:navigation="clr-namespace:Syncfusion.Windows.Controls.Navigation;assembly=Syncfusion.SfTreeNavigator.WPF"

<navigation:SfTreeNavigator Header="Enterprise Toolkit"
                             Width="300" Height="400">
    <navigation:SfTreeNavigatorItem Header="WinRT (XAML)">
        <navigation:SfTreeNavigatorItem Header="Chart"/>
        <navigation:SfTreeNavigatorItem Header="Tools"/>
    </navigation:SfTreeNavigatorItem>
    <navigation:SfTreeNavigatorItem Header="Metro Studio"/>
</navigation:SfTreeNavigator>

using Syncfusion.Windows.Controls.Navigation;

SfTreeNavigator navigator = new SfTreeNavigator { Header = "Enterprise Toolkit" };

SfTreeNavigatorItem winrt  = new SfTreeNavigatorItem { Header = "WinRT (XAML)" };
SfTreeNavigatorItem chart  = new SfTreeNavigatorItem { Header = "Chart" };
SfTreeNavigatorItem tools  = new SfTreeNavigatorItem { Header = "Tools" };
SfTreeNavigatorItem metro  = new SfTreeNavigatorItem { Header = "Metro Studio" };

winrt.Items.Add(chart);
winrt.Items.Add(tools);
navigator.Items.Add(winrt);
navigator.Items.Add(metro);
this.Content = navigator;

Common Patterns

Key Properties

SfTreeNavigatorItem properties: