syncfusion-winforms-multicolumn-treeview

MultiColumn TreeView の実装

MultiColumnTreeView は、複数の列で階層データを表示する Windows Forms 用の高度なツリービューコントロールです。このコントロールは、ツリー構造の表示と追加のデータ列を組み合わせており、階層と関連情報の両方を表示する必要があるファイルエクスプローラー、組織図、データブラウザーに最適です。

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

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

• 複数の情報列を使って階層データを表示する
• メタデータ列を備えたファイルエクスプローラーやフォルダーブラウザーを構築する
• 従業員の詳細情報を含む組織図を作成する
• 階層カテゴリと仕様を含む製品カタログを表示する
• 親子関係を持つデータブラウザーを実装する
• チェックボックス、オプションボタン、インライン編集などのインタラクティブ機能を追加する
• パフォーマンス向上のため、大規模なデータセットをオンデマンドで読み込む
• 階層データを動的に並べ替え、フィルタリングする
• スタイル、色、テーマで外観をカスタマイズする
• 簡単にインポート／エクスポートできるよう、XML データにバインドする

コンポーネントの概要

MultiColumnTreeView が提供する機能は次のとおりです。

コアコンポーネント：

• TreeNodeAdv - テキスト、画像、サブアイテムを持つ個々のノード
• TreeColumnAdv - ヘッダーとスタイルを備えた列の定義
• TreeNodeAdvSubItem - 各ノードの追加列データ

主な機能：

• カスタマイズ可能なヘッダーを備えた複数列
• 深さに制限のない階層ノード構造
• インタラクティブな要素（チェックボックス、オプションボタン）
• 複数の選択モード
• 並べ替えとフィルタリング
• パフォーマンス向上のためのオンデマンド読み込み
• 柔軟なスタイルアーキテクチャ
• XML データバインディング
• イベント駆動型の操作

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

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリの配置
• デザイナーから MultiColumnTreeView を追加する
• コードから MultiColumnTreeView を追加する
• 列（TreeColumnAdv）を作成する
• ノードと子ノードを追加する
• 追加の列にサブアイテムを追加する
• 最初の動作するサンプル

ノードと列の管理

📄 参照： references/nodes-and-columns.md

• TreeNodeAdv のプロパティと機能
• TreeColumnAdv の設定
• ノードを動的に追加／削除する
• 階層構造を構築する
• SubItems と複数列のデータ
• ノードコレクションの操作
• 列幅の設定と自動調整

ノードの機能

📄 参照： references/node-features.md

• CheckBoxes と InteractiveCheckBoxes
• OptionButtons（ラジオボタンによる選択）
• ToolTips と HelpText
• 展開用のプラス／マイナス記号
• ルートラインと接続線
• ノード内のカスタムコントロール
• プリミティブ（LabelPrimitive、ImagePrimitive、CheckBoxPrimitive）
• 複数行のノードテキスト

選択と編集

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

• SelectionMode（Single、MultiSelectSameLevel、MultiSelectAll）
• SelectedNode と SelectedNodes のプロパティ
• ActiveNode の管理
• マウスによる選択（ドラッグ選択）
• キーボード検索機能
• ラベル編集（LabelEdit プロパティ）
• ノード編集イベント

データバインディング

📄 参照： references/data-binding.md

• XML ファイルからデータを読み込む
• ツリー構造を XML に保存する
• XML ノードのマッピング
• データバインディングのパターン
• ノードを動的に生成する
• エクスポートとインポートの操作

並べ替えとフィルタリング

📄 参照： references/sorting-and-filtering.md

• Sort メソッドと SortOrder
• SortType（Checkbox、Tag、Text）
• SortWithChildNode プロパティ
• テキスト比較の CompareOptions
• フィルターレベル（Root、All、Extended）
• フィルターデリゲートの作成
• RefreshFilter メソッド
• フィルターの解除

外観のカスタマイズ

📄 参照： references/appearance.md

• 枠線のスタイル（2D および 3D の枠線）
• 色のカスタマイズ（背景、前景、線）
• ヘッダーのカスタマイズ
• ノードと列の BaseStyles
• 選択したノードの外観
• サブ項目のスタイル設定
• ビジュアルスタイル（Office2016Colorful、White、Black、DarkGray）
• 画像リスト（LeftImage、RightImage、StateImage）

パフォーマンスの最適化

📄 参照： references/performance.md

• SuspendExpandRecalculate プロパティ
• BeginUpdate/EndUpdate パターン
• オンデマンド読み込みの実装
• 大規模データセットの処理
• メモリ管理のヒント
• パフォーマンスに関するベストプラクティス

イベント

📄 参照： references/events.md

• ノード選択イベント
• 展開／折りたたみイベント
• 編集イベント（BeforeEdit、AfterEdit）
• マウスおよびキーボードイベント
• カスタムイベント処理のパターン
• イベント購読の例

トラブルシューティング

📄 参照： references/troubleshooting.md

• よくある表示の問題
• パフォーマンスの最適化
• チェックボックスと選択に関する問題
• 並べ替えとフィルタリングに関する問題
• イベントとデータバインディングに関する問題
• 一般的なベストプラクティス

