Implementing Close button in Tab Pages
Long back, when I worked on Windows Application, my client asked me to change the UI, instead of using MDI, he want to use SDI. And for multiple Windows, suggested Tab Control, like the new Web Browsers. Fortunately he dropped the idea of SDI later and I continue to use MDI. But few days ago I got a question from a dotnet forum, how can we create close button for the Tab Pages in Tab Control. While searching I got lot of implementations, later I implemented it in my own way. In the implementations I found, they are inheriting from Tab Control, in this implementation, I implemented in such way that it can be applied for an existing Tab Control.
- Set the DrawMode property of the Tab Control to OwnerDrawFixed. This property is decides whether system or developer painting the captions.
- Add the code in the DrawItem event of the Tab Control – This event will be invoked for painting each Tab Page.
- Now for close button action, we need to add the following code to the MouseDown event of the Tab Control.
//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();
//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;
}
}
}
Here is the screenshot, of the implementation, running on my machine.
Close Button in Tab Pages
