系统管理员质量保证 Visual Studio 2013 设计 / 图形架构师初学者开发 Visual Studio Windows .NET C#

在 C# 中创建您自己的 TabControl

Pritam Zope

4.39/5 (13投票s)

2018年3月9日

CPOL

3分钟阅读

31637

3355

在本文中，我们将仅使用 C# 中的 Button 和 Panel 创建一个简单的 TabControl。

让我们使用 Button 和 Panel 创建我们自己的简单 TabControl。在 Visual Studio 中创建一个 C# Windows Forms 应用程序项目。我将其命名为 MyTabControl。我使用了简单的自定义按钮，但您可以创建自己的按钮。

http://customcontrolsincs.blogspot.in/

Using the Code

步骤 1

转到项目 -> 添加类并输入名称 ButtonX 并复制/粘贴以下代码。嗯，您知道我们需要一个按钮作为选项卡，但是每当在该按钮上执行单击操作时，它的背景色不能更改，而其余按钮在鼠标进入或离开时必须更改。

在以下代码中，此操作使用 isChanged 布尔变量控制。根据需要更改以下代码以进行自定义。

using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using System.Data;
using System.Windows.Forms;

namespace MyTabControl
{
    public class ButtonX : System.Windows.Forms.Button
    {
        Color clr1;
        private Color color = Color.Teal;
        private Color m_hovercolor = Color.FromArgb(0, 0, 140);
        private Color clickcolor = Color.FromArgb(160, 180, 200);
        private int textX = 6;
        private int textY = -20;
        private String text = "_";
        private bool isChanged = true;

        public String DisplayText
        {
            get { return text; }
            set { text = value; Invalidate(); }
        }
        public Color BXBackColor
        {
            get { return color; }
            set { color = value; Invalidate(); }
        }

        public Color MouseHoverColor
        {
            get { return m_hovercolor; }
            set { m_hovercolor = value; Invalidate(); }
        }

        public Color MouseClickColor1
        {
            get { return clickcolor; }
            set { clickcolor = value; Invalidate(); }
        }

        public bool ChangeColorMouseHC
        {
            get { return isChanged; }
            set { isChanged = value; Invalidate(); }
        }


        public int TextLocation_X
        {
            get { return textX; }
            set { textX = value; Invalidate(); }
        }
        public int TextLocation_Y
        {
            get { return textY; }
            set { textY = value; Invalidate(); }
        }
        public ButtonX()
        {
            this.Size = new System.Drawing.Size(31, 24);
            this.ForeColor = Color.White;
            this.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
            this.Text = "_";
            text = this.Text;
        }

        //method mouse enter
        protected override void OnMouseEnter(EventArgs e)
        {
            base.OnMouseEnter(e);
            clr1 = color;
            color = m_hovercolor;
        }

        //method mouse leave
        protected override void OnMouseLeave(EventArgs e)
        {
            base.OnMouseLeave(e);
            if (isChanged)
            {
                color = clr1;
            }
        }

        protected override void OnMouseDown(MouseEventArgs mevent)
        {
            base.OnMouseDown(mevent);
            if (isChanged)
            {
                color = clickcolor;
            }
        }

        protected override void OnMouseUp(MouseEventArgs mevent)
        {
            base.OnMouseUp(mevent);
            if (isChanged)
            {
                color = clr1;
            }
        }

        protected override void OnPaint(PaintEventArgs pe)
        {
            base.OnPaint(pe);
            text = this.Text;
            if (textX == 100 && textY == 25)
            {
                textX = ((this.Width) / 3) + 10;
                textY = (this.Height / 2) - 1;
            }

            Point p = new Point(textX, textY);
            pe.Graphics.FillRectangle(new SolidBrush(color), ClientRectangle);
            pe.Graphics.DrawString(text, this.Font, new SolidBrush(this.ForeColor), p);
        }
    }
}

第二步

转到项目 -> 添加用户控件并输入名称 TabControlX。为其指定任何背景色以及我们将在其上添加的组件。

步骤 3

在 TabControlX 上添加 Panel，为其命名为 BackTopPanel，将 Dock 属性设置为 Top，将 Height 设置为 40。
在 BackTopPanel 上添加 Panel，为其命名为 RibbonPanel，将 Dock 属性设置为 Bottom，将 Height 设置为 2。
在 BackTopPanel 上添加 Panel，为其命名为 TabButtonPanel，将 Anchor 设置为 Left-Top-Right，将 Location 设置为 (0,0) 并设置特定的 Width，在末尾留出 BackTopPanel 的一些额外部分，并将 Height 设置为 30。
在 BackTopPanel 上添加 ToolStrip，将 Dock 属性设置为 None，将 Anchor 设置为 Top-Right，从添加的 ToolStrip 添加 DropDownButton，并为其添加 DropDownOpening 事件。
在 TabControlX 上添加 Panel，将其命名为 TabPanel，将 Dock 属性设置为 Fill。

步骤 4

转到项目 -> 添加用户控件并输入名称 TabPanelControl。TabPanelControl 用于保存我们要添加到选项卡的组件。下载源代码。

步骤 5

