Tutorial :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


Solution: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;          }      }  }  


Solution: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...).


Solution: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


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »