syncfusion-wpf-breadcrumb

WPF HierarchyNavigator（パンくずリスト）の実装

Syncfusion® WPF HierarchyNavigator コントロールを実装するためのガイドです。Windows エクスプローラーのアドレスバーに似たパンくずリスト／アドレスバーコンポーネントで、データバインディング、編集モード、履歴、プログレスバーに対応した階層パスのナビゲーションを実現します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• WPF でパンくずリスト／アドレスバーのナビゲーション UI を作成する
• HierarchyNavigator に宣言型の項目（HierarchyNavigatorItem）またはデータバインドされたコレクションを設定する
• HierarchicalDataTemplate を使用して、複数階層のビジネスオブジェクト、XML データ、または WCF から取得したデータを表示する
• ユーザーがナビゲーションパスを入力し、オートコンプリートを利用できるように編集モードを有効にする
• 戻る矢印のドロップダウンでナビゲーション履歴を表示する
• 更新ボタンを追加し、HierarchyNavigatorRefreshButtonClick を処理する
• ナビゲーション操作中にプログレスバーを表示／キャンセルする
• コマンドバインディング（MVVM パターン）で項目の選択に応答する
• ツールチップ、キーボードナビゲーション、組み込みテーマを適用する

コンポーネントの概要

HierarchyNavigator は、各セグメントがクリック可能な HierarchyNavigatorItem であるパンくずリストを表示します。セグメントをクリックすると、その子項目を一覧表示するポップアップが開き、下位階層へ移動できます。

必要なアセンブリ：

• Syncfusion.Tools.WPF
• Syncfusion.Shared.WPF

XAML 名前空間：

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

C# 名前空間：

using Syncfusion.Windows.Tools.Controls;

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリ参照と NuGet の設定
• デザイナー、XAML、C# での追加方法
• HierarchyNavigatorItem を使用した宣言型の項目の追加
• 基本的な ItemsSource と HierarchicalDataTemplate のバインディング
• 組み込みテーマの適用

データの設定

📄 参照： references/populating-data.md

• ビジネスオブジェクトの ObservableCollection へのバインディング
• 複数階層のデータ構造に対応する HierarchicalDataTemplate
• XDocument の解析による XML データのバインディング
• WCF サービス経由のバインディング
• 必要に応じた項目の読み込み（遅延読み込み）

編集モードとオートコンプリート

📄 参照： references/edit-mode-and-autocomplete.md

• パス入力を可能にする IsEnableEditMode プロパティ
• 一致するパスを表示するオートコンプリートのフィルタードロップダウン
• キーボード操作：Enter キーで確定、Esc キーでキャンセル
• 無効なパスを入力した場合の動作

ナビゲーション機能

📄 参照： references/navigation-features.md

• ShowToolTip と項目ごとのツールチップ
• ナビゲーション履歴（戻る矢印のドロップダウン）
• 更新ボタンと HierarchyNavigatorRefreshButtonClick イベント
• ShowProgressBar()／CancelProgressBar()（任意の TimeSpan を指定可能）
• キーボードナビゲーションの一覧表
• 選択可能な階層の制限

コマンドバインディング（MVVM）

📄 参照： references/command-binding.md

• Command プロパティを ICommand／DelegateCommand にバインドする方法
• ViewModel での SelectedItemCommand パターン
• 選択された項目の変更への対応
• HierarchyNavigatorItem を CommandParameter として渡す方法

外観とテーマ

📄 参照： references/appearance-and-themes.md

• カスタム項目表示のための HierarchicalDataTemplate を使用した ItemTemplate
• Microsoft Expression Blend を使用したカスタマイズ
• SfSkinManager による組み込みテーマの適用
• ThemeStudio を使用したカスタムテーマの作成

クイックスタート

宣言型の項目（XAML）

<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>

データバインド（XAML + MVVM）

<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# のコードビハインド

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;

よく使われるパターン

適切なデータ設定方法を選択する

• 静的／既知の階層 → XAML で宣言型の HierarchyNavigatorItem を使用する
• ビジネスオブジェクトのコレクション → ItemsSource と HierarchicalDataTemplate を使用する
• XML または WCF のデータ → ObservableCollection に解析してから、ItemsSource にバインドする
• 大規模／遅延読み込みの階層 → 項目の展開イベントで、必要に応じて子項目を読み込む

AutoComplete で編集モードを有効にする

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

ユーザーがコントロールをクリックしてパスを入力すると、一致するノードを候補として絞り込んだドロップダウンが表示されます。Enter を押して確定し、Esc を押してキャンセルします。

ナビゲーション中に進行状況バーを表示する

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

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

// Cancel immediately
navigator.CancelProgressBar();

MVVM コマンドバインディング

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

選択したパンくずリスト項目が変更されるとコマンドが実行され、パラメーターとして HierarchyNavigatorItem が渡されます。

主要なプロパティとメソッド

プロパティ／メソッド	説明
Items	宣言型の HierarchyNavigatorItem 子要素
ItemsSource	バインドされたデータコレクション
ItemTemplate	項目表示用の HierarchicalDataTemplate
IsEnableEditMode	AutoComplete によるパス編集を有効にします
ShowToolTip	すべての項目のツールチップを有効にします
Command	選択項目の変更時に実行される ICommand
ShowProgressBar()	進行状況バーを表示します（デフォルトは 500ms）
ShowProgressBar(TimeSpan)	指定した期間、進行状況バーを表示します
CancelProgressBar()	表示中の進行状況バーをキャンセルします
CancelProgressBar(TimeSpan)	指定した遅延後に進行状況バーをキャンセルします
HierarchyNavigatorRefreshButtonClick	更新ボタンがクリックされたときに発生するイベント