クイックスタートの例

国と首都を表示する MultiColumnTreeView の最小限の例を示します。

using System;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Tools.MultiColumnTreeView;

public class MultiColumnTreeViewExample : Form
{
    private MultiColumnTreeView multiColumnTreeView1;
    
    public MultiColumnTreeViewExample()
    {
        InitializeForm();
        SetupMultiColumnTreeView();
        PopulateData();
    }
    
    private void InitializeForm()
    {
        this.Text = "MultiColumnTreeView Example";
        this.Size = new System.Drawing.Size(600, 400);
    }
    
    private void SetupMultiColumnTreeView()
    {
        // Create control
        multiColumnTreeView1 = new MultiColumnTreeView();
        multiColumnTreeView1.Dock = DockStyle.Fill;
        
        // Add columns
        TreeColumnAdv countryColumn = new TreeColumnAdv();
        countryColumn.Text = "Country";
        countryColumn.Width = 200;
        
        TreeColumnAdv capitalColumn = new TreeColumnAdv();
        capitalColumn.Text = "Capital";
        capitalColumn.Width = 150;
        
        multiColumnTreeView1.Columns.AddRange(
            new TreeColumnAdv[] { countryColumn, capitalColumn });
        
        // Add to form
        this.Controls.Add(multiColumnTreeView1);
    }
    
    private void PopulateData()
    {
        // Create parent nodes
        TreeNodeAdv asiaNode = new TreeNodeAdv();
        asiaNode.Text = "Asia";
        
        TreeNodeAdv europeNode = new TreeNodeAdv();
        europeNode.Text = "Europe";
        
        // Create child nodes with subitems
        TreeNodeAdv indiaNode = new TreeNodeAdv();
        indiaNode.Text = "India";
        TreeNodeAdvSubItem delhiSubItem = new TreeNodeAdvSubItem();
        delhiSubItem.Text = "New Delhi";
        indiaNode.SubItems.Add(delhiSubItem);
        
        TreeNodeAdv chinaNode = new TreeNodeAdv();
        chinaNode.Text = "China";
        TreeNodeAdvSubItem beijingSubItem = new TreeNodeAdvSubItem();
        beijingSubItem.Text = "Beijing";
        chinaNode.SubItems.Add(beijingSubItem);
        
        TreeNodeAdv ukNode = new TreeNodeAdv();
        ukNode.Text = "United Kingdom";
        TreeNodeAdvSubItem londonSubItem = new TreeNodeAdvSubItem();
        londonSubItem.Text = "London";
        ukNode.SubItems.Add(londonSubItem);
        
        // Build hierarchy
        asiaNode.Nodes.AddRange(new TreeNodeAdv[] { indiaNode, chinaNode });
        europeNode.Nodes.Add(ukNode);
        
        multiColumnTreeView1.Nodes.AddRange(
            new TreeNodeAdv[] { asiaNode, europeNode });
    }
    
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new MultiColumnTreeViewExample());
    }
}

よくあるパターン

パターン 1：複数の列を持つノードの追加

// Create node for first column
TreeNodeAdv employeeNode = new TreeNodeAdv();
employeeNode.Text = "John Doe";

// Add subitems for additional columns
TreeNodeAdvSubItem departmentSubItem = new TreeNodeAdvSubItem();
departmentSubItem.Text = "Engineering";

TreeNodeAdvSubItem salarySubItem = new TreeNodeAdvSubItem();
salarySubItem.Text = "$85,000";

employeeNode.SubItems.Add(departmentSubItem);
employeeNode.SubItems.Add(salarySubItem);

multiColumnTreeView1.Nodes.Add(employeeNode);

パターン 2：チェックボックス付きのインタラクティブなノード

// Enable checkboxes for all nodes
multiColumnTreeView1.ShowCheckBoxes = true;
multiColumnTreeView1.InteractiveCheckBoxes = true;

// Or for individual nodes
TreeNodeAdv node = new TreeNodeAdv();
node.Text = "Select Me";
node.ShowCheckBox = true;
node.InteractiveCheckBox = true; // Parent reflects child states

パターン 3：ツリーデータの並べ替え

// Sort by text in ascending order
multiColumnTreeView1.Nodes.Sort(SortOrder.Ascending);

// Sort with child nodes
multiColumnTreeView1.Nodes[0].SortOrder = SortOrder.Descending;

パターン 4：ノードのフィルタリング

// Define filter delegate
public bool FilterNodes(object o)
{
    var node = o as TreeNodeAdv;
    if (node.SubItems.Count > 0)
    {
        int value = int.Parse(node.SubItems[0].Text);
        return value > 50000; // Filter by criteria
    }
    return false;
}

// Apply filter
multiColumnTreeView1.FilterLevel = FilterLevel.Extended;
multiColumnTreeView1.Filter = FilterNodes;
multiColumnTreeView1.RefreshFilter();

パターン 5：選択イベントの処理

