Close button in tabControl

Question

is there anyone can tell me how to add close button in each tab in using tabControl in C#? i plan to use button pic for replacing [x] in my tab..

thank you

Answer 1

Without deriving a class, here is a neat snippet: http://www.dotnetthoughts.net/implementing-close-button-in-tab-pages/

Set the DrawMode property of the Tab Control to OwnerDrawFixed. This property decides whether system or developer can paint the captions. Add the code in the DrawItem event of the Tab Control – This event will be invoked for painting each Tab Page.

    //This code will render a "x" mark at the end of the Tab caption. 
e.Graphics.DrawString("x", e.Font, Brushes.Black, e.Bounds.Right - 15, e.Bounds.Top + 4);
e.Graphics.DrawString(this.tabControl1.TabPages[e.Index].Text, e.Font, Brushes.Black, e.Bounds.Left + 12, e.Bounds.Top + 4);
e.DrawFocusRectangle();

Now for close button action, we need to add the following code to the MouseDown event of the Tab Control.

//Looping through the controls.
for (int i = 0; i < this.tabControl1.TabPages.Count; i++)
{
    Rectangle r = tabControl1.GetTabRect(i);
   //Getting the position of the "x" mark.
    Rectangle closeButton = new Rectangle(r.Right - 15, r.Top + 4, 9, 7);
    if (closeButton.Contains(e.Location))
    {
        if (MessageBox.Show("Would you like to Close this Tab?", "Confirm", MessageBoxButtons.YesNo, MessageBoxIcon.Question) == DialogResult.Yes)
        {
            this.tabControl1.TabPages.RemoveAt(i);
            break;
        }
    }
}

Answer 2

Adding to the other answers... why iterating through all the tabs on mouse click event when we can just detect the current tab with .SelectedIndex and .SelectedTab ?

Like so:

private void tabControl1_MouseDown(object sender, MouseEventArgs e)
{
    Rectangle r = tabControl1.GetTabRect(this.tabControl1.SelectedIndex);
    Rectangle closeButton = new Rectangle(r.Right - 15, r.Top + 4, 9, 7);
    if (closeButton.Contains(e.Location))
    {
        this.tabControl1.TabPages.Remove(this.tabControl1.SelectedTab); 
    }
}

What seems to happen is, the moment you click on a tabPage for closing it, it also gets selected, thus allowing the close button to close the right tabPage. To me it works but please take this with extra care though as I am not completely sure of possible drawbacks (my initial sentence wasn't a completely rhetorical question since I'm kinda new to .Net...).

Answer 3

Try this code:

    private Point _imageLocation = new Point(13, 5);
        private Point _imgHitArea = new Point(13, 2);

        private void Form1_Load(object sender, EventArgs e)
        {
            tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;
    tabControl1.DrawItem += tabControl1_DrawItem;
    CloseImage = WindowsFormsApplication3.Properties.Resources.closeR;
    tabControl1.Padding = new Point(10, 3);
        }


    private void TabControl1_DrawItem(object sender, System.Windows.Forms.DrawItemEventArgs e)
        {
            try
            {
                Image img = new Bitmap(CloseImage);
                Rectangle r = e.Bounds;
                r = this.tabControl1.GetTabRect(e.Index);
                r.Offset(2, 2);
                Brush TitleBrush = new SolidBrush(Color.Black);
                Font f = this.Font;
                string title = this.tabControl1.TabPages[e.Index].Text;

                e.Graphics.DrawString(title, f, TitleBrush, new PointF(r.X, r.Y));

                if (tabControl1.SelectedIndex >= 1)
                {
                    e.Graphics.DrawImage(img, new Point(r.X + (this.tabControl1.GetTabRect(e.Index).Width - _imageLocation.X), _imageLocation.Y));
                }
            }
            catch (Exception) { }
        }


private void TabControl1_Mouse_Click(object sender, System.Windows.Forms.DrawItemEventArgs e)
{

TabControl tc = (TabControl)sender;
Point p = e.Location;
int _tabWidth = 0;
_tabWidth = this.tabControl1.GetTabRect(tc.SelectedIndex).Width - (_imgHitArea.X);
Rectangle r = this.tabControl1.GetTabRect(tc.SelectedIndex);
r.Offset(_tabWidth, _imgHitArea.Y);
r.Width = 16;
r.Height = 16;
if (tabControl1.SelectedIndex >= 1)
{
    if (r.Contains(p))
    {
        TabPage TabP = (TabPage)tc.TabPages[tc.SelectedIndex];
        tc.TabPages.Remove(TabP);
    }

}
}

Look at this code snippet

Answer 4

I ran into this same issue, however, I also wanted to have an image in front of the caption on the tab. Here is the code that will give you an image in front, a caption and a close button. Also, this code includes the ability to use the middle mouse click on the tab to close it.

First under the TabControl's properties change DrawMode from Normal to OwnerDrawFixed. Next, you will need to tweak the X dimension for the TabControl's padding also found under properties.

In this example, my TabControl is called "TabManager" so rename that to the name of your control.

Go under the envents (the little lightning bolt near the top of the properties box) and double click in the white box next to "DrawItem", this will create a trigger. In that method use this code with your adjustments.

    private void TabManager_DrawItem(object sender, DrawItemEventArgs e)
    {
        TabPage thisTab = TabManager.TabPages[e.Index];
        string tabTitle = thisTab.Text;
        Image icon = imageList1.Images[thisTab.ImageIndex];
        //Draw Close button
        Point closeLoc = new Point(15, 5);
        e.Graphics.DrawRectangle(Pens.Black, e.Bounds.Right - closeLoc.X, e.Bounds.Top + closeLoc.Y, 10, 12);
        e.Graphics.FillRectangle(Brushes.LightBlue, e.Bounds.Right - closeLoc.X, e.Bounds.Top + closeLoc.Y, 10, 12);
        e.Graphics.DrawString("x", e.Font, Brushes.Black, e.Bounds.Right - (closeLoc.X), e.Bounds.Top + closeLoc.Y-2);
        // Draw String of Caption
        e.Graphics.DrawString(tabTitle, e.Font, Brushes.Black, e.Bounds.Left + 28, e.Bounds.Top + 4);
        // Add Icon to Front
        e.Graphics.DrawImage(icon, e.Bounds.Left + 6, e.Bounds.Top + 3);
        e.DrawFocusRectangle();
    }

Next go back to the events and double click on the white box next to MouseDown. Then use this code:

    private void TabManager_MouseDown(object sender, MouseEventArgs e)
    {
        Point closeLoc = new Point(15, 5);
        Rectangle r = TabManager.GetTabRect(TabManager.SelectedIndex);
        Rectangle closeButton = new Rectangle(r.Right - closeLoc.X, r.Top + closeLoc.Y, 10, 12);
        if (closeButton.Contains(e.Location))
        {
            TabManager.TabPages.Remove(TabManager.SelectedTab);
            return; // Don't keep running logic in method
        }
        for (int i = 0; i < TabManager.TabCount; i++)
        {
            r = TabManager.GetTabRect(i);
            if (r.Contains(e.Location) && e.Button == MouseButtons.Middle)
            {
                TabManager.TabPages.RemoveAt(i);
            }
        }
    }