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?

EDIT:
I believe that this can be solved with event-driven programming through use of delegates, but I'm not at all sure how.

Answer 1

I've use this in the past, and it actually worked quite well:

http://www.codeproject.com/KB/tabs/firefoxtabcontrol.aspx

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 to bad.

Answer 3

You can try a 3rd party control IntegralUI TabControl which solves all your issues:

1. You can allow to the user to close the opened tabs in two ways:

   a) By adding a command button in the tabstrip which when clicked will close the opened page. This is done by setting the ShowCloseButton property to True.

   b) By adding a custom command button inside the tab which when clicked will close the opened page

2. There is an option to add many command buttons to a single page tab. Every command button can have its own image.

3. In order to do that just use the index of the desired page from the TabControl, and remove it from the tab list by calling TabControl.Pages.RemoveAt(index)

Answer 4

I created a setup that is similar.

Each control that is added to the tab page at runtime is derived from a special base control I created. This base control has a close button (along with some other features such as safe to close flag).

Close tab code I'm using on my base control:

 TabPage tabpage = (TabPage)this.Parent;
TabControl tabControl = (TabControl)tabpage.Parent;

tabControl.TabPages.Remove(parent);

Answer 5

For the second part of your question you can visit this blog entry

http://blog.bitsabound.com/2009/05/19/DrawingCaptionButtonsOnTabPages.aspx

Answer 6

here are some links to custom tab controls.

http://www.codeproject.com/KB/tabs/CustomTabControl.aspx

http://www.codeproject.com/KB/tabs/magictabcontrol.aspx

http://www.codeproject.com/KB/tabs/vtTab.aspx

and here's the list of results: http://www.google.com/custom?hl=en&lr=&client=pub-2698861478625135&cof=FORID%3A1%3BGL%3A1%3BLBGC%3A336699%3BLC%3A%230000ff%3BVLC%3A%23663399%3BGFNT%3A%230000ff%3BGIMP%3A%230000ff%3BDIV%3A%23336699%3B&q=free+custom+tab+control+c%23&btnG=Search