syncfusion-wpf-breadcrumb

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF HierarchyNavigator (Breadcrumb)

实现WPF HierarchyNavigator（面包屑）控件

Guide for implementing the Syncfusion® WPF HierarchyNavigator control — a breadcrumb / address-bar component similar to the Windows Explorer address bar, enabling hierarchical path navigation with data binding, edit mode, history, and progress bar support.

本指南介绍如何实现Syncfusion® WPF HierarchyNavigator控件——这是一款类似Windows资源管理器地址栏的面包屑/地址栏组件，支持数据绑定、编辑模式、历史记录和进度条，可实现层级路径导航。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create a breadcrumb / address-bar navigation UI in WPF
Populate
```
HierarchyNavigator
```
with declarative items (
```
HierarchyNavigatorItem
```
) or data-bound collections
Use
```
HierarchicalDataTemplate
```
to display multi-level business objects, XML data, or WCF-sourced data
Enable edit mode so users can type and autocomplete navigation paths
Show navigation history via the back-arrow dropdown
Add a Refresh button and handle
```
HierarchyNavigatorRefreshButtonClick
```
Display / cancel a progress bar during navigation operations
Respond to item selection via Command binding (MVVM pattern)
Apply tooltips, keyboard navigation, and built-in themes

在以下场景中可使用此技能：

在WPF中创建面包屑/地址栏导航UI
使用声明式项（
```
HierarchyNavigatorItem
```
）或数据绑定集合填充
```
HierarchyNavigator
```
使用
```
HierarchicalDataTemplate
```
显示多级业务对象、XML数据或WCF源数据
启用编辑模式，让用户可输入并自动补全导航路径
通过返回箭头下拉菜单显示导航历史
添加刷新按钮并处理
```
HierarchyNavigatorRefreshButtonClick
```
事件
在导航操作期间显示/取消进度条
通过命令绑定（MVVM模式）响应项选择
应用工具提示、键盘导航和内置主题

Component Overview

组件概述

HierarchyNavigator

renders a breadcrumb bar where each segment is a clickable

HierarchyNavigatorItem

. Clicking a segment opens a popup listing its children for drill-down navigation.

Required assemblies:

```
Syncfusion.Tools.WPF
```
```
Syncfusion.Shared.WPF
```

XAML namespace:

xml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

C# namespace:

csharp

using Syncfusion.Windows.Tools.Controls;

HierarchyNavigator

会渲染一个面包屑栏，其中每个分段都是可点击的

HierarchyNavigatorItem

。点击分段会打开一个弹出窗口，列出其子项以进行向下钻取导航。

所需程序集：

```
Syncfusion.Tools.WPF
```
```
Syncfusion.Shared.WPF
```

XAML命名空间：

xml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

C#命名空间：

csharp

using Syncfusion.Windows.Tools.Controls;

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly references and NuGet setup
Adding via Designer, XAML, and C#
Adding items declaratively with
```
HierarchyNavigatorItem
```
Basic
```
ItemsSource
```
+
```
HierarchicalDataTemplate
```
binding
Applying built-in themes

📄 阅读： references/getting-started.md

程序集引用与NuGet设置
通过设计器、XAML和C#添加控件
使用
```
HierarchyNavigatorItem
```
声明式添加项
基础
```
ItemsSource
```
+
```
HierarchicalDataTemplate
```
绑定
应用内置主题

Populating Data

填充数据

📄 Read: references/populating-data.md

Binding to
```
ObservableCollection
```
business objects
```
HierarchicalDataTemplate
```
for multi-level hierarchies
Binding XML data via
```
XDocument
```
parsing
Binding via WCF service
On-demand / lazy item loading

📄 阅读： references/populating-data.md

绑定到
```
ObservableCollection
```
业务对象
使用
```
HierarchicalDataTemplate
```
处理多级层级结构
通过
```
XDocument
```
解析绑定XML数据
通过WCF服务绑定数据
按需/延迟加载项

Edit Mode & AutoComplete

编辑模式与自动补全

📄 Read: references/edit-mode-and-autocomplete.md

```
IsEnableEditMode
```
property to allow path typing
AutoComplete filter dropdown showing matching paths
Keyboard: Enter to confirm, Esc to cancel
Behavior when an invalid path is entered

📄 阅读： references/edit-mode-and-autocomplete.md

使用
```
IsEnableEditMode
```
属性允许路径输入
自动补全筛选下拉菜单显示匹配路径
键盘操作：按Enter确认，按Esc取消
输入无效路径时的行为

Navigation Features

导航功能

📄 Read: references/navigation-features.md

```
ShowToolTip
```
and per-item tooltips
Navigation history (back-arrow dropdown)
Refresh button and
```
HierarchyNavigatorRefreshButtonClick
```
event

ShowProgressBar()

CancelProgressBar()

with optional

TimeSpan

Keyboard navigation reference table
Restricting level selection

