[C#] TreeViewにノードを追加する方法

C#でTreeViewにノードを追加するには、まずTreeViewコントロールをフォームに配置し、ノードを追加するためのコードを記述します。

基本的な手順としては、TreeNodeオブジェクトを作成し、それをTreeViewのNodesコレクションに追加します。

例えば、TreeNode node = new TreeNode("ノード名");でノードを作成し、treeView1.Nodes.Add(node);でTreeViewに追加します。

子ノードを追加する場合は、親ノードのNodesコレクションに対して同様の操作を行います。

これにより、階層構造を持つツリービューを構築できます。

この記事でわかること
  • TreeViewにノードを追加する方法
  • ノードの操作に関する手法
  • イベントハンドリングの実装方法
  • TreeViewの応用例とカスタマイズ
  • パフォーマンス向上のためのテクニック

目次から探す

TreeViewにノードを追加する手順

TreeViewコントロールの配置

C#のWindowsフォームアプリケーションでTreeViewコントロールを使用するには、まずVisual Studioのデザイナーを使ってフォームにTreeViewを配置します。

以下の手順で行います。

  1. ツールボックスから TreeView を選択します。
  2. フォーム上にドラッグ&ドロップして配置します。
  3. プロパティウィンドウで必要に応じてサイズや名前を設定します。

TreeNodeオブジェクトの作成

TreeViewにノードを追加するためには、TreeNodeオブジェクトを作成する必要があります。

以下のサンプルコードでは、ノードを作成する方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // TreeNodeオブジェクトの作成
        TreeNode rootNode = new TreeNode("ルートノード"); // ルートノード
        TreeNode childNode = new TreeNode("子ノード"); // 子ノード
    }
}

このコードでは、”ルートノード”と”子ノード”という名前のTreeNodeオブジェクトを作成しています。

TreeViewへのノード追加

作成したTreeNodeオブジェクトをTreeViewに追加するには、Nodesプロパティを使用します。

以下のサンプルコードを参照してください。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // TreeNodeオブジェクトの作成
        TreeNode rootNode = new TreeNode("ルートノード");
        TreeNode childNode = new TreeNode("子ノード");
        // TreeViewにノードを追加
        treeView1.Nodes.Add(rootNode); // ルートノードを追加
        rootNode.Nodes.Add(childNode); // 子ノードをルートノードに追加
    }
}

このコードでは、treeView1という名前のTreeViewにルートノードとその子ノードを追加しています。

子ノードの追加方法

子ノードを追加する際は、親ノードのNodesプロパティを使用します。

以下のサンプルコードでは、複数の子ノードを追加する方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ルートノードの作成
        TreeNode rootNode = new TreeNode("ルートノード");
        treeView1.Nodes.Add(rootNode); // ルートノードを追加
        // 子ノードの作成と追加
        for (int i = 1; i <= 3; i++)
        {
            TreeNode childNode = new TreeNode($"子ノード {i}"); // 子ノード
            rootNode.Nodes.Add(childNode); // ルートノードに追加
        }
    }
}

このコードでは、”子ノード 1″から”子ノード 3″までの3つの子ノードをルートノードに追加しています。

これにより、階層構造を持つTreeViewが作成されます。

ノードの操作

ノードの削除

TreeViewからノードを削除するには、RemoveメソッドまたはRemoveAtメソッドを使用します。

以下のサンプルコードでは、選択されたノードを削除する方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ノードの削除ボタンのクリックイベント
        buttonDeleteNode.Click += (sender, e) =>
        {
            // 選択されたノードを取得
            TreeNode selectedNode = treeView1.SelectedNode;
            // ノードが選択されている場合
            if (selectedNode != null)
            {
                // ノードを削除
                treeView1.Nodes.Remove(selectedNode);
            }
        };
    }
}

このコードでは、ボタンがクリックされたときに選択されたノードを削除します。

