Modernes Tab Control

    • C#
    • .NET (FX) 4.5–4.8

    Es gibt 8 Antworten in diesem Thema. Der letzte Beitrag () ist von ErfinderDesRades.

      Modernes Tab Control

      Hallo Community,

      Ich habe hier den Source Code für ein
      TabControl im Windows 8 Style. Die Farben des Headers sind Anpassbar.
      Größe kann auch Festgelegt werden. Das Control Funktioniert nur, wenn
      die Tabs oben sind.

      C#-Quellcode

      1. public class TabControl : System.Windows.Forms.TabControl
      2. {
      3. public Color TabBackgroundColor { get; set; }
      4. public Color SelectedTabBackroundColor { get; set; }
      5. public Color BackgroundColor { get; set; }
      6. public Font TabFont { get; set; }
      7. public Color TabForeColor { get; set; }
      9. public TabControl() : base()
      10. {
      11. this.SetStyle(System.Windows.Forms.ControlStyles.OptimizedDoubleBuffer, true);
      12. this.SetStyle(System.Windows.Forms.ControlStyles.UserPaint, true);
      13. this.ItemSize = new Size(150, 40);
      14. this.SizeMode = System.Windows.Forms.TabSizeMode.Fixed;
      16. Initial();
      17. }
      19. private void Initial()
      20. {
      21. this.TabBackgroundColor = Color.FromArgb(240, 240, 240);
      22. this.SelectedTabBackroundColor = Color.FromArgb(150, 253, 91);
      23. this.BackgroundColor = Color.White;
      24. this.TabForeColor = Color.Black;
      25. this.TabFont = new Font("Arial", 12);
      26. }
      28. protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
      29. {
      30. base.OnPaint(e);
      32. // Hintergrund Zeichnen
      33. e.Graphics.FillRectangle(new SolidBrush(this.BackgroundColor), new Rectangle(0,0,this.Width, this.Height));
      35. // Tabs Zeichnen
      36. for (int i = 0; i < base.TabPages.Count; i++)
      37. {
      38. if (i != this.SelectedIndex)
      39. {
      40. PaintTab(i, e.Graphics);
      41. }
      42. }
      44. // Gewähltes Tab Zeichnen
      45. this.PaintSelectedTab(e.Graphics);
      46. }
      48. private void PaintTab(int Index, Graphics e)
      49. {
      50. // Rechteck des Tabs
      51. Rectangle TabRect = base.GetTabRect(Index);
      53. // Abgedunkelte Farbe, für die Line
      55. Color TabLineColor =
      56. Color.FromArgb(this.TabBackgroundColor.A, this.TabBackgroundColor.R -
      57. 25, this.TabBackgroundColor.G - 25, this.TabBackgroundColor.B - 25);
      59. // Bild, auf das das Tab Gezeichnet wird
      60. Bitmap TabBmp = new Bitmap(TabRect.Width, TabRect.Height);
      62. // Graphics für das Zeichnen auf das Bild
      63. Graphics g = Graphics.FromImage(TabBmp);
      65. // Zeichnen des Oberen Rechteck
      66. g.FillRectangle(new SolidBrush(this.TabBackgroundColor), 2, 0, TabBmp.Width - 4, TabBmp.Height-10);
      68. // Zeichnen der Linie
      70. g.DrawLine(new Pen(new SolidBrush(TabLineColor), 2.5f), new
      71. Point(2, TabBmp.Height - 10), new Point(TabBmp.Width -2, TabBmp.Height -
      72. 10));
      74. // Zeichnen des String
      75. StringFormat sf = new StringFormat();
      76. sf.Alignment = StringAlignment.Center;
      77. sf.LineAlignment = StringAlignment.Center;
      79. g.DrawString(this.TabPages[Index].Text.ToUpper(),
      80. this.TabFont, new SolidBrush(this.TabForeColor), new Rectangle(2, 0,
      81. TabBmp.Width - 4, TabBmp.Height - 10), sf);
      83. // Zeichnen des Bildes auf die Tabpage
      84. e.DrawImage(TabBmp, TabRect);
      85. }
      87. private void PaintSelectedTab(Graphics e)
      88. {
      89. // Rechteck, des Gewählten Tab
      90. Rectangle TabRect = base.GetTabRect(this.SelectedIndex);
      92. // Abgedunkelte Farbe für Line
      94. Color TabLineColor =
      95. Color.FromArgb(this.SelectedTabBackroundColor.A,
      96. this.SelectedTabBackroundColor.R - 25, this.SelectedTabBackroundColor.G -
      97. 25, this.SelectedTabBackroundColor.B - 25);
      99. // Bild, auf das das Tab Gezeichnet wird
      100. Bitmap TabBmp = new Bitmap(TabRect.Width, TabRect.Height);
      102. // Graphics für das Zeichnen auf das Bild
      103. Graphics g = Graphics.FromImage(TabBmp);
      105. // Zeichnen des Oberen Rechteck
      107. g.FillRectangle(new
      108. SolidBrush(this.SelectedTabBackroundColor), new Rectangle(2, 0,
      109. TabBmp.Width - 4, TabBmp.Height - 10));
      111. // Zeichnen der Linie
      113. g.DrawLine(new Pen(new SolidBrush(TabLineColor), 2.5f), new
      114. Point(2, TabBmp.Height - 10), new Point(TabBmp.Width - 2, TabBmp.Height -
      115. 10));
      117. // Zeichnen des Dreieck
      119. g.FillPolygon(new SolidBrush(TabLineColor), new Point[] { new Point(20,
      120. TabBmp.Height - 10), new Point(40, TabBmp.Height - 10), new Point(30,
      121. TabBmp.Height) });
      123. // Zeichnen des String
      124. StringFormat sf = new StringFormat();
      125. sf.Alignment = StringAlignment.Center;
      126. sf.LineAlignment = StringAlignment.Center;
      129. g.DrawString(this.TabPages[this.SelectedIndex].Text.ToUpper(),
      130. this.TabFont, new SolidBrush(this.TabForeColor), new Rectangle(2, 0,
      131. TabBmp.Width - 4, TabBmp.Height - 10), sf);
      133. // TabBmp auf die Tabpage Zeichnen
      134. e.DrawImage(TabBmp, TabRect);
      135. }
      136. }



      Achtung, nach dem Ziehen auf die Form kommt ein Fehler. Bitte Form einmal Schließen und wieder öffnen und der Fehler ist weg


      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Andy16823“ ()

      Jap, vom Aussehen erstmal.

      Hab den Fehler auch. Hatte den Code in Visual Basic konvertiert, Klasse erstellt, einmal "gedebuggt" damit das Control in der Toolbox erscheint und dann auf die Form gezogen, dann bekam ich den Fehler.
      Polling is trolling!

      Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..

      Ja, sorry, dass ist wegen den Farbwerten. Habe den Kontruktor Vergessen.

      ----
      Habe den fehler behoben, allerdings kommt ein Weiterer Fehler, gegen den ich nichts machen kann. Einfach Drauf ziehen, Form einmal Schließen und wieder öffnen.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Andy16823“ ()

      Hallo Andy,

      ich habe mir erlaubt, Dein Control ein bisschen zu modifizieren - der Fehler ist nun weg.
      Man könnte viel mehr optimieren, aber für den Anfang reicht es sicher - viel Spaß.

      C#-Quellcode

      1. using System.Drawing;
      2. using System.Windows.Forms;
      4. namespace simpelSoft
      5. {
      6. public class TabControlEx : System.Windows.Forms.TabControl
      7. {
      8. /// <summary>
      9. /// Properties
      10. /// </summary>
      11. public Color TabBackgroundColor { get; set; }
      12. public Color SelectedTabBackroundColor { get; set; }
      13. public Color BackgroundColor { get; set; }
      14. public Font TabFont { get; set; }
      15. public Color TabForeColor { get; set; }
      17. /// <summary>
      18. /// Constructor
      19. /// </summary>
      20. public TabControlEx()
      21. {
      22. // set styles
      23. SetStyle(ControlStyles.AllPaintingInWmPaint
      24. | ControlStyles.UserPaint
      25. | ControlStyles.OptimizedDoubleBuffer
      26. | ControlStyles.ResizeRedraw, true);
      28. this.ItemSize = new Size(150, 40);
      29. this.SizeMode = TabSizeMode.Fixed;
      30. this.TabBackgroundColor = Color.FromArgb(240, 240, 240);
      31. this.SelectedTabBackroundColor = Color.FromArgb(150, 253, 91);
      32. this.BackgroundColor = Color.White;
      33. this.TabForeColor = Color.Black;
      34. this.TabFont = new Font("Segoe UI", 12.0f, FontStyle.Regular, GraphicsUnit.Point);
      35. }
      37. /// <summary>
      38. /// Overridden paint event
      39. /// </summary>
      40. /// <param name="e"></param>
      41. protected override void OnPaint(PaintEventArgs e)
      42. {
      43. // System paint
      44. base.OnPaint(e);
      46. // Background
      47. e.Graphics.Clear(this.BackgroundColor);
      49. // Tabs
      50. for (int i = 0; i < base.TabPages.Count; i++)
      51. if (i != this.SelectedIndex)
      52. PaintTab(i, e.Graphics);
      54. // Draw selected tab
      55. this.PaintSelectedTab(e.Graphics);
      56. }
      58. /// <summary>
      59. /// Paint tab
      60. /// </summary>
      61. /// <param name="Index"></param>
      62. /// <param name="e"></param>
      63. private void PaintTab(int Index, Graphics e)
      64. {
      65. // Tab rectangle
      66. Rectangle TabRect = base.GetTabRect(Index);
      68. // Darker line color
      69. Color TabLineColor = this.TabBackgroundColor.Lerp(Color.Black, .2f);
      71. // Tab bitmap & graphics object
      72. Bitmap TabBmp = new Bitmap(TabRect.Width, TabRect.Height);
      73. Graphics g = Graphics.FromImage(TabBmp);
      75. // Top rectangle
      76. g.FillRectangle(new SolidBrush(this.TabBackgroundColor), 2, 0, TabBmp.Width - 4, TabBmp.Height - 10);
      78. // Line
      79. g.DrawLine(new Pen(new SolidBrush(TabLineColor), 2.5f), new Point(2, TabBmp.Height - 10), new Point(TabBmp.Width - 2, TabBmp.Height - 10));
      81. // String
      82. StringFormat sf = new StringFormat();
      83. sf.Alignment = StringAlignment.Center;
      84. sf.LineAlignment = StringAlignment.Center;
      85. g.DrawString(this.TabPages[Index].Text.ToUpper(), this.TabFont, new SolidBrush(this.TabForeColor), new Rectangle(2, 0, TabBmp.Width - 4, TabBmp.Height - 10), sf);
      87. // Draw Image on tabpage
      88. e.DrawImage(TabBmp, TabRect);
      89. }
      91. /// <summary>
      92. /// Paint selected tab
      93. /// </summary>
      94. /// <param name="e"></param>
      95. private void PaintSelectedTab(Graphics e)
      96. {
      97. // Index in range?
      98. if (this.SelectedIndex < 0)
      99. return;
      101. // Tab rectangle
      102. Rectangle TabRect = base.GetTabRect(this.SelectedIndex);
      104. // Darker line color
      105. Color TabLineColor = this.SelectedTabBackroundColor.Lerp(Color.Black, .2f);
      107. // Tab bitmap & graphics object
      108. Bitmap TabBmp = new Bitmap(TabRect.Width, TabRect.Height);
      109. Graphics g = Graphics.FromImage(TabBmp);
      111. // Top rectangle
      112. g.FillRectangle(new SolidBrush(this.SelectedTabBackroundColor), new Rectangle(2, 0, TabBmp.Width - 4, TabBmp.Height - 10));
      114. // Line
      115. g.DrawLine(new Pen(new SolidBrush(TabLineColor), 2.5f), new Point(2, TabBmp.Height - 10), new Point(TabBmp.Width - 2, TabBmp.Height - 10));
      117. // Polygon
      118. g.FillPolygon(new SolidBrush(TabLineColor), new Point[] { new Point(20, TabBmp.Height - 10), new Point(40, TabBmp.Height - 10), new Point(30, TabBmp.Height) });
      120. // String
      121. StringFormat sf = new StringFormat();
      122. sf.Alignment = StringAlignment.Center;
      123. sf.LineAlignment = StringAlignment.Center;
      124. g.DrawString(this.TabPages[this.SelectedIndex].Text.ToUpper(), this.TabFont, new SolidBrush(this.TabForeColor), new Rectangle(2, 0, TabBmp.Width - 4, TabBmp.Height - 10), sf);
      126. // Traw Image on tabpage
      127. e.DrawImage(TabBmp, TabRect);
      128. }
      129. }
      131. /// <summary>
      132. /// Lerp extensions ;)
      133. /// </summary>
      134. public static class Extensions
      135. {
      136. public static float Lerp(this float start, float end, float amount)
      137. {
      138. float difference = end - start;
      139. float adjusted = difference * amount;
      140. return start + adjusted;
      141. }
      143. public static Color Lerp(this Color color, Color to, float amount)
      144. {
      145. // Start color as 'lerpable' floats
      146. float sr = color.R, sg = color.G, sb = color.B;
      148. // End color as 'lerpable' floats
      149. float er = to.R, eg = to.G, eb = to.B;
      151. // Lerp the color to get the difference
      152. byte r = (byte)sr.Lerp(er, amount),
      153. g = (byte)sg.Lerp(eg, amount),
      154. b = (byte)sb.Lerp(eb, amount);
      156. // Return the new colour
      157. return Color.FromArgb(r, g, b);
      158. }
      159. }
      160. }

      Ruf' mal noch ​UpdateStyles auf, damit das Ganze sicher angewendet wird.
      #define for for(int z=0;z<2;++z)for // Have fun!
      Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

      Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

    Facebook
    Telefonspende