syncfusion-wpf-tree-navigator

SfTreeNavigator の実装（WPF）

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• WPF でインプレースの階層型ドリルダウンナビゲーションを構築する（ポップアップや別パネルは使用しない）
• 独自の領域内で展開する複数レベルのツリー構造を表示する
• 製品／カテゴリ／部門の階層ナビゲーションを表示する
• パンくずリスト形式（Default）と積み重ねヘッダー形式（Extended）のどちらを使用するか選ぶ
• ネストされたビジネスオブジェクトのコレクションをツリーナビゲーターの項目にバインドする
• 現在選択されている項目をプログラムで設定または取得する

---

コンポーネントの概要

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)

アセンブリ： Syncfusion.SfTreeNavigator.WPF
名前空間： Syncfusion.Windows.Controls.Navigation
XAML プレフィックス： navigation:（一般的なエイリアス）

---

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

はじめに

📄 参照： references/getting-started.md

• アセンブリ参照と名前空間
• SfTreeNavigatorItem を使用した宣言型 XAML
• C# コードビハインドでの作成
• SfTreeNavigator のヘッダー
• SfSkinManager を使用したテーマ設定

項目の設定

📄 参照： references/populating-items.md

• Items コレクションを使用した宣言型の項目
• ItemsSource によるデータバインディング
• ObservableCollection を使用した Model と ViewModel のネスト
• HierarchicalDataTemplate を使用した ItemTemplate
• テンプレート内の ItemsSource バインディングによる子レベルの接続

ナビゲーションモード

📄 参照： references/navigation-mode.md

• Default — 上部に単一のヘッダーと戻るボタンを表示
• Extended — ルートから現在のレベルまでパンくずリスト形式のヘッダーを積み重ねて表示
• 各モードの使用場面
• Extended モードでの TreeNavigatorHeaderItem のスタイル設定
• 選択ガイド

ヘッダーと選択

📄 参照： references/header-and-selection.md

• HeaderTemplate — ルートヘッダーの外観をカスタマイズ
• Header — ルートのタイトル文字列
• SelectedItem — 選択された項目を取得／設定
• SelectedItem の TwoWay MVVM バインディング
• プログラムによる選択

---

クイックスタート

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;

---

一般的なパターン

シナリオ	方法
静的な階層	XAML で SfTreeNavigatorItem を宣言的にネストする
動的なデータ駆動型の階層	ItemsSource + HierarchicalDataTemplate
パンくずリストのパス全体を表示する	NavigationMode="Extended"
上部に戻るボタンを 1 つ表示する	NavigationMode="Default"
ルートタイトルのスタイルをカスタマイズする	HeaderTemplate
読み込み時に項目をあらかじめ選択する	ViewModel コンストラクターでの SelectedItem バインディング
選択に応答する	SelectedItem の TwoWay バインディング + ViewModel プロパティ

---

主なプロパティ

プロパティ	説明
Header	ナビゲーター上部に表示されるルートラベルのテキスト
HeaderTemplate	ルートヘッダーの外観をカスタマイズする DataTemplate
NavigationMode	Default（戻るボタン）または Extended（積み重ねヘッダー）
ItemsSource	データバインディングによる項目設定に使用するデータコレクション
ItemTemplate	データバインディングされた項目に使用する HierarchicalDataTemplate
SelectedItem	現在選択されている項目を取得または設定

SfTreeNavigatorItem のプロパティ：

プロパティ	説明
Header	項目に表示するテキスト
Items	子項目のコレクション