syncfusion-maui-treeview

Syncfusion® .NET MAUI TreeView の実装

Syncfusion .NET MAUI TreeView（SfTreeView）は、組織図、ファイルシステム、入れ子になった接続、複数レベルのデータなどの階層データ構造を表示するための、データ指向の強力なコントロールです。直感的な展開／折りたたみ機能、複数の選択モード、ドラッグ＆ドロップのサポート、幅広いカスタマイズオプションを備えています。

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

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

• 階層データの表示：組織構造、ファイルエクスプローラー、カテゴリツリー、入れ子になったメニュー
• インタラクティブなツリーナビゲーション：展開／折りたたみ可能なノード、複数レベルの閲覧
• データバインディングのシナリオ：ItemsSource を使用するバインドモード、またはノードを手動で作成する非バインドモード
• 選択要件：ツリー構造での単一選択、複数選択、または拡張選択
• カスタムツリー UI：テンプレート化されたノード、カスタムの展開アイコン、スタイル設定されたツリー項目
• 高度なツリー機能：ドラッグ＆ドロップによる並べ替え、フィルタリング、並べ替え、必要に応じた読み込み
• MVVM アプリケーション：コマンド、データバインディング、ViewModel パターンを使用する TreeView

コンポーネントの概要

主な機能：

• 最適化されたビュー再利用方式によるパフォーマンスの向上
• バインドモードと非バインドモードのデータ処理
• キーボードナビゲーションに対応した複数の選択モード
• 項目と展開アイコンのテンプレート化
• アニメーション付きの展開／折りたたみ
• ドラッグ＆ドロップによるノードの並べ替え
• フィルタリングと並べ替えのサポート
• 大規模なデータセットに対応した必要に応じた読み込み
• MVVM パターンのサポート
• RTL（右から左）表示のサポート
• 外観とスタイルのカスタマイズ

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

はじめに

📄 参照： references/getting-started.md

参照するタイミング： 初めて TreeView をセットアップするとき、初期設定、基本的な実装

内容：

• Syncfusion.Maui.TreeView NuGet パッケージのインストール
• MauiProgram.cs での Syncfusion ハンドラーの登録
• 基本的な TreeView コントロールの作成
• 最初の動作例

データバインディングとデータの設定

📄 参照： references/data-binding.md

参照するタイミング： TreeView へのデータ設定、バインドモードと非バインドモードの選択、階層データ構造の処理

内容：

• バインドモードと非バインドモードの比較
• データソースなしでのノード作成（TreeViewNode を使用する非バインドモード）
• ItemsSource を使用したデータバインディング（バインドモード）
• 複雑な階層構造に対する HierarchyPropertyDescriptors の使用
• ChildPropertyName の設定

選択

📄 参照： references/selection.md

参照するタイミング： ノード選択の実装、選択イベントの処理、選択時の外観のカスタマイズ

内容：

• 選択モード：Single、SingleDeselect、Multiple、Extended、None
• SelectedItem、CurrentItem、SelectedItems プロパティ
• SelectionChanging イベントと SelectionChanged イベント
• SelectionBackground と SelectionForeground のカスタマイズ
• キーボードナビゲーション（WinUI、MacCatalyst）

ノードの展開と折りたたみ

📄 参照： references/expand-collapse.md

参照するタイミング： 展開／折りたたみ動作の設定、展開イベントの処理、ノードの初期状態の設定

内容：

• AutoExpandMode のオプション（None、AllNodes、RootNodes、特定のレベル）
• ExpandActionTarget（Expander、Node）
• NodeExpanding イベントと NodeCollapsing イベント
• 個々のノードに対する IsExpanded プロパティ
• 展開／折りたたみのアニメーション

データ操作

📄 参照： references/filtering.md

参照するタイミング： ツリーノードのフィルタリング、検索機能の実装、条件に基づくノードの表示／非表示、ツリーノードの並べ替え、カスタムの並べ替えロジック、複数レベルの並べ替え

内容：

• FilterMode（None、Contains、StartsWith、Equals、Custom）
• フィルタリング API（FilterText、FilterPath、FilterPaths、AutoExpandOnFilter、FilteredItems）
• SortComparer の設定
• 各レベルでの階層データの並べ替え

スタイルと外観