📄 阅读： references/navigation-features.md

```
ShowToolTip
```
与单个项的工具提示
导航历史（返回箭头下拉菜单）
刷新按钮与
```
HierarchyNavigatorRefreshButtonClick
```
事件

使用可选

TimeSpan

调用

ShowProgressBar()

CancelProgressBar()

键盘导航参考表
限制层级选择

Command Binding (MVVM)

命令绑定（MVVM）

📄 Read: references/command-binding.md

```
Command
```
property binding to
```
ICommand
```
/
```
DelegateCommand
```
```
SelectedItemCommand
```
pattern in ViewModel
Responding to selected item changes
Passing
```
HierarchyNavigatorItem
```
as
```
CommandParameter
```

📄 阅读： references/command-binding.md

将
```
Command
```
属性绑定到
```
ICommand
```
/
```
DelegateCommand
```
ViewModel中的
```
SelectedItemCommand
```
模式
响应选中项变更
将
```
HierarchyNavigatorItem
```
作为
```
CommandParameter
```
传递

Appearance & Themes

外观与主题

📄 Read: references/appearance-and-themes.md

```
ItemTemplate
```
with
```
HierarchicalDataTemplate
```
for custom item display
Customizing with Microsoft Expression Blend
Applying built-in themes via
```
SfSkinManager
```
Creating custom themes with ThemeStudio

📄 阅读： references/appearance-and-themes.md

结合
```
HierarchicalDataTemplate
```
使用
```
ItemTemplate
```
自定义项显示
使用Microsoft Expression Blend自定义外观
通过
```
SfSkinManager
```
应用内置主题
使用ThemeStudio创建自定义主题

Quick Start

快速入门

Declarative items (XAML)

声明式项（XAML）

xml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        x:Class="MyApp.MainWindow"
        Title="MainWindow" Height="350" Width="525">
  <Grid>
    <syncfusion:HierarchyNavigator x:Name="navigator"
                                   VerticalAlignment="Top"
                                   Height="30"
                                   Width="600">
      <syncfusion:HierarchyNavigator.Items>
        <syncfusion:HierarchyNavigatorItem Content="Syncfusion">
          <syncfusion:HierarchyNavigatorItem.Items>
            <syncfusion:HierarchyNavigatorItem Content="User Interface">
              <syncfusion:HierarchyNavigatorItem.Items>
                <syncfusion:HierarchyNavigatorItem Content="WPF"/>
                <syncfusion:HierarchyNavigatorItem Content="Silverlight"/>
              </syncfusion:HierarchyNavigatorItem.Items>
            </syncfusion:HierarchyNavigatorItem>
          </syncfusion:HierarchyNavigatorItem.Items>
        </syncfusion:HierarchyNavigatorItem>
      </syncfusion:HierarchyNavigator.Items>
    </syncfusion:HierarchyNavigator>
  </Grid>
</Window>

xml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        x:Class="MyApp.MainWindow"
        Title="MainWindow" Height="350" Width="525">
  <Grid>
    <syncfusion:HierarchyNavigator x:Name="navigator"
                                   VerticalAlignment="Top"
                                   Height="30"
                                   Width="600">
      <syncfusion:HierarchyNavigator.Items>
        <syncfusion:HierarchyNavigatorItem Content="Syncfusion">
          <syncfusion:HierarchyNavigatorItem.Items>
            <syncfusion:HierarchyNavigatorItem Content="User Interface">
              <syncfusion:HierarchyNavigatorItem.Items>
                <syncfusion:HierarchyNavigatorItem Content="WPF"/>
                <syncfusion:HierarchyNavigatorItem Content="Silverlight"/>
              </syncfusion:HierarchyNavigatorItem.Items>
            </syncfusion:HierarchyNavigatorItem>
          </syncfusion:HierarchyNavigatorItem.Items>
        </syncfusion:HierarchyNavigatorItem>
      </syncfusion:HierarchyNavigator.Items>
    </syncfusion:HierarchyNavigator>
  </Grid>
</Window>

Data-bound (XAML + MVVM)

数据绑定（XAML + MVVM）

xml

<syncfusion:HierarchyNavigator ItemsSource="{Binding HierarchyItems}"
                               Height="30" Width="600">
  <syncfusion:HierarchyNavigator.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
      <TextBlock Text="{Binding Name}" Margin="2,0"/>
    </HierarchicalDataTemplate>
  </syncfusion:HierarchyNavigator.ItemTemplate>
</syncfusion:HierarchyNavigator>

xml

<syncfusion:HierarchyNavigator ItemsSource="{Binding HierarchyItems}"
                               Height="30" Width="600">
  <syncfusion:HierarchyNavigator.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
      <TextBlock Text="{Binding Name}" Margin="2,0"/>
    </HierarchicalDataTemplate>
  </syncfusion:HierarchyNavigator.ItemTemplate>
</syncfusion:HierarchyNavigator>

