syncfusion-wpf-treeview

Syncfusion WPF TreeView（SfTreeView）の実装

Syncfusion WPF TreeView（SfTreeView）は、ノードを展開・折りたたみできるツリー構造で階層データを表示する、データ指向の強力なコントロールです。WPF アプリケーションで、フォルダー構造、組織階層、カテゴリーツリー、入れ子になった関係を表示するためによく使用されます。

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

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

• 階層データを表示する（フォルダー、カテゴリー、組織図など）
• 展開・折りたたみ可能なノードを実装する（親子関係を使用）
• ツリー構造での選択を有効にする（単一または複数の項目）
• ツリーノードにチェックボックス機能を追加する（状態を再帰的に管理）
• ドラッグ＆ドロップをサポートする（ツリー項目の並べ替えや再編成）
• ツリーノードの内容をインライン編集できるようにする
• 大規模な階層データセットのデータをオンデマンドで読み込む
• コレクションから TreeView にデータをバインドする（バインドモードまたはアンバインドモード）
• テンプレート、テーマ、視覚スタイルで外観をカスタマイズする
• 階層関係を視覚化するツリー線を表示する
• ツリーデータに対して動的に CRUD 操作を実行する

このスキルでは、基本的なセットアップから高度なカスタマイズまで、TreeView のすべての機能について包括的に説明します。

コンポーネントの概要

主な機能：

• データバインディングモード： バインド（データソース）とアンバインド（手動でノードを追加）
• 選択： キーボードナビゲーションに対応した単一、複数、拡張選択
• チェックボックス： 個別または再帰的な状態管理
• ドラッグ＆ドロップ： TreeView 内、または他のコントロールとの間で操作
• 編集： テンプレートと検証機能を使用したインライン編集
• オンデマンド読み込み： 大規模なデータセットのパフォーマンスを向上させる遅延読み込み
• カスタマイズ： 項目、展開ボタン、編集に対する完全なテンプレートサポート
• ツリー線： 階層構造を示す視覚的なインジケーター
• パフォーマンス： ビューの再利用を最適化し、フラットなレンダリングアーキテクチャを採用

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

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリの配置
• NuGet パッケージのセットアップ（Syncfusion.SfTreeView.WPF）
• 必要なアセンブリ参照
• 名前空間のインポート（XAML および C#）
• XAML での基本的な TreeView の作成
• プログラムによる TreeView の作成
• ライセンスの設定

データの設定

📄 参照： references/data-population.md

• アンバインドモード（TreeViewNode オブジェクト）
• バインドモード（階層データソースのバインディング）
• 入れ子になったコレクションに対する ChildPropertyName
• 複雑な階層に対する HierarchyPropertyDescriptors
• ItemTemplate の設定
• ItemsSource のバインディングパターン
• MVVM によるデータバインディング

選択

📄 参照： references/selection.md

• 選択モード（None、Single、SingleDeselect、Multiple、Extended）
• マウスとキーボードによる UI 選択
• プログラムによる選択（SelectedItem、SelectedItems）
• 選択状態のデータモデルへのバインディング
• 選択イベント（SelectionChanging、SelectionChanged）
• CurrentItem プロパティ
• キーボードナビゲーション

チェックボックス

📄 参照： references/checkboxes.md

• ツリー項目へのチェックボックスの追加
• CheckBoxMode（None、Default、Recursive）
• CheckedItems コレクションのバインディング
• 再帰的なチェックボックス状態の伝播
• プログラムによるチェックとチェック解除
• ItemTemplateDataContextType の設定
• バインドモードとアンバインドモードでのチェックボックス

編集

📄 参照： references/editing.md

• 編集の有効化（AllowEditing プロパティ）
• 編集のトリガー（F2 キー、シングルクリック、ダブルクリック）
• EditTemplate と EditTemplateSelector
• プログラムによる編集（BeginEdit、EndEdit）
• 編集イベントと検証
• 変更の確定と取り消し
• バインドモードとアンバインドモードでの編集モード