ノードが選択されていない場合は、何も行いません。

ノードの更新

ノードの更新は、ノードのTextプロパティを変更することで行います。

以下のサンプルコードでは、選択されたノードのテキストを更新する方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ノードの更新ボタンのクリックイベント
        buttonUpdateNode.Click += (sender, e) =>
        {
            // 選択されたノードを取得
            TreeNode selectedNode = treeView1.SelectedNode;
            // ノードが選択されている場合
            if (selectedNode != null)
            {
                // ノードのテキストを更新
                selectedNode.Text = "更新されたノード";
            }
        };
    }
}

このコードでは、ボタンがクリックされたときに選択されたノードのテキストを”更新されたノード”に変更します。

ノードの検索

TreeView内のノードを検索するには、再帰的なメソッドを使用するのが一般的です。

以下のサンプルコードでは、特定のノードを検索する方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ノードの検索ボタンのクリックイベント
        buttonSearchNode.Click += (sender, e) =>
        {
            string searchText = "検索するノード"; // 検索するノードのテキスト
            TreeNode foundNode = FindNode(treeView1.Nodes, searchText);
            if (foundNode != null)
            {
                // ノードが見つかった場合
                treeView1.SelectedNode = foundNode; // 選択状態にする
                treeView1.Focus(); // TreeViewにフォーカスを当てる
            }
        };
    }
    // ノードを再帰的に検索するメソッド
    private TreeNode FindNode(TreeNodeCollection nodes, string searchText)
    {
        foreach (TreeNode node in nodes)
        {
            if (node.Text == searchText)
            {
                return node; // ノードが見つかった場合
            }
            // 子ノードを再帰的に検索
            TreeNode foundNode = FindNode(node.Nodes, searchText);
            if (foundNode != null)
            {
                return foundNode; // 子ノードで見つかった場合
            }
        }
        return null; // 見つからなかった場合
    }
}

このコードでは、指定したテキストを持つノードをTreeView内で検索し、見つかった場合はそのノードを選択状態にします。

再帰的なメソッドFindNodeを使用して、すべてのノードを探索します。

イベントハンドリング

ノード選択イベント

TreeViewのノードが選択されたときに発生するイベントを処理するには、AfterSelectイベントを使用します。

以下のサンプルコードでは、ノードが選択されたときにそのノードのテキストを表示する方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ノード選択イベントのハンドラを追加
        treeView1.AfterSelect += (sender, e) =>
        {
            // 選択されたノードのテキストを表示
            MessageBox.Show($"選択されたノード: {e.Node.Text}");
        };
    }
}

このコードでは、ノードが選択されると、そのノードのテキストがメッセージボックスに表示されます。

ノード展開・折りたたみイベント

ノードが展開または折りたたまれたときに発生するイベントを処理するには、AfterExpandおよびAfterCollapseイベントを使用します。

以下のサンプルコードでは、ノードが展開または折りたたまれたときにメッセージを表示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ノード展開イベントのハンドラを追加
        treeView1.AfterExpand += (sender, e) =>
        {
            MessageBox.Show($"展開されたノード: {e.Node.Text}");
        };
        // ノード折りたたみイベントのハンドラを追加
        treeView1.AfterCollapse += (sender, e) =>
        {
            MessageBox.Show($"折りたたまれたノード: {e.Node.Text}");
        };
    }
}

このコードでは、ノードが展開されるとそのノードのテキストが、折りたたまれるとそのノードのテキストがメッセージボックスに表示されます。

ノードのドラッグ&ドロップ

TreeViewでノードをドラッグ&ドロップする機能を実装するには、ItemDragDragEnterDragDropイベントを使用します。

