Eigene Progressbar erstellen

    • VB.NET

      Eigene Progressbar erstellen

      Hallo,

      in diesem Tutorial will ich auch zeigen wie man ganz einfach seine eigene Progressbar erstellen kann.
      Was ich auch in diesem Tut zeige lässt sich auch ganz einfach auf andere controls wie Buttons oder lables anwenden.

      Als erstes erstellt ihr euch eine neue Klassenbibliothek

      In dieser löscht ihr dann "Class1.vb".

      Danach fügt ihr eurem Projekt ein neues Benutzersteuerelement hinzu(Projekt-->Benutzersteuerelement hinzufügen) und nennt es MyProgressbar (ihr könnt es auch anders nennen nur nicht "Progressbar")

      als nächstes fügt ihr die benötigten Verweise hinzu und importiert diese.
      • System.Drawing
      • System.Drawing.Drawing2D
      • System.ComponentModel
      • System.Windows.Forms


      Dann lasst ihr eure control von Progressbar ergen

      VB.NET-Quellcode

      1. Inherits ProgressBar
      (wenn euch vs jetzt einen fehler bringt geht einfach auf das rote Ausrufezeichen und wählt den oberen Vorschlag)

      Als nächstes löschen wir im Designer das Sub InitializeComponent()

      VB.NET-Quellcode

      1. 'Hinweis: Die folgende Prozedur ist für den Windows Form-Designer erforderlich.
      2. 'Das Bearbeiten ist mit dem Windows Form-Designer möglich.
      3. 'Das Bearbeiten mit dem Code-Editor ist nicht möglich.
      4. _
      5. Private Sub InitializeComponent()
      6. components = New System.ComponentModel.Container()
      7. Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
      8. End Sub
      Disen teil einfach löschen

      Als nächstes erstellt ihr das sub New

      VB.NET-Quellcode

      1. Public Sub New()
      2. MyBase.New()
      3. MyBase.SetStyle(ControlStyles.UserPaint, True) 'Der controll sagen das wir sie zeichnen
      4. MyBase.SetStyle(ControlStyles.DoubleBuffer, True) 'DoubleBuffer aktivieren
      5. MyBase.SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'Transparente hintergrundfarbe aktivieren (für diese anwendung nicht zwingend notwendig)
      6. End Sub


      Nun kommen wir zum Zeichnen der Control: Alles Nachfolgende schreibt ihr in das Sub:

      VB.NET-Quellcode

      1. Private Sub Grafik(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
      2. End Sub


      Zunächst müssen wir festlegen mit welcher Qualität wir zeichnen wollen: in unserem fall "High Quality"

      VB.NET-Quellcode

      1. e.Graphics.SmoothingMode = SmoothingMode.HighQuality


      Als nächstes deffinieren wir alle variablen die wir zum Zeichnen brauchen:

      VB.NET-Quellcode

      1. 'Höhe des Hintergrundes
      2. Dim HintergrundH As Integer = MyBase.ClientRectangle.Height
      3. 'Breite des Hintergrundes
      4. Dim HintergrundB As Integer = MyBase.ClientRectangle.Width
      5. 'Höhe des Anzeigebalkens
      6. Dim BalkenH As Integer = MyBase.ClientRectangle.Height
      7. 'Differenz zwischen Maximum und Minimun
      8. Dim Diff As Integer = MyBase.Maximum - MyBase.Minimum
      9. 'Breite des Anzeigebalkens
      10. Dim BalkenB As Integer = CInt((HintergrundB / Diff) * Value)
      11. 'Obere Hintergrundfarbe (Dunkles Grau)
      12. Dim HintergrundfarbeOben As Color = Color.DimGray
      13. 'Untere Hintergrundfarbe (Helles Grau)
      14. Dim HintergrundfarbeUnten As Color = Color.DarkGray
      15. 'Obere Balkenfarbe (Helles Grün)
      16. Dim BalkenfarbeOben As Color = Color.Lime
      17. 'Untere Balkenfarbe (Dunkles Grün)
      18. Dim BalkenfarbeUnten As Color = Color.Green
      19. 'Oberes weiß für das Glas
      20. Dim GlasOben As Color = Color.FromArgb(100, 255, 255, 255)
      21. 'Unteres weiß für das Glas
      22. Dim GlasUnten As Color = Color.FromArgb(40, 255, 255, 255)
      23. 'Brush für den Hintergrund
      24. Dim HintergrundBrush As New LinearGradientBrush(New Point(0, 0), New Point(0, HintergrundH), HintergrundfarbeOben, HintergrundfarbeUnten)
      25. 'Brush für den Balken
      26. Dim Balkenbrush As New LinearGradientBrush(New Point(0, 0), New Point(0, BalkenH), BalkenfarbeOben, BalkenfarbeUnten)
      27. 'Brush für das Glas
      28. Dim glass As New LinearGradientBrush(New Point(0, 0), New Point(0, BalkenH), GlasOben, GlasUnten)


      Nun zeichnen wir den Hintergrund:

      VB.NET-Quellcode

      1. e.Graphics.FillRectangle(HintergrundBrush, 0, 0, HintergrundB, HintergrundH)


      Als nächstes den Balken:

      VB.NET-Quellcode

      1. e.Graphics.FillRectangle(Balkenbrush, 0, 0, BalkenB, BalkenH)


      Und zum schluss den GlasEffect:

      VB.NET-Quellcode

      1. e.Graphics.FillRectangle(glass, 0, 0, BalkenB, CInt(BalkenH / 3))


      So hier nochmal der der gesamte code Zusammengefasst:

      VB.NET-Quellcode

      1. Option Strict On
      2. Imports System.Drawing
      3. Imports System.Drawing.Drawing2D
      4. Imports System.ComponentModel
      5. Imports System.Windows.Forms
      6. Public Class MyProgressbar
      7. Inherits ProgressBar 'Die Control von Progressbar erben lassen
      8. Public Sub New()
      9. MyBase.New()
      10. MyBase.SetStyle(ControlStyles.UserPaint, True) 'Der controll sagen das wir sie zeichnen
      11. MyBase.SetStyle(ControlStyles.DoubleBuffer, True) 'DoubleBuffer aktivieren
      12. MyBase.SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'Transparente hintergrundfarbe aktivieren (für diese anwendung nicht zwingend notwendig)
      13. End Sub
      14. Private Sub Grafik(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
      15. 'Einstellen dass die balken und linien mit hoher Qualität gezeichnet werden
      16. e.Graphics.SmoothingMode = SmoothingMode.HighQuality
      17. 'Höhe des Hintergrundes
      18. Dim HintergrundH As Integer = MyBase.ClientRectangle.Height
      19. 'Breite des Hintergrundes
      20. Dim HintergrundB As Integer = MyBase.ClientRectangle.Width
      21. 'Höhe des Anzeigebalkens
      22. Dim BalkenH As Integer = MyBase.ClientRectangle.Height
      23. 'Differenz zwischen Maximum und Minimun
      24. Dim Diff As Integer = MyBase.Maximum - MyBase.Minimum
      25. 'Breite des Anzeigebalkens
      26. Dim BalkenB As Integer = CInt((HintergrundB / Diff) * Value)
      27. 'Obere Hintergrundfarbe (Dunkles Grau)
      28. Dim HintergrundfarbeOben As Color = Color.DimGray
      29. 'Untere Hintergrundfarbe (Helles Grau)
      30. Dim HintergrundfarbeUnten As Color = Color.DarkGray
      31. 'Obere Balkenfarbe (Helles Grün)
      32. Dim BalkenfarbeOben As Color = Color.Lime
      33. 'Untere Balkenfarbe (Dunkles Grün)
      34. Dim BalkenfarbeUnten As Color = Color.Green
      35. 'Oberes weiß für das Glas
      36. Dim GlasOben As Color = Color.FromArgb(100, 255, 255, 255)
      37. 'Unteres weiß für das Glas
      38. Dim GlasUnten As Color = Color.FromArgb(40, 255, 255, 255)
      39. 'Brush für den Hintergrund
      40. Dim HintergrundBrush As New LinearGradientBrush(New Point(0, 0), New Point(0, HintergrundH), HintergrundfarbeOben, HintergrundfarbeUnten)
      41. 'Brush für den Balken
      42. Dim Balkenbrush As New LinearGradientBrush(New Point(0, 0), New Point(0, BalkenH), BalkenfarbeOben, BalkenfarbeUnten)
      43. 'Brush für das Glas
      44. Dim glass As New LinearGradientBrush(New Point(0, 0), New Point(0, BalkenH), GlasOben, GlasUnten)
      45. 'Zeichnen des Hintergrundes
      46. e.Graphics.FillRectangle(HintergrundBrush, 0, 0, HintergrundB, HintergrundH)
      47. 'Zeichnen des Balken
      48. e.Graphics.FillRectangle(Balkenbrush, 0, 0, BalkenB, BalkenH)
      49. 'Zeichnen des GlasEffects
      50. e.Graphics.FillRectangle(glass, 0, 0, BalkenB, CInt(BalkenH / 3))
      51. End Sub
      52. End Class


      Um die controll zu verwenden Erstellt ihr das Projekt und geht in VS einfach auf Extras-->Toolboxelemente hinzufügen und fügt die Dll dieses Projektes hinzu.

      Dieses Tut ist nicht als C&P quelle gedacht sondern soll die grundlegende Vorgehensweise beim Erstellen eines eigenen Controls zeigen.

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Wulf“ ()