syncfusion-wpf-treegrid

WPF TreeGrid（SfTreeGrid）の実装

Syncfusion® WPF TreeGrid コントロールの実装に関する包括的なガイドです。TreeGrid は、自己関連データや階層データを列付きのツリー構造で表示する、データ指向のコントロールです。このスキルでは、セットアップ、データバインディング、列の構成、インタラクティブ機能、データ操作、スタイル設定、高度な機能について詳しく説明します。

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

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

• グリッド内に、展開・折りたたみ可能なツリー構造で階層データを表示する
• 自己関連データをバインドする（単一のコレクション内の親子関係）
• ネストされたコレクションをバインドする（親子のオブジェクト階層）
• 大規模な階層データセットに対してオンデマンド読み込みを実装する
• さまざまな種類（テキスト、数値、日時、チェックボックス、コンボボックス）の列を構成する
• TreeGrid で検証機能付きの編集を有効にする
• 階層データの並べ替えとフィルタリングを実装する
• 選択動作をカスタマイズする（単一選択、複数選択、行、セル）
• データやノードレベルに基づいて条件付きスタイルを適用する
• TreeGrid の行で列をまたいでセルを結合する
• TreeGrid を Excel または PDF 形式にエクスポートする
• TreeGrid コントロールでMVVM パターンを実装する
• テーマ、スタイル、テンプレートを使って外観をカスタマイズする

このスキルは、階層データや親子データを、インタラクティブで多機能なグリッドインターフェイスで表示する必要がある WPF アプリケーションに不可欠です。

コンポーネントの概要

SfTreeGrid コントロールは、次の機能を提供します。

• 階層データの表示： 自己関連データとネストされたコレクションのバインディング
• 複数の列タイプ： テキスト、数値、DateTime、CheckBox、ComboBox、Hyperlink、テンプレート列
• インタラクティブ機能： 編集、選択、並べ替え、フィルタリング、ドラッグ＆ドロップ
• データ操作： 複数のフィルターレベル（Root、All、Extended）を使用した並べ替えとフィルタリング
• オンデマンド読み込み： ノードの展開時に子ノードを効率的に読み込み
• セルの結合： 列をまたいで隣接するセルを結合
• エクスポート機能： カスタマイズして Excel や PDF にエクスポート
• スタイル設定： 条件付きスタイル、テーマ、テンプレート、外観のカスタマイズ
• MVVM のサポート： コマンドバインディングに対応した完全な MVVM パターン
• パフォーマンス： 大規模なデータセット向けの仮想化と最適化された描画

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

はじめに

📄 参照： references/getting-started.md

初期セットアップと基本的な実装は、こちらから始めてください。

• アセンブリの配置（Syncfusion.SfGrid.WPF、Syncfusion.Data.WPF、Syncfusion.Shared.WPF）
• TreeGrid を使用した WPF プロジェクトの作成
• デザイナー、XAML、またはコードビハインドを使用したコントロールの追加
• TreeGrid の基本的なセットアップ例
• 自己関連データとネストされたコレクションの簡単なバインディング

データバインディングと操作

データバインディングの方法
📄 参照： references/data-binding.md

• 自己関連データのバインディング（ParentPropertyName、ChildPropertyName）
• ネストされたコレクションのバインディング（ChildPropertyName）
• IEnumerable コレクションのサポート
• 動的データオブジェクトのバインディング
• INotifyCollectionChanged と ObservableCollection
• データの更新とリフレッシュ

オンデマンド読み込み
📄 参照： references/load-on-demand.md

• オンデマンド読み込みに使用する RequestTreeItems イベント
• MVVM シナリオ向けの LoadOnDemandCommand
• ノードの展開時に子ノードを遅延読み込み
• 大規模なデータセットのパフォーマンス最適化
• ノード読み込み中のインジケーター表示

列の設定

列の基本
📄 参照： references/columns.md

• 列の追加と削除
• AutoGenerateColumns と手動設定の違い
• 列のプロパティ（HeaderText、MappingName、Width、Alignment）
• 列の表示設定と固定列
• 列の並べ替えとサイズ変更
• テキストの折り返しと省略表示

列の種類
📄 参照： references/column-types.md

• 文字列データ用の TreeGridTextColumn
• 数値形式を指定できる TreeGridNumericColumn
• 日付パターンを指定できる TreeGridDateTimeColumn
• ブール値用の TreeGridCheckBoxColumn
• ドロップダウン選択用の TreeGridComboBoxColumn
• クリック可能なリンク用の TreeGridHyperlinkColumn
• カスタムコンテンツ用の TreeGridTemplateColumn
• カスタム列の種類の作成

