ProgressBar mit Animation durch GDI+ und Polygonen im AjaxStyle

    • VB.NET

    Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von diylab.

      ProgressBar mit Animation durch GDI+ und Polygonen im AjaxStyle

      Hallo Forum!
      Diese ProgressBar ist eine Machbarkeitsstudie und basiert auf einer Idee aus diesem Forum in dem Thread Ajax "Progressbar's" v1.1b .
      Dort werden Bilder für die Bar benutzt und die Behauptung aufgestellt, mit 100% GDI+ wäre es nicht möglich, die Balken ruckelfrei zu animieren.
      Der Sache wollte ich nachgehen 8-) ..

      So entstand dieses kleine Control, das ich Euch gern überlassen möchte.
      Ihr könnt lizenzfrei alles damit anstellen (privat & kommerziell).
      Betrachtet diesen Code als Grundgerüst. Das Control ist natürlich in jeder Hinsicht erweiterbar und kann sicher noch optimiert werden.
      Ich würde mich sehr freuen, wenn wir zusammen das Control noch ein bisschen besser machen!

      Der Code der ProgressBar ist dokumentiert, recht einfach und selbsterklärend, darum spare ich mir hier viele Worte.
      Die Entwicklungsumgebung war: Visual Studio 2008, compiliert wurde für das FrameWork 2.0


      Hier das Control:
      Spoiler anzeigen

      VB.NET-Quellcode

      1. Option Explicit On
      2. Option Strict On
      4. Imports System
      5. Imports System.Drawing
      6. Imports System.Drawing.Drawing2D
      7. Imports System.Drawing.Text
      8. Imports System.ComponentModel
      9. Imports System.Timers
      11. Namespace WhiteControlsEx
      13. #Region " Ajax ProgressBar "
      15. Public Class WhiteAjaxProgressBar
      16. Inherits Control
      18. ' timer
      19. Dim tmr As New System.Timers.Timer(25)
      20. Dim offset As Integer
      22. ' minimum value for progress range
      23. Private _min As Integer = 0
      25. ' maximum value for progress range
      26. Private _max As Integer = 100
      28. ' current progress
      29. Private _val As Integer = 0
      31. ' color of progress meter
      32. Private _barColor As Color = Color.Gray
      35. <Category("WhiteAjaxProgressbar")> Public Property Minimum() As Integer
      36. Get
      37. Return _min
      38. End Get
      40. Set(ByVal value As Integer)
      41. ' prevent a negative value
      42. If value < 0 Then
      43. _min = 0
      44. End If
      46. ' make sure that the minimum value is never set higher than the maximum value
      47. If value > _max Then
      48. Return
      49. End If
      51. _min = value
      53. ' invalidate the control to get a repaint
      54. Me.Invalidate()
      55. End Set
      56. End Property
      58. <Category("WhiteAjaxProgressbar")> Public Property Maximum() As Integer
      59. Get
      60. Return _max
      61. End Get
      63. Set(ByVal value As Integer)
      64. ' make sure that the maximum value is never set lower than the minimum value
      65. If value < _min Then
      66. _min = value
      67. End If
      69. _max = value
      71. ' make sure that value is still in range
      72. If _val > _max Then
      73. _val = _max
      74. End If
      76. ' invalidate the control to get a repaint
      77. Me.Invalidate()
      78. End Set
      79. End Property
      81. <Category("WhiteAjaxProgressbar")> Public Property Value() As Integer
      82. Get
      83. Return _val
      84. End Get
      86. Set(ByVal value As Integer)
      87. ' make sure that the value does not stray outside the valid range
      88. If value < _min Then
      89. _val = _min
      90. ElseIf value > _max Then
      91. _val = _max
      92. Else
      93. _val = value
      94. End If
      96. ' invalidate the control to get a repaint
      97. Me.Invalidate()
      98. End Set
      99. End Property
      101. <Category("WhiteAjaxProgressbar")> Public Property BarColor() As Color
      102. Get
      103. Return Me._barColor
      104. End Get
      105. Set(ByVal value As Color)
      106. Me._barColor = value
      108. ' invalidate the control to get a repaint
      109. Me.Invalidate()
      110. End Set
      111. End Property
      114. Public Sub New()
      115. Me.DoubleBuffered = True
      116. Me.BackColor = Color.White
      117. Me.ForeColor = Color.LightGray
      119. offset = -30
      121. AddHandler tmr.Elapsed, AddressOf OnTimedEvent
      122. tmr.Start()
      123. End Sub
      126. Protected Overrides Sub OnResize(ByVal e As EventArgs)
      127. ' invalidate the control to get a repaint
      128. Me.Invalidate()
      129. End Sub
      132. ' timer elapsed
      133. Private Sub OnTimedEvent(ByVal source As Object, ByVal e As ElapsedEventArgs)
      134. offset += 1
      135. If offset = 0 Then offset = -30
      137. ' invalidate the control to get a repaint
      138. Me.Invalidate()
      139. End Sub
      142. Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
      143. ' system painting
      144. MyBase.OnPaint(e)
      146. ' graphics mode
      147. e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
      148. e.Graphics.PixelOffsetMode = PixelOffsetMode.Half
      150. ' paint border
      151. e.Graphics.DrawRectangle(New Pen(Color.LightGray, 2), 2, 2, Me.Width - 4, Me.Height - 4)
      153. ' calculate area for drawing the progress
      154. Dim percent As Double = (_val - _min) / (_max - _min)
      155. Dim rect As Rectangle = New Rectangle(5, 5, Me.Width - 10, Me.Height - 10)
      156. rect.Width = CInt(rect.Width * percent)
      158. ' paint normal bargraph
      159. ' >~~~~~~~~~~~~~~~~~~~~~~
      160. 'e.Graphics.FillRectangle(New SolidBrush(Me.BarColor), rect)
      161. ' <~~~~~~~~~~~~~~~~~~~~~~
      163. ' -= OR =-
      165. ' paint gradient bargraph
      166. ' >~~~~~~~~~~~~~~~~~~~~~~
      167. Try
      168. Dim colors As Color() = {Color.White, Me.BarColor, Me.BarColor, Color.White}
      169. Dim positions As Single() = {0.0F, 0.15F, 0.85F, 1.0F}
      170. Dim blend As New ColorBlend : blend.Colors = colors : blend.Positions = positions
      171. Dim lgb As New LinearGradientBrush(New Point(5, 5), New Point(5, Me.Height - 5), Color.White, Color.White)
      172. lgb.InterpolationColors = blend
      174. e.Graphics.FillRectangle(lgb, rect)
      175. Catch
      176. End Try
      177. ' <~~~~~~~~~~~~~~~~~~~~~~
      179. ' paint polygons
      180. For i = offset To rect.Width Step 30
      181. Dim point_feld() As Point = {New Point(i, Me.Height - 5), New Point(i + 20, 5), New Point(i + 40, 5), New Point(i + 20, Me.Height - 5)}
      183. ' set the clip property
      184. e.Graphics.Clip = New Region(rect)
      186. ' fill the region
      187. e.Graphics.FillPolygon(New SolidBrush(Color.FromArgb(40, 255, 255, 255)), point_feld)
      188. Next
      190. ' stringformat -> h:center, v:center
      191. Dim stringFormat As New StringFormat()
      192. stringFormat.Alignment = StringAlignment.Center
      193. stringFormat.LineAlignment = StringAlignment.Center
      195. ' set the clip property
      196. e.Graphics.Clip = New Region(Me.ClientRectangle)
      198. ' paint text and align center in rectangle
      199. e.Graphics.TextRenderingHint = Drawing.Text.TextRenderingHint.SystemDefault 'quality
      200. e.Graphics.DrawString(Me.Value & "%", Me.Font, New SolidBrush(Me.ForeColor), Me.ClientRectangle, stringFormat)
      201. End Sub
      203. End Class
      205. #End Region
      207. End Namespace



      Und falls Ihr zum Testen das Form auch so aufbaut wie ich, dann hier der Code dazu:
      Spoiler anzeigen

      VB.NET-Quellcode

      1. Option Explicit On
      2. Option Strict On
      5. Public Class frmMain
      7. Private Sub TrackBar1_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TrackBar1.ValueChanged
      8. WhiteAjaxProgressBar1.Value = TrackBar1.Value
      9. End Sub
      11. Private Sub TrackBar2_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TrackBar2.ValueChanged
      12. WhiteAjaxProgressBar2.Value = TrackBar2.Value
      13. End Sub
      15. Private Sub TrackBar3_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TrackBar3.ValueChanged
      16. WhiteAjaxProgressBar3.Value = TrackBar3.Value
      17. End Sub
      19. Private Sub TrackBar4_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TrackBar4.ValueChanged
      20. WhiteAjaxProgressBar4.Value = TrackBar4.Value
      21. End Sub
      23. End Class



      Ein ScreenShot des Controls:



      Download Demo:
      AjaxProgressBarFinal.exe

      Viel Spaß damit und ich freue mich auf Eure Vorschläge zur Verbesserung,
      Bruno :P

      habe ein paar probleme...

      Es kommen 23 Fehler wie "Der Typ Control ist nicht definiert" oder Der Typ "System.Windows.Forms.PaintEventArgs" ist nicht definiert.

      pls help...

      mfg

      Myrax schrieb:

      Gefällt mir wirklich. Kurze Frage, ohne jetzt den Sourcecode durchzuwühlen: wie haste das gemacht, dass die Quer-Balken nicht überlaufen

      Danke für Dein Interesse!

      An dieser Stelle passiert das:

      VB.NET-Quellcode

      1. e.Graphics.Clip = New Region(rect)


      Das Rechteck gibt die Region an, in der gezeichnet wird, der Rest wird weggeclipt.
      Diese Anweisung kann mehrfach in der Paint-Routine vorkommen und ist sehr praktisch.

      LG,
      Bruno

      Myrax schrieb:

      Dann noch ne Frage: wie haste das mit diesem Glasseffekt von den Querbalken?

      Die Polygone werden mit der Farbe "weiß" gezeichnet.
      Da ich aber den Alphawert angebe, sind sie Transparent.
      Das ist in diesem Fall die Zahl 40. Damit legt man die Transparenz fest.
      Geht mit jeder Farbe.

      VB.NET-Quellcode

      1. Color.FromArgb(40, 255, 255, 255)


      LG,
      Bruno

    Facebook