Click here to Skip to main content
15,894,017 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi,

I have a tab control in my project...
Now, I want to add close buttons in my each of the tabpages header...
How can I achieve it ?
Posted
Comments
bowlturner 9-Dec-13 9:58am    
asp.net? Winforms? WPF? Need more information.

Assuming this is Windows Forms.

The choices you have with the MS TabControl are very limited: if you want any type of customization of the Tab-Headers, you must make the control OwnerDrawn, and implement custom painting. And, if you want hit-detection inside the Tab-Headers, you must implement that.

That said, you can find really nice examples of OwnerDrawn TabControls with custom Tab-Headers, such as the one here on CP that Ravi referred you to in his post.

Here's an alternative I wrote a few years ago before I switched over to using a 3rd. party TabControl (in the Lidor IntegralUI Suite).

This alternative uses a ContextMenu, which ... for this example ... I'll limit to a single menu-entry: "Close."

1. you may wish to set the TabControl SizeMode to 'Fixed, and set the 'ItemSize parameters to make the Tab-Headers the size you wish.

2. drop a ContextMenuStrip on the Form, create a single menu-item with the text "Close."

3. set the TabControl to use the ContextMenuStrip.

4. double-click on the "Close" menu item to generate a Click EventHandler for the ToolStripMenuItem, and code it like this:
C#
private void closeToolStripMenuItem_Click(object sender, EventArgs e)
{
    Point mouseAt = MousePosition;

    foreach (TabPage theTabPage in tabControl1.TabPages)
    {
        if (tabControl1.RectangleToScreen(tabControl1.GetTabRect(theTabPage.TabIndex)).Contains(mouseAt))
        {
            // for testing only
            Console.WriteLine(theTabPage.Text + Environment.NewLine);

            // this is where you'd write code to remove the TabPage
            // from the TabControl's TabPages collection which is
            // the only way you can simulate "closing" it

            break;
        }
    }
}
What's going on here:

1. when the ToolStripMenuItem is Clicked the mouse position in screen co-ordinates is recorded.

2. the TabPages in the TabControl are iterated over, and the Tab-Header bounds are translated into screen co-ordinates.

3. the translated Tab-Header bounds are tested to see if they contain the point the mouse went down at.

4. if the hit is detected: for testing purposes: a message is written to the Console to display the Text of that TabPage, and the iteration is halted.

Disclaimer: I haven't used this code in a while, and you should thoroughly test the hit-detection yourself.
 
Share this answer
 
v4
Comments
Yesudasan Moses 10-Dec-13 6:10am    
Yea... This was the Idea...
Using Owner Draw to Draw a close button Image on Tab,,, and Using MouseDown Event to get the click on the Point....
I did it...
If you're using WinForms, see this[^] CP article.

/ravi

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900