列のサイズ設定
📄 参照： references/column-sizing.md

• ColumnSizer プロパティ（Auto、Star、SizeToCells、SizeToHeader）
• コンテンツに合わせた列幅の自動調整
• 列幅の手動指定
• ユーザーによるサイズ変更の動作
• 最小幅と最大幅の制約
• 残りのスペースを埋める方法

インタラクティブ機能

編集
📄 参照： references/editing.md

• グリッドおよび列単位の AllowEditing プロパティ
• 編集モード（OnTap、OnDoubleTap）
• 編集のトリガーと編集テンプレートのカスタマイズ
• BeginEdit イベントと EndEdit イベント
• プログラムによる編集（BeginEdit、EndEdit、CurrentCell）
• 編集中の検証

データ検証
📄 参照： references/data-validation.md

• IDataErrorInfo 検証インターフェイス
• INotifyDataErrorInfo のサポート
• セル単位および行単位の検証
• カスタム検証ルール
• 検証エラー表示のカスタマイズ
• 検証エラーの処理

選択
📄 参照： references/selection.md

• SelectionMode（Single、Multiple、Extended、None）
• SelectionUnit（Row、Cell、Any）
• SelectedItem と SelectedItems のバインディング
• CurrentCell と CurrentItem のプロパティ
• プログラムによる選択
• SelectionChanged イベントと CurrentCellActivated イベント

セルの結合
📄 参照： references/merge-cells.md

• セルを結合する QueryCoveredRange イベント
• 固定範囲による列単位の結合
• セルの内容に基づく結合
• 結合セルでのナビゲーションと選択
• セル結合に関するパフォーマンス上の考慮事項

データ操作

並べ替え
📄 参照： references/sorting.md

• AllowSorting プロパティ（グリッド単位および列単位）
• 単一列および複数列での並べ替え
• 3 状態の並べ替え（昇順、降順、並べ替えなし）
• グリッド単位および列単位での初期並べ替え方向（InitialSortDirection）
• SortColumnDescriptions によるプログラムでの並べ替え
• IComparer によるカスタム並べ替えロジック
• SortColumnsChanging イベントと SortColumnsChanged イベント

フィルタリング
📄 参照： references/filtering.md

• 階層フィルタリング用の FilterLevel（Root、All、Extended）
• フィルター行を使った高度なフィルター UI
• FilterPredicates によるプログラムでのフィルタリング
• カスタムフィルターロジック
• FilterChanging イベントと FilterChanged イベント
• フィルターのクリアと保持

スタイルとカスタマイズ

条件付きスタイル設定
📄 参照： references/conditional-styling.md

• 行とセルのスタイル設定用の StyleSelector
• 行ベースの書式設定用の RowStyleSelector
• セルベースの書式設定用の CellStyleSelector
• データ値に基づく条件付き書式設定
• ノード階層に基づくスタイル設定（親と子）
• 行の交互スタイル

スタイルとテンプレート
📄 参照： references/styles-and-templates.md

• CellTemplate と EditTemplate のカスタマイズ
• 列ヘッダー用の HeaderTemplate
• 展開／折りたたみボタン用の ExpanderTemplate
• RowHeaderTemplate のカスタマイズ
• セルと行のスタイル設定
• ビジュアル状態とトリガー
• テーマとの統合

高度な機能

エクスポートと印刷
📄 参照： references/export-and-printing.md

• Excel へのエクスポート（ExportToExcel メソッド）
• PDF へのエクスポート（ExportToPdf メソッド）
• TreeGridExcelExportingOptions のカスタマイズ
• TreeGridPdfExportingOptions のカスタマイズ
• 印刷機能（PrintSettings）
• 特定のノードと列のエクスポート

高度な設定
📄 参照： references/advanced-features.md

• ICommand を使用した MVVM パターンの実装
• GridLinesVisibility のカスタマイズ（Both、Horizontal、Vertical、None）
• シリアル化と逆シリアル化（Save/LoadSettings）
• ローカライズ（ResourceManager）
• アクセシビリティ向け UI オートメーションのサポート
• テーマ設定（MaterialLight、MaterialDark、Office2019 など）
• ヘルパーメソッドとユーティリティ
• ノード選択用の NodeCheckBox
• ツールチップのカスタマイズ

クイックスタートの例

基本的な自己リレーショナル TreeGrid

<Window x:Class="TreeGridSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    
    <syncfusion:SfTreeGrid Name="treeGrid"
                           AutoGenerateColumns="True"
                           ChildPropertyName="Children"
                           ItemsSource="{Binding Employees}"
                           AllowSorting="True"
                           AllowFiltering="True"
                           AllowEditing="True">
    </syncfusion:SfTreeGrid>
