C # re-paint the Tabpage tag of TabControl, add image and close button

The following is the source code of the C # re-paint TabControl control: the effect is as follows:

Using System; using System. collections. generic; using System. componentModel; using System. data; using System. drawing; using System. linq; using System. text; using System. windows. forms; namespace WindowsFormsApplication1.june {public partial class TabTest: Form {public TabTest () {InitializeComponent ();} private void TabTest_Load (object sender, EventArgs e) {// clear the control // this. mainTabControl. tabPages. clear (); // The draw method OwnerDrawFixed indicates that the drawing size of the form is the same as this. mainTabControl. drawMode = TabDrawMode. ownerDrawFixed; this. mainTabControl. padding = new System. drawing. point (CLOSE_SIZE, CLOSE_SIZE); this. mainTabControl. drawItem + = new DrawItemEventHandler (this. mainTabControl_DrawItem); this. mainTabControl. mouseDown + = new System. windows. forms. mouseEventHandler (this. mainTabControl_MouseDown);} const int CLOSE_SIZE = 15 ;/ /TabPage tag image Bitmap image = new Bitmap ("E: \ ico_close.gif"); // draw "X" to close the private void MainTabControl_DrawItem (object sender, DrawItemEventArgs e) {try {Rectangle myTabRect = this. mainTabControl. getTabRect (e. index); // Add the TabPage attribute e. graphics. drawString (this. mainTabControl. tabPages [e. index]. text, this. font, SystemBrushes. controlText, myTabRect. X + 2, myTabRect. Y + 2); // draw another rectangular box using (Pen p = ne W Pen (Color. white) {myTabRect. offset (myTabRect. width-(CLOSE_SIZE + 3), 2); myTabRect. width = CLOSE_SIZE; myTabRect. height = CLOSE_SIZE; e. graphics. drawRectangle (p, myTabRect);} // fill in the Rectangular Box Color recColor = e. state = DrawItemState. selected? Color. white: Color. white; using (Brush B = new SolidBrush (recColor) {e. graphics. fillRectangle (B, myTabRect);} // draw the close Symbol using (Pen objpen = new Pen (Color. black )) {// ================================================= ============/// draw X /// "\" line // Point p1 = new Point (myTabRect. X + 3, myTabRect. Y + 3); // Point p2 = new Point (myTabRect. X + myTabRect. width-3, myTabRect. Y + myTabRect. height-3); // e. graphics. drawLine (objpen, p1, p2); // "/" line // Point p3 = new Point (myTabRect. X + 3, myTabRect. Y + myTabRect. height-3); // Point p4 = new Point (myTabRect. X + myTabRect. width-3, myTabRect. Y + 3); // e. graphics. drawLine (objpen, p3, p4 ); /// =================================================== ============/// use the image Bitmap bt = new Bitmap (image ); point p5 = new Point (myTabRect. x, 4); e. graphics. drawImage (bt, p5); // e. graphics. drawString (this. mainTabControl. tabPages [e. index]. text, this. font, objpen. brush, p5);} e. graphics. dispose ();} catch (Exception) {}} // disable the button function private void MainTabControl_MouseDown (object sender, MouseEventArgs e) {if (e. button = MouseButtons. left) {int x = e. x, y = e. y; // calculation close area Rectangle myTabRect = this. mainTabControl. getTabRect (this. mainTabControl. selectedIndex); myTabRect. offset (myTabRect. width-(CLOSE_SIZE + 3), 2); myTabRect. width = CLOSE_SIZE; myTabRect. height = CLOSE_SIZE; // If the mouse is in the area, close the tab bool isClose = x> myTabRect. X & x <myTabRect. right & y> myTabRect. Y & y <myTabRect. bottom; if (isClose = true) {this. mainTabControl. tabPages. remove (this. mainTabControl. selectedTab );}}}}}

You can add an imageList, set the imageList attribute of tabControl, and set the ImageIndex or ImageKey attribute of each tab, but the icon will be on the left side of the text. As shown in:

Another way is to overwrite a tabControl, inherit a tabControl, create a resource folder, and add the image you need in it. You can just re-paint it on OnDrawItem, then, when judging the OnMouseEnter event, modify the image of the rectangle box (obtained from the resource folder )! See the sample http://www.codeproject.com/KB/dotnet/CustomTabControl.aspx