现在我们需要创建一个代表选项卡的按钮列表和一个添加的组件列表 (TabPanelControl)。

        int selected_index = -1;
        public List<ButtonX> buttonlist = new List<ButtonX> { };
        public List<TabPanelControl> tabPanelCtrlList = new List<TabPanelControl> { };

        void UpdateButtons()
        {
            if (buttonlist.Count > 0)
            {
                for (int i = 0; i < buttonlist.Count; i++)
                {
                    if (i == selected_index)
                    {
                        buttonlist[i].ChangeColorMouseHC = false;
                        buttonlist[i].BXBackColor = Color.FromArgb(20, 120, 240);
                        buttonlist[i].ForeColor = Color.White;
                        buttonlist[i].MouseHoverColor = Color.FromArgb(20, 120, 240);
                        buttonlist[i].MouseClickColor1 = Color.FromArgb(20, 120, 240);
                    }
                    else
                    {
                        buttonlist[i].ChangeColorMouseHC = true;
                        buttonlist[i].ForeColor = Color.White;
                        buttonlist[i].MouseHoverColor = Color.FromArgb(20, 120, 240);
                        buttonlist[i].BXBackColor = Color.FromArgb(40, 40, 40);
                        buttonlist[i].MouseClickColor1 = Color.FromArgb(20, 80, 200);
                    }
                }
            }
        }

        void createAndAddButton(string tabtext, TabPanelControl tpcontrol, Point loc)
        {
            ButtonX bx = new ButtonX();
            bx.DisplayText = tabtext;
            bx.Text = tabtext;
            bx.Size = new Size(130, 30);
            bx.Location = loc;
            bx.ForeColor = Color.White;
            bx.BXBackColor = Color.FromArgb(20, 120, 240);
            bx.MouseHoverColor = Color.FromArgb(20, 120, 240);
            bx.MouseClickColor1 = Color.FromArgb(20, 80, 200);
            bx.ChangeColorMouseHC = false;
            bx.TextLocation_X = 10;
            bx.TextLocation_Y = 9;
            bx.Font = this.Font;
            bx.Click += button_Click;
            TabButtonPanel.Controls.Add(bx);
            buttonlist.Add(bx);
            selected_index++;

            tabPanelCtrlList.Add(tpcontrol);
            TabPanel.Controls.Clear();
            TabPanel.Controls.Add(tpcontrol);

            UpdateButtons();
        }

        void button_Click(object sender, EventArgs e)
        {
            string btext = ((ButtonX)sender).Text;
            int index = 0, i;
            for (i = 0; i < buttonlist.Count; i++)
            {
                if (buttonlist[i].Text == btext)
                {
                    index = i;
                }
            }
            TabPanel.Controls.Clear();
            TabPanel.Controls.Add(tabPanelCtrlList[index]);
            selected_index = ((ButtonX)sender).TabIndex;

            UpdateButtons();
        }

        public void AddTab(string tabtext, TabPanelControl tpcontrol)
        {
            if (!buttonlist.Any())
            {
                createAndAddButton(tabtext, tpcontrol, new Point(0, 0));
            }
            else
            {
                createAndAddButton(tabtext, tpcontrol, 
                new Point(buttonlist[buttonlist.Count - 1].Size.Width + 
                buttonlist[buttonlist.Count - 1].Location.X, 0));
            }
        }

UpdateButtons() 函数仅更改按钮的颜色属性，而不是所选索引。createAndAddButton() 函数创建一个 ButtonX 类的的新对象，为其设置属性。还将一个 TabPanelControl 对象添加到 TabPanel。