// Subscribe to node selected event
multiColumnTreeView1.NodeSelected += (sender, e) =>
{
    if (multiColumnTreeView1.SelectedNode != null)
    {
        string nodeText = multiColumnTreeView1.SelectedNode.Text;
        MessageBox.Show($"Selected: {nodeText}");
    }
};

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

基本的なプロパティ

コントロールレベル：

• Columns - TreeColumnAdv オブジェクトのコレクション
• Nodes - ルートレベルの TreeNodeAdv コレクション
• SelectedNode - 現在選択されているノード（単一選択）
• SelectedNodes - 選択されているノードのコレクション（複数選択）
• ActiveNode - フォーカスがあるノード
• SelectionMode - Single、MultiSelectSameLevel、MultiSelectAll
• ShowCheckBoxes - すべてのノードにチェックボックスを表示
• ShowOptionButtons - すべてのノードにオプションボタンを表示
• ShowLines - ノード間の接続線を表示
• ShowRootLines - ルートノード間の線を表示
• ShowPlusMinus - 展開／折りたたみ記号を表示
• Style - ビジュアルテーマ（Office2016Colorful、White、Black、DarkGray）
• FilterLevel - フィルターの範囲（Root、All、Extended）
• Filter - フィルターデリゲート関数

ノードのプロパティ（TreeNodeAdv）：

• Text - ノードのテキスト内容
• SubItems - TreeNodeAdvSubItem オブジェクトのコレクション
• Nodes - 子ノードのコレクション
• Checked - チェックボックスの状態
• Optioned - オプションボタンの状態
• Expanded - 展開／折りたたみの状態
• ShowCheckBox - このノードにチェックボックスを表示
• ShowOptionButton - このノードにオプションボタンを表示
• LeftImageIndices - 左側の画像インデックス
• RightImageIndices - 右側の画像インデックス
• HelpText - ツールチップのテキスト

列のプロパティ（TreeColumnAdv）：

• Text - 列ヘッダーのテキスト
• Width - 列の幅（ピクセル単位）
• Background - ヘッダーの背景ブラシ
• TextColor - ヘッダーのテキスト色

基本的なメソッド

コントロールのメソッド：

• BeginUpdate() - パフォーマンス向上のため、画面更新を一時停止
• EndUpdate() - 画面更新を再開
• ExpandAll() - すべてのノードを展開
• CollapseAll() - すべてのノードを折りたたむ
• RefreshFilter() - 現在のフィルターを再適用
• Sort() - ノードを並べ替える

ノードのメソッド：

• Expand() - ノードを展開
• Collapse() - ノードを折りたたむ
• EnsureVisible() - ノードが表示される位置までスクロール

よくある使用例

使用例 1：ファイルエクスプローラー

ファイル名、サイズ、日付、種類を複数の列に表示し、ファイルシステムの階層を示します。ファイルの種類にはアイコンを使用し、大規模なディレクトリ構造には遅延読み込みを実装します。

使用例 2：組織図

従業員の名前、役職、部署、連絡先情報を含む会社の組織構造を表示します。選択にはチェックボックスを使用し、主要な連絡先の指定にはオプションボタンを使用します。

ユースケース 3：製品カタログ

価格、在庫、説明の列を含めて、製品カテゴリとサブカテゴリを表示します。価格帯または在庫状況によるフィルタリングを実装します。

ユースケース 4：プロジェクトタスクマネージャー

タスク名、担当者、期限、ステータスを含むプロジェクトタスクを階層構造で表示します。タスクの完了状況を追跡するためにチェックボックスを使用します。

ユースケース 5：データベーススキーマビューアー

データベースのテーブル、ビュー、列をツリー形式で表示し、データ型、制約、説明を追加の列に表示します。

アセンブリ要件

必須アセンブリ：

• Syncfusion.Grid.Base
• Syncfusion.Grid.Windows
• Syncfusion.Shared.Base
• Syncfusion.Shared.Windows
• Syncfusion.Tools.Base
• Syncfusion.Tools.Windows

NuGet によるインストール：

Install-Package Syncfusion.Tools.Windows

ベストプラクティス

1. 多数のノードを追加する際は、パフォーマンスを向上させるために BeginUpdate/EndUpdate を使用します
2. 大規模なデータセットでは、初期読み込み時間を短縮するために オンデマンド読み込みを有効にします
3. 多数のノードをより速く展開できるよう、SuspendExpandRecalculate を true に設定します
4. ユーザーの要件に基づいて、適切な選択モードを使用します
5. データの関係を明確にするため、わかりやすい列見出しを設定します
6. ユーザーの操作に適切に対応できるよう、イベントを処理します
7. プロフェッショナルな外観になるよう、BaseStyles を使用して 一貫したスタイルを適用します
8. 要件を満たすパフォーマンスを確認するため、大規模なデータセットでテストします
9. データを簡単に永続化できるよう、XML バインディングを使用します
10. すべてのデータを表示できるよう、不要になったら フィルターをクリアします

関連コンポーネント

• TreeView - 単一列のツリーコントロール
• DataGrid - 階層構造のないフラットなグリッド
• ListView - 列はありますが、ツリー構造ではないリスト

詳しいトラブルシューティングについては、references/troubleshooting.md を参照してください。