TreeView

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

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

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

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

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

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

目次から探す
  1. TreeViewにノードを追加する手順
  2. ノードの操作
  3. イベントハンドリング
  4. 応用例
  5. まとめ

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でノードをドラッグ＆ドロップする機能を実装するには、ItemDrag、DragEnter、DragDropイベントを使用します。

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

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にアイコンを設定し、ノードが選択されたときの背景色を変更しています。

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

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

まとめ

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

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

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

Back to top button