</Window>

using Syncfusion.UI.Xaml.TreeGrid;
using System.Collections.ObjectModel;

namespace TreeGridSample
{
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Title { get; set; }
        public int ReportsTo { get; set; }
        public ObservableCollection<Employee> Children { get; set; }
        
        public Employee()
        {
            Children = new ObservableCollection<Employee>();
        }
    }

    public class EmployeeViewModel
    {
        public ObservableCollection<Employee> Employees { get; set; }
        
        public EmployeeViewModel()
        {
            Employees = new ObservableCollection<Employee>();
            PopulateData();
        }
        
        private void PopulateData()
        {
            var ceo = new Employee
            {
                EmployeeID = 1,
                FirstName = "Robert",
                LastName = "King",
                Title = "CEO"
            };
            
            ceo.Children.Add(new Employee
            {
                EmployeeID = 2,
                FirstName = "David",
                LastName = "Smith",
                Title = "VP of Sales",
                ReportsTo = 1
            });
            
            ceo.Children.Add(new Employee
            {
                EmployeeID = 3,
                FirstName = "Nancy",
                LastName = "Davolio",
                Title = "VP of Marketing",
                ReportsTo = 1
            });
            
            Employees.Add(ceo);
        }
    }
}

よく使われるパターン

パターン 1：自己リレーショナルデータのバインド

同じコレクション内に親子関係があるデータの場合：

public class Task
{
    public int TaskID { get; set; }
    public string TaskName { get; set; }
    public int? ParentID { get; set; }  // Nullable for root items
}

// ViewModel
public ObservableCollection<Task> Tasks { get; set; }

<syncfusion:SfTreeGrid Name="treeGrid"
                       ItemsSource="{Binding Tasks}"
                       ParentPropertyName="ParentID"
                       SelfRelationRootValue="-1"
                       ChildPropertyName="TaskID">
</syncfusion:SfTreeGrid>

パターン 2：入れ子になったコレクションのバインド

明示的な子コレクションを持つデータの場合：

public class Folder
{
    public string FolderName { get; set; }
    public ObservableCollection<Folder> SubFolders { get; set; }
}

<syncfusion:SfTreeGrid Name="treeGrid"
                       ItemsSource="{Binding Folders}"
                       ChildPropertyName="SubFolders">
</syncfusion:SfTreeGrid>

パターン 3：RequestTreeItems によるオンデマンド読み込み

親ノードの展開時に子ノードを読み込む大規模データセットの場合：

treeGrid.RequestTreeItems += TreeGrid_RequestTreeItems;

private void TreeGrid_RequestTreeItems(object sender, TreeGridRequestTreeItemsEventArgs e)
{
    if (e.ParentItem == null)
    {
        // Load root nodes
        e.ChildItems = GetRootNodes();
    }
    else
    {
        // Load child nodes for expanded parent
        var parent = e.ParentItem as BusinessObject;
        e.ChildItems = GetChildNodes(parent.ID);
    }
}

パターン 4：カスタム列の定義

<syncfusion:SfTreeGrid ItemsSource="{Binding Employees}"
                       AutoGenerateColumns="False">
    <syncfusion:SfTreeGrid.Columns>
        <syncfusion:TreeGridTextColumn HeaderText="Name" 
                                       MappingName="FirstName"
                                       Width="150"/>
        <syncfusion:TreeGridNumericColumn HeaderText="Age" 
                                          MappingName="Age"
                                          NumberDecimalDigits="0"/>
        <syncfusion:TreeGridDateTimeColumn HeaderText="DOB" 
                                           MappingName="DateOfBirth"
                                           Pattern="ShortDate"/>
        <syncfusion:TreeGridCheckBoxColumn HeaderText="Active" 
                                           MappingName="IsActive"/>
    </syncfusion:SfTreeGrid.Columns>
</syncfusion:SfTreeGrid>

パターン 5：MVVM コマンドのバインド

<syncfusion:SfTreeGrid ItemsSource="{Binding Employees}"
                       ChildPropertyName="Children">
    <syncfusion:SfTreeGrid.RecordContextMenu>
        <ContextMenu>
            <MenuItem Header="Add Child" 
                      Command="{Binding AddChildCommand}"
                      CommandParameter="{Binding}"/>
            <MenuItem Header="Delete" 
                      Command="{Binding DeleteCommand}"
                      CommandParameter="{Binding}"/>
        </ContextMenu>
    </syncfusion:SfTreeGrid.RecordContextMenu>
</syncfusion:SfTreeGrid>

