C# 樹形圖（TreeView）控件的使用

主要內容

樹形圖控件添加根節點、添加子節點、刪除選定節點
樹形圖點添加圖標
樹形圖的外觀：不顯示線條
讀取SQL Server數據（模擬數據庫讀?。?/li>
監聽事件：右擊菜單事件、判斷TreeView層級

環境

　　C# 語言

　　.Net Framework 4.5.2 框架

1. TreeView 控件的基本用法

　　為了演示相關用法，屬性方法。通過Visual Studio 2019創建一個WinForm項目，窗體如下所示。

1.1 添加根節點

/// <summary>
        /// 添加根節點
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_AddNodes_Click(object sender, EventArgs e)
        {
            //判斷輸入數值非空
            if (string.IsNullOrEmpty(txt_Name.Text.Trim()))
            {
                MessageBox.Show("要添加的節點名稱不能為空！");
                return;
            }
            //添加節點
            treeView_main.Nodes.Add(txt_Name.Text.Trim());
            txt_Name.Text = "";
        }

1.2添加子節點

/// <summary>
        /// 添加子節點
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_SonNodes_Click(object sender, EventArgs e)
        {
            //判斷節點非空
            if (string.IsNullOrEmpty(txt_Name.Text.Trim()))
            {
                MessageBox.Show("要添加的節點名稱不能為空！");
                return;
            }
            if (treeView_main.SelectedNode == null)
            {
                MessageBox.Show("請選擇要添加的節點！");
                return;
            }
            else
            {
                treeView_main.SelectedNode.Nodes.Add(txt_Name.Text.Trim());
                txt_Name.Text = "";
            }
        }

1.3刪除選中的節點

/// <summary>
        /// 刪除選定結點
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_NodeDelete_Click(object sender, EventArgs e)
        {
            if (treeView_main.SelectedNode == null)
            {
                MessageBox.Show("請選擇要刪除的節點！");
                return;
            }
            else
            {
                treeView_main.SelectedNode.Remove();
            }
        }
    }

2. 樹形圖（TreeView）添加節點圖標

右擊樹形圖屬性，發現節點與圖標相關的屬性如下：

ImageIndex：節點的默認圖像索引
ImageKey:節點默認圖像鍵
ImageList :從獲取節點圖像的ImageList鍵
SelectedImageIndex :選定節點默認圖像索引
SelectedImageIndex：選定節點默認圖像
StateImageList：樹形圖用于表示自定義狀態的ImageList（CheckBox選中狀態）
CheckBoxs：指示是否在節點旁顯示復選框

因此，我們定義樹形圖不同狀態下圖片包括：默認狀態、選定狀態、自定義狀態。

2.1 初始化Demo值

為了驗證節點，在窗口初始化事件添加方法loadTreeView()用于測試數據，測試數據代碼如下：

/// <summary>
        /// 初始化TreeView
        /// </summary>
        private void loadTreeView()
        {
            for (int i = 0; i < 5; i ++)
            {
                TreeNode treeNode_1 = new TreeNode();               //添加根節點
                treeNode_1.Text = "根節點" + i;               
                treeView_main.Nodes.Add(treeNode_1);
                //添加子節點
                for (int j = 0; j < 5; j ++)                        //添加二級節點
                {
                    TreeNode treeNode_2 = new TreeNode();
                    treeNode_2.Text = i + ":二級節點" + j;
                    treeNode_1.Nodes.Add(treeNode_2);
                }
            }
        }

運行后執行顯示如下：

2.2 綁定ImageList控件

頁面插入ImageList控件（更改合適的名字）。屬性點擊Images集合，在這里編輯圖標排序。

2.3. 設置不同圖標

方法1：直接在設計頁面修改樹形圖屬性。

綁定ImageList、ImageIndex/imagekey 、SelectedImageIndex/SelectedImageKey、checkBoxs、StateImageList。

如圖，默認狀態下，圖標為，選中狀態下，圖標為。復選框未選中時圖標為，目標選中時，圖標為。

對應的頁面的*.Designer.cs代碼（以ImageIndex和SelectedImageIndex為例）：

