GDI+ Zeichnen eines TabConrol

    • VB.NET

      GDI+ Zeichnen eines TabConrol

      Hallo, ich würde mit diesem Tutorial gerne zeigen wir wir uns ein eigenes Tabcontroll mit einem Hover Effekt erstellen. Zuerst sollte unsere Klasse von dem TabControl erben.

      VB.NET-Quellcode

      1. Public Class MetroTab : Inherits TabControl


      danach müssen wir für den Hover Style zwei Globale Variabeln Deklarieren.

      VB.NET-Quellcode

      1. Public isHover As Boolean = False
      2. Public hoverTab As Integer


      mit isHover wird im Späteren verlauf sich die maus in dem Bereich der Tabpages Aufhält und mit hoverTab wird der index der Tabpage gesetzt auf der Sich die maus aufhält.

      So nun übershcreiben wir uns das Paint Event und fügen den Code hinzu

      VB.NET-Quellcode

      1. Protected Overrides Sub OnPaint(e As PaintEventArgs)
      2. MyBase.OnPaint(e)
      4. drawbg(e)
      6. For i = 0 To TabCount - 1
      8. If isHover = True And hoverTab = i Then
      9. drawhoverTab(e, i)
      10. Else
      11. drawheaders(e, i)
      12. End If
      15. Next
      17. End Sub


      Erklärung des Codes

      Mit drawbg(e) wird der Rahmen unserer Tabpage Gezeichnet. diese methode erstellen wir selbst und übergeben PaintEventArgs an die Methode

      VB.NET-Quellcode

      1. Private Sub drawbg(e As PaintEventArgs)
      2. Dim color As Color = System.Drawing.Color.FromArgb(255, 129, 164, 206)
      4. e.Graphics.FillRectangle(New SolidBrush(color), New Rectangle(0, 0 + MyBase.ItemSize.Height, MyBase.Width, MyBase.Height))
      6. End Sub


      Danach laufen wir in einer for-Schleife die Tabpages durch und überprüfen ob die Variable isHover = true ist und ob sich die Maus auf dem Aktuelle Tabpage Header befindet. Wenn dies beides wahr ist führen wird die Methode drawhoverTab(e,i) aus. Diese erstellen wir auch wieder selbst

      VB.NET-Quellcode

      1. Private Sub drawhoverTab(e As PaintEventArgs, i As Integer)
      2. Dim orect As Rectangle = GetTabRect(i)
      4. Dim color As Color = System.Drawing.Color.FromArgb(255, 255, 244, 190)
      5. Dim color2 As Color = System.Drawing.Color.FromArgb(255, 255, 219, 98)
      7. Dim X1 As Integer = orect.X
      8. Dim Y1 As Integer = orect.Y
      9. Dim W1 As Integer = orect.Width
      10. Dim H1 As Integer = orect.Height / 2
      12. Dim X2 As Integer = orect.X
      13. Dim Y2 As Integer = orect.Height / 2
      14. Dim W2 As Integer = orect.Width
      15. Dim H2 As Integer = orect.Height / 2
      17. Dim brush1 As New Drawing2D.LinearGradientBrush(New Point(W1 / 2, Y1), New Point(W1 / 2, H1), color, color2)
      18. Dim brush2 As New Drawing2D.LinearGradientBrush(New Point(W2 / 2, Y2), New Point(W2 / 2, orect.Height), color2, color)
      22. Dim sf As New StringFormat
      23. sf.LineAlignment = StringAlignment.Center
      24. sf.Alignment = StringAlignment.Center
      27. e.Graphics.FillRectangle(brush1, New Rectangle(X1, Y1, W1, H1))
      28. e.Graphics.FillRectangle(brush2, New Rectangle(X2, Y2, W2, H2))
      29. e.Graphics.DrawLine(New Pen(New SolidBrush(color2)), New Point(orect.X, orect.Height / 2), New Point(orect.X + orect.Width, orect.Height / 2))
      30. e.Graphics.DrawString(TabPages(i).Text, TabPages(i).Font, New SolidBrush(TabPages(i).ForeColor), GetTabRect(i), sf)
      32. End Sub


      ist diese Bedingung nicht wahr zeichnen wir die headers normal mit der methode drawheaders(e,i)

      VB.NET-Quellcode

      1. Private Sub drawheaders(e As PaintEventArgs, i As Integer)
      4. If SelectedIndex = i Then
      5. drawSelectedTab(e, i)
      6. Exit Sub
      7. End If
      9. Dim oRect As Rectangle = GetTabRect(i)
      11. Dim H As Integer = oRect.Height
      12. Dim W As Integer = oRect.Width
      13. Dim X As Integer = oRect.X
      14. Dim Y As Integer = oRect.Y
      17. ' Punkt Links Unten
      18. Dim P1 As New Point(X, H)
      19. ' Punkt Links Oben
      20. Dim P2 As New Point(X, Y)
      21. ' Punkte Rechts Oben
      22. Dim P3 As New Point(X + W, Y)
      23. ' Punkt Rechts Unten
      24. Dim P4 As New Point(X + W, H)
      27. Dim p As New Drawing.Drawing2D.GraphicsPath
      28. p.AddLine(P1, P2)
      29. p.AddLine(P2, P3)
      30. p.AddLine(P3, P4)
      31. p.AddLine(P4, P1)
      33. Dim sf As New StringFormat
      34. sf.LineAlignment = StringAlignment.Center
      35. sf.Alignment = StringAlignment.Center
      38. e.Graphics.FillPath(Brushes.DarkGray, p)
      39. e.Graphics.DrawString(TabPages(i).Text, TabPages(i).Font, New SolidBrush(TabPages(i).ForeColor), GetTabRect(i), sf)
      40. End Sub


      in dieser methode wird mit


      VB.NET-Quellcode

      1. If SelectedIndex = i Then
      2. drawSelectedTab(e, i)
      3. Exit Sub
      4. End If



      geprüft ob die Aktuelle Registerkarte gleich die Aktuelle Register Karte ist. ist es wahr wird die methode drawSelectedTab(e, i) aufgerufen und den rest des Subs Beendet. Diese prüfung ist wichtig, das wir die Aktuellen Registrier Karte anderst dagestellt bekommen.

      VB.NET-Quellcode

      1. Private Sub drawSelectedTab(e As PaintEventArgs, i As Integer)
      3. Dim orect As Rectangle = GetTabRect(i)
      4. Dim color As Color = System.Drawing.Color.FromArgb(255, 129, 164, 206)
      5. Dim color2 As Color = System.Drawing.Color.FromArgb(255, 44, 98, 186)
      7. Dim brush1 As New Drawing2D.LinearGradientBrush(New Point(orect.X + orect.Width / 2, orect.Y), New Point(orect.X + orect.Width / 2, orect.Height / 2), color, color2)
      8. Dim brush2 As New Drawing2D.LinearGradientBrush(New Point(orect.X + orect.Width / 2, orect.Height / 2), New Point(orect.X + orect.Width / 2, orect.Height), color2, color)
      12. Dim sf As New StringFormat
      13. sf.LineAlignment = StringAlignment.Center
      14. sf.Alignment = StringAlignment.Center
      16. e.Graphics.FillRectangle(brush1, New Rectangle(orect.X, orect.Y, orect.Width, orect.Height))
      17. e.Graphics.FillRectangle(brush2, New Rectangle(orect.X, orect.Height / 2, orect.Width, orect.Height / 2))
      18. e.Graphics.DrawLine(New Pen(New SolidBrush(color2)), New Point(orect.X, orect.Height / 2), New Point(orect.X + orect.Width, orect.Height / 2))
      19. e.Graphics.DrawString(TabPages(i).Text, TabPages(i).Font, New SolidBrush(TabPages(i).ForeColor), GetTabRect(i), sf)
      21. End Sub


      Das war die Komplette Zeichnen methoden. Nun kommen die hover methoden. Wir starten mit einer Überschreibung des Mouse move events. danach erstellen wir uns ein neues Rechteck dieses ist der bereich der Tabheaders. es wird nun geprüft ob sich die maus in dem bereich aufhält. Ist es wahr laufen wir alle Tabpages in einer for-schleife durch. in der Schleife erstellen wir das rechteck des Tabheaders und prüfen ob sich die maus in diesem rechteck aufhält. ist dies auch wahr setzen wir isHover auf True und weisen hoverTab unseren Tabpage index zu. hier ist der Code dazu

      VB.NET-Quellcode

      1. Protected Overrides Sub OnMouseMove(e As MouseEventArgs)
      2. MyBase.OnMouseMove(e)
      4. Dim tabrect As New Rectangle(0, 0, MyBase.Width, MyBase.ItemSize.Height)
      5. If tabrect.Contains(e.Location) Then
      6. For i = 0 To TabCount - 1
      7. Dim rect As Rectangle = GetTabRect(i)
      8. If rect.Contains(e.Location) Then
      9. isHover = True
      10. hoverTab = i
      11. End If
      12. Next
      13. Else
      14. isHover = False
      15. End If
      17. Me.Invalidate()
      18. End Sub


      So nun kommen wir zu der Methode wenn wir das Control verlassen, soll auch die Variable isHover auf false. Für die methode überschreiben wir die MouseLeave Methode.

      VB.NET-Quellcode

      1. Protected Overrides Sub OnMouseLeave(e As EventArgs)
      2. MyBase.OnMouseLeave(e)
      3. isHover = False
      5. Me.Invalidate()
      6. End Sub


      So nun sollte unsere Tabcontrol so aussehen


      Grüße Andy 8-)

      Edit by hal2000:
      - Topic verschoben: Für ein Tutorial nicht ausreichend erklärt.

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