ما در این مقاله قصد داریم که به بررسی نحوه ساخت TabControl سفارشی با طرح یک مثال ساده برای درک بهتر آن در یک برنامه windows form درسی شارپ بپردازیم.

اجازه دهید که tabcontrol  شخصی خودمان را با استفاده از button ها و panel ها ایجاد کنیم.یک پروژه از نوع  C# Windows Forms Application در Visual Studio ایجاد کنید و نام آن را MyTabControl قرار میدهیم.ما از یک نمونه ساده button سفارشی استفاده میکنیم.

#Creating Customs Controls In C

قدم اول)به Project -> Add Class بروید و یک کلاس با نام ButtonX ایجاد کنید و کدهای زیر را در آن کپی و جایگذاری کنید.

خب ، شما میدانید که ما به یک Button به عنوان tab نیاز داریم ، اما هر بار اکشن کلیک بر روی آن دکمه اجرا میشود ، رنگ پس زمینه آن نباید تغییر کند اما بیاد داشته باشید که دکمه ها باید هر زمان که موس بر روی آن ها میرود یا از روی آن ها خارج می شود تغییر کنند.

در کد زیر ، این اکشن به وسیله متغییر بولین 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);  
        }  
    }  
}

قدم 2)به Project -> Add User Control بروید و نام آن را TabControlX قرار دهید.هر رنگ پس زمینه ای که که می خواهید به آن و اجزایی که میخواهیم به آن اضافه کنیم ، بدهید.

قدم 3)

1)Panel  به TabControlX اضافه کنید ، نام BackTopPanel  را به آن اختصاص دهید ، پراپرتی Dock  آن را به Top و Height  با مقدار 40 تنظیم کنید.

2)Panel به BackTopPanel اضافه کنید و نام آن را RibbonPanel قرار دهید و پراپرتی Dock  آن را به Top و Height  با مقدار 2 تنظیم کنید.

3)یک Panel به BackTopPanel اضافه کنید و نام آن را TabButtonPanel قرار دهید ، مقدار Anchor  را Left-Top-Right تنظیم کنید ، موقعیت آن را به (0,0) و یک عرض مشخص برای آن تنظیم کنید،که باعث میشود یه بخش اضافی در انتهای backTopPanel باقی بماند.

4)ToolStrip  به BackTopPanel بیفزایید ، پراپرتی Dock آن None قرار دهید ، مقدار Anchor  را Top-Right قرار دهید ، یک DropDownButton به ToolStrip افزوده شده اضافه کنید و رویداد DropDownOpening را برای آن اضافه کنید.

5)Panel  به TabControlX می افزاییم و نام TabPanel  رابه آن میدهیم و مقدار پراپرتی Dock را Fill قرار میدهیم.

قدم4) به Project -> Add User Control بروید و نام TabPanelControl را به آن بدهید.TabPanelControl برای نگه داشتن کامپوننت هایی که ما میخواهیم به Tab ها بیفزاییم استفاده میشود.

قدم 5)حالا ، ما نیاز داریم که یک لیست از Button هایی که نشان دهنده tab ها و یک لیست از کامپوننت های اضافه شده (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 b = new ButtonX();  
           b.DisplayText = tabtext;  
           b.Text = tabtext;  
           b.Size = new Size(130, 30);  
           b.Location = loc;  
           b.ForeColor = Color.White;  
           b.BXBackColor = Color.FromArgb(20, 120, 240);  
           b.MouseHoverColor = Color.FromArgb(20, 120, 240);  
           b.MouseClickColor1 = Color.FromArgb(20, 80, 200);  
           b.ChangeColorMouseHC = false;  
           b.TextLocation_X = 10;  
           b.TextLocation_Y = 9;  
           b.Font = this.Font;  
           b.Click += button_Click;  
           TabButtonPanel.Controls.Add(b);  
           buttonlist.Add(b);  
           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 که در index  انتخاب شده اند را اضافه میکند.()AddTab یک تابع است که ما آن را برای افزودن یک tab از 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 b = new ButtonX();  
            b.DisplayText = btstrlist[j];  
            b.Text = btstrlist[j];  
            b.Size = new Size(130, 30);  
            b.Location = new Point(0,0);  
            b.ForeColor = Color.White;  
            b.BXBackColor = Color.FromArgb(20, 120, 240);  
            b.MouseHoverColor = Color.FromArgb(20, 120, 240);  
            b.MouseClickColor1 = Color.FromArgb(20, 80, 200);  
            b.ChangeColorMouseHC = false;  
            b.TextLocation_X = 10;  
            b.TextLocation_Y = 9;  
            b.Font = this.Font;  
            b.Click += button_Click;  
            TabButtonPanel.Controls.Add(b);  
            buttonlist.Add(b);  
            selected_index++;  
        }  
        else if (j > 0)  
        {  
            ButtonX b = new ButtonX();  
            b.DisplayText = btstrlist[j];  
            b.Text = btstrlist[j];  
            b.Size = new Size(130, 30);  
            b.ForeColor = Color.White;  
            b.BXBackColor = Color.FromArgb(20, 120, 240);  
            b.MouseHoverColor = Color.FromArgb(20, 120, 240);  
            b.MouseClickColor1 = Color.FromArgb(20, 80, 200);  
            b.ChangeColorMouseHC = false;  
            b.TextLocation_X = 10;  
            b.TextLocation_Y = 9;  
            b.Font = this.Font;  
            b.Click += button_Click;  
            b.Location = new Point(buttonlist[j - 1].Size.Width + buttonlist[j - 1].Location.X, 0);  
            TabButtonPanel.Controls.Add(b);  
            buttonlist.Add(b);  
            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 t یک tab که در خارج از صفحه است را می آورد.

ابتدا تمام متن button را در btstrlist کپی میکند ، btstrlist را خالی میکند ، یک شی جدید ایجاد میکند و هر item را دوباره به buttonlist می افزاید.

تابع ()tbr_Click آیتم ها را به تعداد buttonlist از buttonlist و tabPanelCtrlList بیرون می کشد.

تابع ()RemoveTab ورودی ایتم از buttonlist  و tabPanelCtrlList را پاک میکند.

قدم 6)

1)الان پروژه خود را Debug  کنید.

2)TabControlX  را بکشید و در Form رها کنید.

3)شما میتوانید از پراپرتی ها برای دسترسی به رنگ ها استفاده کنید.

4)سورس کد برنامه را دانلود کنید.

5)برای افزودن tab فقط تابع ()AddTab را فراخوانی کنید.

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

برای افزودن کامپوننت به tabpage ، ابتدا یک شی از TabPanelControl ایجاد کنید و تمام کنترل ها را روی شی TabPanelControl ایجاد کنید و سپس آن را به عنوان پارامتر به تابع ()AddTab پاس دهید.

 TabPanelControl tpc = new TabPanelControl();  
         tpc.Dock = DockStyle.Fill;  
         RichTextBox rtb = new RichTextBox();  
         rtb.Dock = DockStyle.Fill;  
         tpc.Controls.Add(rtb);  
         tabControlX1.AddTab("RTB Tab ", tpc);

ما دو button و TabControlX را به Form1 اضافه کردیم.

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++;  
      } 

خروجی پایانی

آموزش سی شارپ