以下のサンプルコードでは、ノードをドラッグして別のノードの下にドロップする方法を示します。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ドラッグ開始イベントのハンドラを追加
        treeView1.ItemDrag += (sender, e) =>
        {
            // ドラッグを開始
            DoDragDrop(e.Item, DragDropEffects.Move);
        };
        // ドラッグエンタイベントのハンドラを追加
        treeView1.DragEnter += (sender, e) =>
        {
            if (e.Data.GetDataPresent(typeof(TreeNode)))
            {
                e.Effect = DragDropEffects.Move; // 移動可能
            }
        };
        // ドラッグドロップイベントのハンドラを追加
        treeView1.DragDrop += (sender, e) =>
        {
            if (e.Data.GetDataPresent(typeof(TreeNode)))
            {
                TreeNode draggedNode = (TreeNode)e.Data.GetData(typeof(TreeNode));
                TreeNode targetNode = treeView1.GetNodeAt(e.X, e.Y);
                if (targetNode != null && draggedNode != targetNode)
                {
                    // ドラッグしたノードをターゲットノードの子ノードとして追加
                    targetNode.Nodes.Add((TreeNode)draggedNode.Clone());
                    draggedNode.Remove(); // 元のノードを削除
                }
            }
        };
    }
}

このコードでは、ノードをドラッグして別のノードの下にドロップすることができます。

ドラッグしたノードはターゲットノードの子ノードとして追加され、元のノードは削除されます。

これにより、TreeView内でのノードの移動が可能になります。

応用例

データベースからのデータをTreeViewに表示

データベースから取得したデータをTreeViewに表示することで、階層的な情報を視覚的に表現できます。

以下のサンプルコードでは、SQL Serverからデータを取得し、TreeViewに表示する方法を示します。

using System.Data.SqlClient;
partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        LoadDataFromDatabase();
    }
    private void LoadDataFromDatabase()
    {
        string connectionString = "your_connection_string"; // 接続文字列
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            connection.Open();
            string query = "SELECT ParentId, Name FROM YourTable"; // データ取得クエリ
            SqlCommand command = new SqlCommand(query, connection);
            SqlDataReader reader = command.ExecuteReader();
            // ルートノードを作成
            TreeNode rootNode = new TreeNode("データベースのデータ");
            treeView1.Nodes.Add(rootNode);
            while (reader.Read())
            {
                int parentId = reader.GetInt32(0);
                string name = reader.GetString(1);
                TreeNode childNode = new TreeNode(name);
                rootNode.Nodes.Add(childNode); // ルートノードに追加
            }
        }
    }
}

このコードでは、データベースから親IDと名前を取得し、TreeViewにノードを追加しています。

接続文字列やクエリは適宜変更してください。

ファイルシステムの構造をTreeViewで表現

ファイルシステムの構造をTreeViewで表示することで、ユーザーがファイルやフォルダを簡単にナビゲートできるようになります。

以下のサンプルコードでは、指定したディレクトリの内容をTreeViewに表示します。

using System.IO;
partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        LoadFileSystem("C:\\YourDirectory"); // 表示するディレクトリ
    }
    private void LoadFileSystem(string path)
    {
        DirectoryInfo directoryInfo = new DirectoryInfo(path);
        TreeNode rootNode = new TreeNode(directoryInfo.Name);
        treeView1.Nodes.Add(rootNode);
        LoadSubDirectories(directoryInfo.GetDirectories(), rootNode);
    }
    private void LoadSubDirectories(DirectoryInfo[] directories, TreeNode parentNode)
    {
        foreach (var directory in directories)
        {
            TreeNode directoryNode = new TreeNode(directory.Name);
            parentNode.Nodes.Add(directoryNode);
            LoadSubDirectories(directory.GetDirectories(), directoryNode); // 再帰的にサブディレクトリを追加
        }
    }
}

このコードでは、指定したディレクトリの内容を再帰的に取得し、TreeViewに表示します。

LoadFileSystemメソッドで指定したパスを変更することで、任意のディレクトリを表示できます。

ユーザーインターフェースのカスタマイズ

TreeViewの外観や動作をカスタマイズすることで、ユーザーにとって使いやすいインターフェースを提供できます。