public class EmployeeViewModel : INotifyPropertyChanged
{
    public ICommand AddChildCommand { get; set; }
    public ICommand DeleteCommand { get; set; }
    
    public EmployeeViewModel()
    {
        AddChildCommand = new RelayCommand(AddChild);
        DeleteCommand = new RelayCommand(Delete);
    }
    
    private void AddChild(object parameter)
    {
        var parent = parameter as Employee;
        if (parent != null)
        {
            parent.Children.Add(new Employee { /* ... */ });
        }
    }
}

主なプロパティ

基本プロパティ

プロパティ	型	説明
ItemsSource	IEnumerable	TreeGrid のデータソース
ChildPropertyName	string	子コレクションのプロパティ名
ParentPropertyName	string	親 ID のプロパティ名（自己リレーショナル）
SelfRelationRootValue	object	ルートレベルのノードを示す値
AutoGenerateColumns	bool	データソースから列を自動生成するかどうか
Columns	TreeGridColumns	列定義のコレクション

動作プロパティ

プロパティ	型	説明
AllowEditing	bool	セル編集の有効／無効
AllowSorting	bool	並べ替えの有効／無効
AllowFiltering	bool	フィルタリングの有効／無効
FilterLevel	FilterLevel	フィルタリング範囲（Root、All、Extended）
SelectionMode	GridSelectionMode	選択モード（Single、Multiple、Extended）
SelectionUnit	GridSelectionUnit	選択単位（Row、Cell、Any）
AutoExpandMode	AutoExpandMode	自動展開の動作（RootNodesExpanded、AllNodesExpanded）
ExpanderPosition	ExpanderPosition	展開／折りたたみアイコンの位置（Start、End）

表示プロパティ

プロパティ	型	説明
GridLinesVisibility	GridLinesVisibility	グリッド線の表示（Both、Horizontal、Vertical、None）
ColumnSizer	GridLengthUnitType	列の自動サイズ調整方法
RowHeight	double	各行の高さ
HeaderRowHeight	double	ヘッダー行の高さ
IndentColumnWidth	double	各階層のインデント幅

よくある使用例

1. 従業員階層の管理

展開可能なツリー形式で、従業員、マネージャー、部門を含む組織構造を表示します。

2. ファイルシステムブラウザー

大規模なディレクトリツリーではオンデマンド読み込みを使用し、階層構造でフォルダーとファイルを表示します。

3. プロジェクトタスク管理

プロジェクト、サブプロジェクト、タスク、サブタスクを、ステータスの追跡、編集、条件付きスタイル設定とともに表示します。

4. 部品表（BOM）

製品のアセンブリを、構成部品、サブコンポーネント、数量、コストとともに階層表示します。

5. カテゴリ別商品カタログ

商品カテゴリ、サブカテゴリ、商品を、フィルタリング、並べ替え、エクスポート機能とともに表示します。

6. 勘定科目階層

親子関係、残高計算、詳細へのドリルダウン機能を備えた財務勘定科目ツリーです。

7. 多段階承認ワークフロー

ステータスインジケーター、条件付きスタイル、インタラクティブな編集機能を使用して、承認階層を追跡します。

8. 地理データの整理

国、州、都市を階層形式で表示し、データの可視化機能とエクスポート機能を利用できます。

パフォーマンスに関する考慮事項

• オンデマンド読み込みを使用する：ノードの合計数が1,000を超えるデータセットの場合
• 仮想化を有効にする（デフォルトで有効）：スムーズなスクロールを実現します
• 頻繁に更新されるセルでは複雑なテンプレートを避ける
• 頻繁な再バインドではなく、ItemsSourceChangedイベントを使用する
• 複数のノードを変更する場合は更新を一括処理する
• 不要な場合はライブ更新（LiveNodeUpdateMode）を無効にする
• データ構造に応じてFilterLevelの選択を最適化する

関連するスキル

• Syncfusion WPFコンポーネントの実装 - 親ライブラリのスキル
• データグリッドの実装（今後対応予定）- フラットなグリッド形式でのデータ表示向け
• チャートの実装 - ../../data-visualization/implementing-charts/で利用可能です

サポートリソース

• 公式ドキュメント： https://help.syncfusion.com/wpf/treegrid/overview
• APIリファレンス： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.html
• コミュニティフォーラム： https://www.syncfusion.com/forums/wpf
• サンプルブラウザー： Syncfusion Control Panelから利用できます

---

次のステップ： 実装のニーズに応じて、上記の該当するリファレンスファイルに進んでください。初期設定にはgetting-started.mdから始め、必要に応じてデータバインディング、列の設定、高度な機能を確認してください。