ドラッグ＆ドロップ

📄 参照: references/drag-and-drop.md

• ドラッグ＆ドロップの有効化（AllowDragging）
• 複数の選択項目のドラッグ
• ドロップ位置インジケーター
• ドラッグ＆ドロップイベント（ItemDragStarting、ItemDragOver、ItemDropping、ItemDropped）
• TreeView 間でのドラッグ
• 他のコントロール（ListView、DataGrid）へのドラッグ
• ドラッグ動作のカスタマイズ

ツリー構造の機能

📄 参照: references/tree-structure.md

• ノードの展開と折りたたみ
• AutoExpandMode プロパティ
• ExpandActionTrigger（Node、Expander）
• 遅延読み込みのためのオンデマンド読み込み
• ツリー線の表示（ShowLines プロパティ）
• 展開アイコンのテンプレートのカスタマイズ
• プログラムによる展開／折りたたみ
• ExpanderTemplate

外観とカスタマイズ

📄 参照: references/appearance.md

• 項目の高さのカスタマイズ
• ItemTemplate と ItemTemplateSelector
• ビジュアル状態とスタイル設定
• SfSkinManager によるテーマ設定
• カスタム展開アイコン
• インデントと間隔の調整
• 境界線と背景のカスタマイズ
• FullRowSelect プロパティ

CRUD 操作

📄 参照: references/crud-operations.md

• プログラムによるノードの追加
• TreeView からのノードの削除
• ノードの内容の更新
• バインドモードと非バインドモードでの CRUD
• データの更新と UI の更新
• コレクション変更の処理

クイックスタートの例

基本的な非バインド TreeView

<Window 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"
        xmlns:Engine="clr-namespace:Syncfusion.UI.Xaml.TreeView.Engine;assembly=Syncfusion.SfTreeView.WPF">
    <Grid>
        <syncfusion:SfTreeView x:Name="treeView" Width="300">
            <syncfusion:SfTreeView.Nodes>
                <Engine:TreeViewNode Content="Documents" IsExpanded="True">
                    <Engine:TreeViewNode.ChildNodes>
                        <Engine:TreeViewNode Content="Reports"/>
                        <Engine:TreeViewNode Content="Invoices"/>
                    </Engine:TreeViewNode.ChildNodes>
                </Engine:TreeViewNode>
                <Engine:TreeViewNode Content="Pictures" IsExpanded="True">
                    <Engine:TreeViewNode.ChildNodes>
                        <Engine:TreeViewNode Content="Vacation"/>
                        <Engine:TreeViewNode Content="Family"/>
                    </Engine:TreeViewNode.ChildNodes>
                </Engine:TreeViewNode>
            </syncfusion:SfTreeView.Nodes>
        </syncfusion:SfTreeView>
    </Grid>
</Window>

基本的なバインド TreeView

<syncfusion:SfTreeView x:Name="treeView"
                       ItemsSource="{Binding Folders}"
                       ChildPropertyName="SubFolders"
                       AutoExpandMode="RootNodes">
    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FolderName}" 
                       VerticalAlignment="Center"/>
        </DataTemplate>
    </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>

// ViewModel
public class ViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Folder> Folders { get; set; }
    
    public ViewModel()
    {
        Folders = new ObservableCollection<Folder>
        {
            new Folder 
            { 
                FolderName = "Documents",
                SubFolders = new ObservableCollection<Folder>
                {
                    new Folder { FolderName = "Reports" },
                    new Folder { FolderName = "Invoices" }
                }
            }
        };
    }
}

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

一般的なパターン

選択とチェックボックスを備えた TreeView

<syncfusion:SfTreeView x:Name="treeView"
                       ItemsSource="{Binding Items}"
                       ChildPropertyName="Children"
                       SelectionMode="Multiple"
                       CheckBoxMode="Recursive"
                       CheckedItems="{Binding CheckedItems}"
                       ItemTemplateDataContextType="Node">
    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" 
                          FocusVisualStyle="{x:Null}"/>
                <TextBlock Text="{Binding Content.Name}" 
                           Margin="25,0,0,0" 
                           VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>