C# code-behind

C#代码后置

csharp

using Syncfusion.Windows.Tools.Controls;

HierarchyNavigator navigator = new HierarchyNavigator { Height = 30 };
HierarchyNavigatorItem root = new HierarchyNavigatorItem { Content = "Syncfusion" };
HierarchyNavigatorItem child = new HierarchyNavigatorItem { Content = "WPF" };
root.Items.Add(child);
navigator.Items.Add(root);
this.Content = navigator;

csharp

using Syncfusion.Windows.Tools.Controls;

HierarchyNavigator navigator = new HierarchyNavigator { Height = 30 };
HierarchyNavigatorItem root = new HierarchyNavigatorItem { Content = "Syncfusion" };
HierarchyNavigatorItem child = new HierarchyNavigatorItem { Content = "WPF" };
root.Items.Add(child);
navigator.Items.Add(root);
this.Content = navigator;

Common Patterns

常见模式

Choose the right population approach

选择合适的填充方式

Static/known hierarchy → use declarative
```
HierarchyNavigatorItem
```
in XAML
Business object collection → use
```
ItemsSource
```
+
```
HierarchicalDataTemplate
```
XML or WCF data → parse to
```
ObservableCollection
```
, then bind to
```
ItemsSource
```
Large/lazy-loaded hierarchy → load children on demand via item expanded event

静态/已知层级结构 → 在XAML中使用声明式
```
HierarchyNavigatorItem
```
业务对象集合 → 使用
```
ItemsSource
```
+
```
HierarchicalDataTemplate
```
XML或WCF数据 → 解析为
```
ObservableCollection
```
，然后绑定到
```
ItemsSource
```
大型/延迟加载层级结构 → 通过项展开事件按需加载子项

Enable edit mode with AutoComplete

启用带自动补全的编辑模式

xml

<syncfusion:HierarchyNavigator IsEnableEditMode="True" .../>

User clicks the control to enter a path; a filtered dropdown suggests matching nodes. Press Enter to confirm, Esc to cancel.

xml

<syncfusion:HierarchyNavigator IsEnableEditMode="True" .../>

用户点击控件即可输入路径；筛选下拉菜单会建议匹配的节点。按Enter确认，按Esc取消。

Show progress bar during navigation

导航时显示进度条

csharp

// Show for default 500ms
navigator.ShowProgressBar();

// Show for custom duration
navigator.ShowProgressBar(new TimeSpan(0, 0, 0, 0, 1000));

// Cancel immediately
navigator.CancelProgressBar();

csharp

// 显示默认500毫秒
navigator.ShowProgressBar();

// 显示自定义时长
navigator.ShowProgressBar(new TimeSpan(0, 0, 0, 0, 1000));

// 立即取消
navigator.CancelProgressBar();

MVVM command binding

MVVM命令绑定

xml

<syncfusion:HierarchyNavigator Command="{Binding SelectedItemCommand}"
                               ItemsSource="{Binding Items}" .../>

The command fires when the selected breadcrumb item changes, passing the

HierarchyNavigatorItem

as parameter.

xml

<syncfusion:HierarchyNavigator Command="{Binding SelectedItemCommand}"
                               ItemsSource="{Binding Items}" .../>

当选定的面包屑项变更时，命令会触发，并将

HierarchyNavigatorItem

作为参数传递。

Key Properties & Methods

关键属性与方法

Property / Method	Description
`Items`	Declarative `HierarchyNavigatorItem` children
`ItemsSource`	Bound data collection
`ItemTemplate`	`HierarchicalDataTemplate` for item display
`IsEnableEditMode`	Enables path editing with AutoComplete
`ShowToolTip`	Enables tooltips on all items
`Command`	`ICommand` fired on selected item change
`ShowProgressBar()`	Displays progress bar (default 500ms)
`ShowProgressBar(TimeSpan)`	Displays progress bar for specified duration
`CancelProgressBar()`	Cancels visible progress bar
`CancelProgressBar(TimeSpan)`	Cancels progress bar after specified delay
`HierarchyNavigatorRefreshButtonClick`	Event fired when Refresh button is clicked

属性/方法	说明
`Items`	声明式 `HierarchyNavigatorItem` 子项
`ItemsSource`	绑定的数据集合
`ItemTemplate`	用于项显示的 `HierarchicalDataTemplate`
`IsEnableEditMode`	启用带自动补全的路径编辑功能
`ShowToolTip`	为所有项启用工具提示
`Command`	当选定项变更时触发的 `ICommand`
`ShowProgressBar()`	显示进度条（默认500毫秒）
`ShowProgressBar(TimeSpan)`	显示指定时长的进度条
`CancelProgressBar()`	立即取消可见的进度条
`CancelProgressBar(TimeSpan)`	延迟指定时间后取消进度条
`HierarchyNavigatorRefreshButtonClick`	点击刷新按钮时触发的事件