Customizing a TabControl for the Closing of Individual Tabs

Question

My scenario is the following:

I am working on a winforms application in C# that has a button inside the main page of a tabcontrol that will generate another tabpage each time that it is clicked. Each new tabpage will contain a layout defined by a user control.

My Questions are:

1. How can I allow the user to then close one of the tabs that were created dynamically at runtime?

2. How might I go about modifying the tabcontrol itself so that it has a small 'X' in each tab that the user may click on in order to close that particular tab? (Like Firefox has)

3. How can I expose the SelectedIndex property of the tabcontrol to the user control if I want to close the tab with a button inside the user control instead?

Answer 1

I found this code and was very helpful to me:

private void tabControl_MouseUp(object sender, MouseEventArgs e)
{
    // check if the right mouse button was pressed
    if(e.Button == MouseButtons.Right)
    {
        // iterate through all the tab pages
        for(int i = 0; i < tabControl1.TabCount; i++)
        {
            // get their rectangle area and check if it contains the mouse cursor
            Rectangle r = tabControl1.GetTabRect(i);
            if (r.Contains(e.Location))
            {
                // show the context menu here
                System.Diagnostics.Debug.WriteLine("TabPressed: " + i);
             }
        }
    }
}

TabControl: How To Capture Mouse Right-Click On Tab

Answer 2

I created a derived tab control about one year ago. I am not going to post the source here, because it's about 700 lines long and coded quite messy. Maybe I will find some time to clean the code up and then release it here. For now I will briefly outline the way it is build.

Each tab page has a 'X' icon to the left of the title and the tab pages support reordering by drag and drop and moving them between multiple tab control.

I choose the easy way to get the icon on the tab pages. The tab control has the TabControl.ImageList property and a tab page has a TabPage.ImageIndex property. So I just added three icons to a image list - normal, hover, pressed - and process the mouse events.

With TabControl.GetTabRect() you can test if the mouse is over a specific tab pages and with some math you find if it is over the icon. Then you just need to change the icon depending on the mouse button state and eventually remove the tab page under the mouse if the button was pressed.

The main problem with this solution is, that calculating if the mouse is over the icon requires to know where the icon is painted relative to the tab page and this might change with a new windows version. And the icon is to the left of the title, but that does not look too bad.

Answer 3

I did the following: on the create (add) TabPage stage, I added a toolStrip

ToolStrip ts = new ToolStrip();
ts.Dock = DockStyle.Top;
ts.RightToLeft = System.Windows.Forms.RightToLeft.Yes;

Then, create the X button and add it to toolstrip

ToolStripButton ToolStripButton = new ToolStripButton("X");
ts.Items.Add(ToolStripButton);

create an event on clicking the X button

ToolStripButton.Click += new EventHandler(ToolStripButton_Click);

add toolstrip to the tabpage

tabControl1.TabPages[curenttabpage].Controls.Add(ts);

now for the ToolStripButton_Click is as follows:

void ToolStripButton_Click(object sender, EventArgs e)
{ 
 ToolStripButton t = (ToolStripButton)(sender);
 ToolStrip ts = t.Owner;
 TabPage tb = (TabPage)
 (ts.Parent);tabControl1.TabPages.Remove(tb);
}

Maybe it is not as you want, but it will work well.