オンデマンド読み込みを備えた TreeView

<syncfusion:SfTreeView x:Name="treeView"
                       ItemsSource="{Binding Items}"
                       ChildPropertyName="Children"
                       LoadOnDemandCommand="{Binding LoadOnDemandCommand}"/>

public class TreeViewViewModel
{
    public ICommand LoadOnDemandCommand { get; }

    public TreeViewViewModel()
    {
        LoadOnDemandCommand = new RelayCommand(LoadChildren);
    }

    private void LoadChildren(object param)
    {
        var node = param as TreeViewNode;

        if (node.ChildNodes.Count == 0)
        {
            node.PopulateChildNodes(new List<MyModel>
            {
                new MyModel { Name = "Child 1" },
                new MyModel { Name = "Child 2" }
            });

            node.IsExpanded = true;
        }
    }
}

public class MyModel
{
    public string Name { get; set; }

    // Used for hierarchical binding (important for TreeView)
    public List<MyModel> Children { get; set; }
}

ドラッグ＆ドロップを備えた TreeView

<syncfusion:SfTreeView x:Name="treeView"
                       ItemsSource="{Binding Items}"
                       ChildPropertyName="Children"
                       AllowDragging="True"
                       SelectionMode="Multiple"
                       ItemDropping="TreeView_ItemDropping"/>

private void TreeView_ItemDropping(object sender, TreeViewItemDroppingEventArgs e)
{
    // Validate drop operation
    if (!IsValidDrop(e.TargetNode, e.DraggingNodes))
    {
        e.Handled = true; // Cancel drop
    }
}

主なプロパティ

プロパティ	型	説明
ItemsSource	IEnumerable	バインドモードでのデータソース
ChildPropertyName	string	子コレクションのプロパティ名
SelectionMode	SelectionMode	Single、Multiple、Extended など
SelectedItem	object	現在選択されている項目
SelectedItems	ObservableCollection	複数の選択項目
CheckBoxMode	CheckBoxMode	None、Default、Recursive
CheckedItems	ObservableCollection	チェックされた項目のコレクション
AllowDragging	bool	ドラッグ＆ドロップを有効化
AllowEditing	bool	インライン編集を有効化
AutoExpandMode	AutoExpandMode	AllNodes、RootNodes、None
ExpandActionTrigger	ExpandActionTrigger	Node または Expander のクリック
ShowLines	bool	ツリー線を表示
ItemTemplate	DataTemplate	項目表示用テンプレート
EditTemplate	DataTemplate	編集モード用テンプレート
ExpanderTemplate	DataTemplate	展開アイコン用テンプレート

一般的なユースケース

ファイルエクスプローラー

アイコン付きでフォルダーとファイルの階層を表示し、ユーザーがドラッグ＆ドロップでファイルを移動、選択、管理できるようにします。

組織図

従業員ノードを使って会社の階層を表示し、選択や展開によってチーム構成を確認できるようにします。

カテゴリ管理

チェックボックス付きで商品カテゴリを表示して複数選択できるようにし、カテゴリツリーに対する一括操作を可能にします。

プロジェクト構成

大規模なプロジェクトではオンデマンド読み込みを使用してプロジェクトのファイルとフォルダーを表示し、ファイル名のインライン編集に対応します。

設定／環境設定ツリー

入れ子になった設定オプションをチェックボックス付きで表示し、機能を階層的に有効化／無効化できるようにします。

メニュー／ナビゲーションツリー

展開可能なセクションと視覚的なツリー線を備えた階層型ナビゲーションメニューを作成します。

---

次のステップ: 実装する機能に応じて、上記の該当するリファレンスドキュメントを参照してください。最初に getting-started.md で初期設定を行い、必要に応じて他の機能についても確認してください。