How to add and remove “custom” tabs in C#

Question

I am making an application that requires tabs (tab-control) to be added or removed. I have done the add and remove for tabs fine, but I have custom buttons instead of using the tabs. (This button will go the the first tab page when clicked):

    //This will make it go to TAB 1
    private void button1_Click(object sender, EventArgs e)
    {
        tabControl1.SelectedIndex = 0; 
    }

   //This will change the MOUSEENTER to the correct image
    private void button1_MouseEnter(object sender, EventArgs e)
    {
        button1.MouseEnter += new EventHandler(button1_MouseEnter);
        this.button1.BackgroundImage = ((System.Drawing.Image)(Properties.Resources.Tab_Down));
    }
    //This will change the MOUSELEAVE to the correct image
    private void button1_MouseLeave(object sender, EventArgs e)
    {
        button1.MouseLeave += new EventHandler(button1_MouseLeave);
        this.button1.BackgroundImage = ((System.Drawing.Image)(Properties.Resources.Tab_Norm));
    }

However, how will I create it so when you click the "Add Tab" button it creates a new tab but it also creates a new button with tabControl1.SelectedIndex = 1; in it for example.

Edit

I have done this to add a new tab (to tabControl1):

 private void button2_Click(object sender, EventArgs e)
    {
        string title = "TabPage " + (tabControl1.TabCount + 1).ToString();
        TabPage myTabPage = new TabPage(title);
        tabControl1.TabPages.Add(myTabPage);
    }

This adds a new tab on top of the existing ones fine. But I how do I do it so that it also creates a new button with the properties of the button above but makes it so instead of tabControl1.SelectedIndex = 1; it does tabControl1.SelectedIndex = 3; and goes up every time I add a new tab? - Thanks

Answer 1

After a few updates here is a new version of my answer. It shows you how to

• Add a Button which adds a new TabPages and selects it
• Make the Tab control draw closing 'x' characters to the right of each tab, like Firefox or Visual Studio do it.

Make the add Button like you want it, maybe the Text="+" and the height like the tabs' height. It is automatically positioned on the tab. You may need to reposition it, if your Tab is moved or resized.

In the Form_Load event the Tab is set to OwnerDrawFixed and each page's text is append by a few blanks to make room for the closing x. The code creates a class variable closeX to hold the current x-rectangle and tests it in the MouseClick event.

Make sure to wire up the tabControl1_DrawItem and tabControl1_MouseClick events!

    private void cb_addPage_Click(object sender, EventArgs e)
    {
        string title = "TabPage " + (tabControl1.TabCount + 1).ToString() + "   ";
        TabPage myTabPage = new TabPage(title);
        tabControl1.TabPages.Add(myTabPage);
        tabControl1.SelectedTab = myTabPage;
    }


    private void Form1_Load(object sender, EventArgs e)
    {
        tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;
        cb_addPage.Top = tabControl1.Top;
        cb_addPage.Left = tabControl1.Right - cb_addPage.Width;
        foreach (TabPage tp in tabControl1.TabPages) tp.Text += "   ";
    }


    Rectangle closeX = Rectangle.Empty;

    private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
    {
        Size xSize = new Size(13,13);
        TabPage tp = tabControl3.TabPages[e.Index];
        e.DrawBackground();
        using (SolidBrush brush = new SolidBrush(e.ForeColor)  )
               e.Graphics.DrawString(tp.Text+ "   ", e.Font,  brush, 
                                     e.Bounds.X + 3, e.Bounds.Y + 4 );

        if (e.State == DrawItemState.Selected)
        {
           closeX = new Rectangle(
               e.Bounds.Right - xSize.Width, e.Bounds.Top, xSize.Width, xSize.Height);
           using (SolidBrush brush = new SolidBrush(Color.LightGray))
                e.Graphics.DrawString("x", e.Font, brush, 
                                       e.Bounds.Right - xSize.Width, e.Bounds.Y + 4);
        }

    }

    private void tabControl1_MouseClick(object sender, MouseEventArgs e)
    {
        if (closeX.Contains(e.Location))
            tabControl1.TabPages.Remove(tabControl1.SelectedTab);
    }

If you want to use an Image to adorn the tabs, include an ImageList with your form, load it with the Image(s) and if the close button is the 1st image, change the code like this:

    if (e.State == DrawItemState.Selected)
    {
        closeX = new Rectangle(e.Bounds.Right - xSize.Width - 3, 
                               e.Bounds.Top + 5, xSize.Width, xSize.Height);
        e.Graphics.DrawImage(imageList1.Images[0], closeX, 
                             new Rectangle(0,0,16,16), GraphicsUnit.Pixel );
    }

I append a screenshot of the Tab with a few pages

And one using this

close button image:

Update: Note that if your TabPage contains IDisposable objects you should make sure they all get disposed before you remove the page! See here for example code!