以下のサンプルコードでは、ノードのアイコンを設定し、選択時の色を変更する方法を示します。

using System.Drawing;
partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        CustomizeTreeView();
    }
    private void CustomizeTreeView()
    {
        // イメージリストの作成
        ImageList imageList = new ImageList();
        imageList.Images.Add("folder", Image.FromFile("folder_icon.png")); // フォルダアイコン
        imageList.Images.Add("file", Image.FromFile("file_icon.png")); // ファイルアイコン
        treeView1.ImageList = imageList;
        // ノードの追加
        TreeNode folderNode = new TreeNode("フォルダ", 0, 0); // フォルダアイコン
        TreeNode fileNode = new TreeNode("ファイル", 1, 1); // ファイルアイコン
        treeView1.Nodes.Add(folderNode);
        folderNode.Nodes.Add(fileNode);
        // 選択時の色を変更
        treeView1.DrawMode = TreeViewDrawMode.OwnerDrawAll;
        treeView1.DrawNode += (sender, e) =>
        {
            if (e.State.HasFlag(TreeNodeStates.Selected))
            {
                e.Graphics.FillRectangle(Brushes.LightBlue, e.Bounds); // 選択時の背景色
            }
            e.DrawDefault = true; // デフォルトの描画を行う
        };
    }
}

このコードでは、TreeViewにアイコンを設定し、ノードが選択されたときの背景色を変更しています。

アイコンのファイルパスは適宜変更してください。

これにより、視覚的にわかりやすいインターフェースを提供できます。

よくある質問

ノードを動的に追加するにはどうすればいいですか?

ノードを動的に追加するには、TreeNodeオブジェクトを作成し、Nodesプロパティを使用してTreeViewに追加します。

以下の手順で行います。

  1. 新しいTreeNodeオブジェクトを作成します。
  2. 追加したい親ノードのNodesコレクションに新しいノードを追加します。
TreeNode newNode = new TreeNode("新しいノード");
treeView1.Nodes.Add(newNode); // ルートノードに追加

ノードの選択状態を取得する方法は?

選択されているノードの情報は、SelectedNodeプロパティを使用して取得できます。

このプロパティは、現在選択されているノードを返します。

以下のように使用します。

TreeNode selectedNode = treeView1.SelectedNode;
if (selectedNode != null)
{
    string nodeName = selectedNode.Text; // 選択されたノードのテキストを取得
}

TreeViewのパフォーマンスを向上させるには?

TreeViewのパフォーマンスを向上させるためには、以下の方法を検討できます。

  • ノードの遅延読み込み: 大量のノードを一度に追加するのではなく、必要に応じてノードを追加します。

ノードが展開されたときに子ノードを読み込むようにします。

  • BeginUpdateEndUpdateの使用: ノードの追加や削除を行う前にBeginUpdateメソッドを呼び出し、操作が完了したらEndUpdateメソッドを呼び出すことで、描画の更新を一時的に停止し、パフォーマンスを向上させます。
treeView1.BeginUpdate();
// ノードの追加や削除を行う
treeView1.EndUpdate();

これらの方法を活用することで、TreeViewのパフォーマンスを改善し、ユーザー体験を向上させることができます。

まとめ

この記事では、C#のWindowsフォームにおけるTreeViewの基本的な使い方から、ノードの追加、削除、更新、検索、さらにはイベントハンドリングや応用例まで幅広く解説しました。

特に、データベースからのデータ表示やファイルシステムの構造を表現する方法は、実際のアプリケーション開発において非常に役立つ技術です。

これらの知識を活用して、よりインタラクティブで使いやすいユーザーインターフェースを作成することに挑戦してみてください。

当サイトはリンクフリーです。出典元を明記していただければ、ご自由に引用していただいて構いません。

関連カテゴリーから探す

  • URLをコピーしました!
目次から探す