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

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!