📄 お読みください： references/styling-appearance.md

読むタイミング： 外観のカスタマイズ、間隔やインデントの調整、テーマの適用、ノードの外観のカスタマイズ、カスタム展開ボタンの作成、ツリー項目 UI の設計

内容：

• 項目の高さのカスタマイズ（ItemHeight プロパティ）
• ネストされたレベルのインデント設定
• リキッドグラス効果のスタイル設定
• 背景色と前景色
• 境界線とパディングのカスタマイズ
• テーマとの統合
• ItemTemplate、ExpanderTemplate のカスタマイズと、条件付きテンプレート用のテンプレートセレクター
• ItemTemplateContextType（Node または Data のバインディングコンテキスト）

チェックボックス

📄 お読みください： references/styling-appearance.md

読むタイミング： ツリーノードへのチェックボックス機能の追加、チェックされた項目の追跡、チェックボックスの動作と外観のカスタマイズ

内容：

• チェックボックスの有効化と状態管理
• CheckBoxMode の設定：
  • None
  • Individual
  • Recursive
• TreeViewNode.IsChecked プロパティ
• CheckedItems コレクションのバインディング
• GetCheckedNodes API
• CheckBoxPosition と CheckBoxWidth のカスタマイズ
• CheckActionTarget の設定
• 親子間での再帰的なチェックボックス同期
• バインドモードと非バインドモードでのチェックボックス処理
• SfCheckBox を使用したカスタムチェックボックステンプレート
• プログラムによるチェックボックス操作

MVVM サポート

📄 お読みください： references/mvvm-support.md

読むタイミング： MVVM パターンを使用した TreeView の実装、コマンドとデータバインディングの使用

内容：

• TreeView 用の ViewModel の設定
• INotifyPropertyChanged の実装
• ノード操作用のコマンドバインディング
• データバインドされた ItemsSource
• MVVM での選択項目のバインディング
• イベントからコマンドへのパターン

スクロールとナビゲーション

📄 お読みください： references/scrolling-navigation.md

読むタイミング： プログラムによるスクロール、項目を表示範囲に移動、キーボードナビゲーション

内容：

• すべてのオーバーロードを含む BringIntoView メソッド
• スクロール位置のオプション（Start、Center、End、MakeVisible）
• スクロールアニメーションの制御
• 水平スクロールの設定
• スクロールバーの表示制御
• キーボードナビゲーション（矢印キー、Tab）
• イベント（Loaded、ItemTapped、ItemDoubleTapped、ItemRightTapped）

項目の高さのカスタマイズ

📄 お読みください： references/item-height-customization.md

読むタイミング： ノードの高さのカスタマイズ、動的なサイズ設定、コンテンツに基づく測定

内容：

• 静的な ItemHeight プロパティ
• 項目ごとの高さを設定する QueryNodeSize イベント
• NodeSizeMode プロパティ（Dynamic または None）
• GetActualNodeHeight メソッド
• 動的な高さの計算

高度な機能

📄 お読みください： references/advanced-features.md

読むタイミング： 高度な TreeView 操作、イベント、右から左への表示、ノードの並べ替えの有効化、ドラッグ＆ドロップ機能の実装、ドラッグ動作のカスタマイズ、子ノードの遅延読み込みの実装、大規模なデータセットの処理、API ベースの階層構造、ノードへのチェックボックスの追加、チェック済み／未チェック状態の処理、再帰的なチェックボックスモード、空の状態の表示、データなし UI のカスタマイズ、テンプレートベースの空のビュー

内容：

• TreeViewNode のプログラムによる操作
• 右から左への表示（RTL）
• イベント
• ドラッグ＆ドロップ
• 必要に応じた読み込み
• チェックボックス、CheckBoxMode（Recursive、Cascade、None）、チェック済み項目のコレクションの操作
• 項目が空の状態のときのビューの表示
• テンプレートベースの空のビュー用の EmptyViewTemplate

トラブルシューティング

📄 お読みください： references/troubleshooting.md

読むタイミング： 問題のデバッグ、エラーの解決、最適化の問題への対処

内容：

• TreeView でよくある問題と解決策
• パフォーマンスのトラブルシューティング
• データバインディングの問題
• 選択が機能しない場合
• テンプレートのレンダリングに関する問題