this.treeView_main.CheckBoxes = true;                               //是否復選框             
            this.treeView_main.Dock = System.Windows.Forms.DockStyle.Fill;      
            this.treeView_main.ImageIndex = 0;                                  //默認圖標索引
            this.treeView_main.ImageList = this.imageList1;                     //默認圖標綁定圖片列控件          
            this.treeView_main.Location = new System.Drawing.Point(0, 0);
            this.treeView_main.Name = "treeView_main";
            this.treeView_main.SelectedImageIndex = 1;                          //選中圖標對應索引
            this.treeView_main.Size = new System.Drawing.Size(200, 450);
            this.treeView_main.StateImageList = this.imageList_State;           //自定義狀態（復選框是否選中）狀態綁定圖片控件，（默認第0張，選中第1張）
            this.treeView_main.TabIndex = 0;

對應的頁面的*.Designer.cs代碼（以ImageKey和SelectedImageKey為例）：

this.treeView_main.CheckBoxes = true;                               //是否復選框             
            this.treeView_main.Dock = System.Windows.Forms.DockStyle.Fill;      
            this.treeView_main.ImageKey = "tree_add.png";                       //默認圖標名稱
            this.treeView_main.ImageList = this.imageList1;                     //默認圖標綁定圖片列控件          
            this.treeView_main.Location = new System.Drawing.Point(0, 0);
            this.treeView_main.Name = "treeView_main";
           this.treeView_main.SelectedImageKey = "tree_plus.png";              //選中圖標名稱
            this.treeView_main.Size = new System.Drawing.Size(200, 450);
            this.treeView_main.StateImageList = this.imageList_State;           //自定義狀態（復選框是否選中）狀態綁定圖片控件，（默認第0張，選中第1張）
            this.treeView_main.TabIndex = 0;

方法2：修改后臺代碼

后臺代碼如下：

/// <summary>
        /// 初始化加載方法
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Form1_Load(object sender, EventArgs e)
        {
            treeView_main.ImageList = imageList1;               //綁定圖片列控件
            treeView_main.ImageIndex = 0;                       //默認圖標
            treeView_main.SelectedImageIndex = 1;               //選中時圖標
            treeView_main.CheckBoxes = true;                    //是否復選框（默認情況第0個圖標，選中情況第1個圖標）
            treeView_main.StateImageList = imageList_State;     //用戶自定義狀態控件
            loadTreeView();             //初始化加載TreeView
        }

        /// <summary>
        /// 初始化TreeView
        /// </summary>
        private void loadTreeView()
        {
            for (int i = 0; i < 5; i ++)
            {
                TreeNode treeNode_1 = new TreeNode();               //添加根節點
                treeNode_1.Text = "根節點" + i;               
                treeView_main.Nodes.Add(treeNode_1);
                //添加子節點
                for (int j = 0; j < 5; j ++)                        //添加二級節點
                {
                    TreeNode treeNode_2 = new TreeNode();
                    treeNode_2.Text = i + ":二級節點" + j;
                    treeNode_1.Nodes.Add(treeNode_2);
                }
            }
        }

如圖，默認狀態下，圖標為，選中狀態下，圖標為。復選框未選中時圖標為，目標選中時，圖標為。

3. 樹形圖(TreeView)不顯示線條

如圖，樹形圖包含屬性LineColor，可以設置LineColor與背景色同色，則在視覺上能夠不顯示線條。

4. 樹形圖（TreeView）控件右擊菜單事件

假設需要完成的效果為，右擊樹形圖（TreeView）的節點，選擇對應的菜單欄。如下圖所示：

1. 從工具箱找到控件ContextMenuStrip，并將其拖拽至頁面。

2. 編輯ContextMenuStrip的選項。選擇ContextMenuStrip的items集合（位于該控件的【屬性】→【數據】→【items】）的“…”標志。

彈出項集合編輯器，可以看到一共有4種控件，每種控件的和方法都在編輯器的右邊，具體屬性和事件就不逐一舉例了。

3.樹形圖綁定右擊菜單。為樹形圖（treeView）選擇對應ContextMenuStrip菜單（位于該控件【屬性】→【行為】→【ContextMenuStrip】）。

5. 判斷樹形圖（TreeView）層級

顯示菜單欄當前層級的關鍵代碼如下:

treeView.SelectedNode.Level

可以在其點擊后判斷層級，代碼如下：

private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)
{
    int level = treeView1.SelectedNode.Level;
    MessageBox.Show(level.ToString());
}

參考網址

[1] C# TreeView 控件的綜合使用方法: https://blog.csdn.net/imxiangzi/article/details/81200517

[2]官網TreeNode說明： https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.forms.treenode?view=netframework-4.7.2

posted @ 2020-11-17 22:15 陸陸無為而治者閱讀(30391) 評論(0) 收藏舉報

刷新頁面返回頂部

lyj00436