Adding close button in tabpage tab caption in C# Windows Form

Question

I am trying to add close button or 'X' on tabpage panel in tabcontrol and I have successfully done this by reading this stackoverflow question.

The problem is the tabbed page title and X sign is merged together. I discovered that the tabpage title panel is not resizing according to title text.

Here is the code:

//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+5, e.Bounds.Top + 4);

e.DrawFocusRectangle();

The result which comes is here I have changed e.bounds.right value but still it's not working.

It depends on the SizeMode. You may want to add a couple of spaces to the text to enforce room for the X. Or you could use measurestring to pad enough spaces before adding the X to the actual text without drawing it separately. You won't be able to control the looks though this way.. — TaW, Apr 17 '15 at 15:21

score 8 · Answer 1 · answered Apr 02 '16 at 21:37

8

To fix merged tabPage.Text with additionally drawed "X" just add:

tabControl.Padding = new System.Drawing.Point(21, 3);

It will add some extra space to the end of every tabPage

answered Apr 02 '16 at 21:37

SoCo

81
1
1

Black Frog · Accepted Answer · 2015-04-17T17:39:31.563

Make sure you set the DrawMode property of the Tab Control to OwnerDrawFixed. This property is decides whether system or developer painting the captions.

Here is code example that uses TabSizeMode = Fixed is setting the tab size:

public partial class Form1 : Form
{
    const int LEADING_SPACE = 12;
    const int CLOSE_SPACE = 15;
    const int CLOSE_AREA = 15;

    public Form1()
    {
        InitializeComponent();
    }

    private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
    {
        //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 - CLOSE_AREA, e.Bounds.Top + 4);
        e.Graphics.DrawString(this.tabControl1.TabPages[e.Index].Text, e.Font, Brushes.Black, e.Bounds.Left + LEADING_SPACE, e.Bounds.Top + 4);
        e.DrawFocusRectangle();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        // get the inital length
        int tabLength = tabControl1.ItemSize.Width;

        // measure the text in each tab and make adjustment to the size
        for (int i = 0; i < this.tabControl1.TabPages.Count; i++)
        {
            TabPage currentPage = tabControl1.TabPages[i];

            int currentTabLength = TextRenderer.MeasureText(currentPage.Text, tabControl1.Font).Width;
            // adjust the length for what text is written
            currentTabLength += LEADING_SPACE + CLOSE_SPACE + CLOSE_AREA;

            if (currentTabLength > tabLength)
            {
                tabLength = currentTabLength;
            }
        }

        // create the new size
        Size newTabSize = new Size(tabLength, tabControl1.ItemSize.Height);
        tabControl1.ItemSize = newTabSize;
    }
}

Screen shot of sample code from above: Tab Size in Action

Hi whether any idea there to set color or any graphics for selected tab ? — Visakh V A, Feb 02 '17 at 05:37

Adding close button in tabpage tab caption in C# Windows Form

2 Answers2