在 button_Click 函数事件中，清除 TabPanel 的控件并添加来自所选索引的 tabPanelCtrlList 的控件。 AddTab() 是我们将要调用的函数，用于在 tabcontrol 上添加一个选项卡。

        private void toolStripButton1_DropDownOpening(object sender, EventArgs e)
        {
            toolStripDropDownButton1.DropDownItems.Clear();
            int mergeindex = 0;
            for (int i = 0; i < buttonlist.Count; i++)
            {
                ToolStripMenuItem tbr = new ToolStripMenuItem();
                tbr.Text = buttonlist[i].Text;
                tbr.MergeIndex = mergeindex;
                if (selected_index == i)
                {
                    tbr.Checked = true;
                }
                tbr.Click += tbr_Click;
                toolStripDropDownButton1.DropDownItems.Add(tbr);
                mergeindex++;
            }
        }

        List<string> btstrlist = new List<string> { };
        void BackToFront_SelButton()
        {
            int i = 0;

            TabButtonPanel.Controls.Clear();
            btstrlist.Clear();
            for (i = 0; i < buttonlist.Count; i++)
            {
                btstrlist.Add(buttonlist[i].Text);
            }

            buttonlist.Clear();

            for (int j = 0; j < btstrlist.Count; j++)
            {
                if (j == 0)
                {
                    ButtonX bx = new ButtonX();
                    bx.DisplayText = btstrlist[j];
                    bx.Text = btstrlist[j];
                    bx.Size = new Size(130, 30);
                    bx.Location = new Point(0,0);
                    bx.ForeColor = Color.White;
                    bx.BXBackColor = Color.FromArgb(20, 120, 240);
                    bx.MouseHoverColor = Color.FromArgb(20, 120, 240);
                    bx.MouseClickColor1 = Color.FromArgb(20, 80, 200);
                    bx.ChangeColorMouseHC = false;
                    bx.TextLocation_X = 10;
                    bx.TextLocation_Y = 9;
                    bx.Font = this.Font;
                    bx.Click += button_Click;
                    TabButtonPanel.Controls.Add(bx);
                    buttonlist.Add(bx);
                    selected_index++;
                }
                else if (j > 0)
                {
                    ButtonX bx = new ButtonX();
                    bx.DisplayText = btstrlist[j];
                    bx.Text = btstrlist[j];
                    bx.Size = new Size(130, 30);
                    bx.ForeColor = Color.White;
                    bx.BXBackColor = Color.FromArgb(20, 120, 240);
                    bx.MouseHoverColor = Color.FromArgb(20, 120, 240);
                    bx.MouseClickColor1 = Color.FromArgb(20, 80, 200);
                    bx.ChangeColorMouseHC = false;
                    bx.TextLocation_X = 10;
                    bx.TextLocation_Y = 9;
                    bx.Font = this.Font;
                    bx.Click += button_Click;
                    bx.Location = new Point(buttonlist[j - 1].Size.Width + 
                                  buttonlist[j - 1].Location.X, 0);
                    TabButtonPanel.Controls.Add(bx);
                    buttonlist.Add(bx);
                    selected_index++;
                }
            }
            TabPanel.Controls.Clear();
        }

        void tbr_Click(object sender, EventArgs e)
        {
            int i;
            for (int k = 0; k < ((ToolStripMenuItem)sender).MergeIndex; k++)
            {
                int j = 0;
                for (i = ((ToolStripMenuItem)sender).MergeIndex; i >= 0; i--)
                {
                    ButtonX but = buttonlist[i];
                    ButtonX temp = buttonlist[j];
                    buttonlist[i] = temp;
                    buttonlist[j] = but;

                    TabPanelControl uct1 = tabPanelCtrlList[i];
                    TabPanelControl tempusr = tabPanelCtrlList[j];
                    tabPanelCtrlList[i] = tempusr;
                    tabPanelCtrlList[j] = uct1;
                }
            }

            string btext = ((ToolStripMenuItem)sender).Text;
            BackToFront_SelButton();
            selected_index = 0;
            TabPanel.Controls.Add(tabPanelCtrlList[buttonlist[0].TabIndex]);
            UpdateButtons();
        }

        public void RemoveTab(int index)
        {
            if (index >= 0 && buttonlist.Count > 0 && index < buttonlist.Count)
            {
                buttonlist.RemoveAt(index);
                tabPanelCtrlList.RemoveAt(index);
                BackToFront_SelButton();
                if (buttonlist.Count > 1)
                {
                    if (index - 1 >= 0)
                    {
                        TabPanel.Controls.Add(tabPanelCtrlList[index - 1]);
                    }
                    else
                    {
                        TabPanel.Controls.Add(tabPanelCtrlList[(index - 1) + 1]);
                        selected_index = (index - 1) + 1;
                    }
                }
                selected_index = index - 1;

                if (buttonlist.Count == 1)
                {
                    TabPanel.Controls.Add(tabPanelCtrlList[0]);
                    selected_index = 0;
                }
            }
            UpdateButtons();
        }

BackToFront_SelButton() 将屏幕外的选项卡带到前面。首先，它将所有按钮的 text 复制到 btstrlist，清除 buttonlist，创建一个新对象，然后将每个项目再次添加到 buttonlist 中。

tbr_Click() 函数将 buttonlist 和 tabPanelCtrlList 中的项目交换到 buttonlist 的计数。 RemoveTab() 函数从 buttonlist 和 tabPanelCtrlList 中删除项目的条目。

步骤 6

现在调试您的项目。
将 TabControlX 拖放到 Form 上。
您可以使用属性来访问颜色。
下载源代码。
要添加选项卡，请调用函数 AddTab()。

    tabControlX1.AddTab("TabPage 1", null);

要将组件添加到选项卡页，请首先创建一个 TabPanelControl 对象，并将所有控件添加到 TabPanelControl 对象，然后将其作为参数传递给 AddTab() 函数，并删除一个选项卡，通过传递要删除的选项卡的索引来调用 RemoveTab(int index) 函数。

        int cnt = 1;
        private void button1_Click(object sender, EventArgs e)
        {
            tabControlX1.AddTab("Tab "+cnt, null);
            cnt++;
        }

        private void button2_Click(object sender, EventArgs e)
        {
            TabPanelControl tpc = new TabPanelControl();
            tpc.Dock = DockStyle.Fill;
            RichTextBox rtb = new RichTextBox();
            rtb.Dock = DockStyle.Fill;
            tpc.Controls.Add(rtb);
            tabControlX1.AddTab("Tab " + cnt, tpc);
            cnt++;
        }

就是这样！

下载源代码以查看 tabcontrol 的源代码，以及使用我们创建的 tabcontrol 的一点 Notepad 实现。这是上述过程的输出。