Visual Basic 环形进度条

Question

我试图制作一个有良好用户界面的软件，但我不是VB专业人员... 我该如何制作一个圆形进度条？

例如：

- faresabb2

---

请参阅http://www.codeproject.com/Articles/30625/Circular-Progress-Indicator和http://www.codeproject.com/Articles/14855/SQL-Server-Circular-Progress-Bar。 - Ňɏssa Pøngjǣrdenlarp

这是用C++构建的，我想用Visual Basic来构建它。 - faresabb2

它们不是C ++，但可以轻松转换为VB。重要的是它们（以及其他）已经构建并准备好使用；您不必重新发明轮子。 - Ňɏssa Pøngjǣrdenlarp

好的，我会尝试将其转换为VB并理解它的工作原理。 - faresabb2

Answer 1

你可以尝试使用 GDI+ 来画出自己的图形。

稍后你可以将其转换为自己的用户控件，但这会让你有个好的开始。这应该是相当容易理解的：

Private Sub Form2_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
    DrawProgress(e.Graphics, New Rectangle(5, 5, 60, 60), 40)
    DrawProgress(e.Graphics, New Rectangle(80, 5, 60, 60), 80)
    DrawProgress(e.Graphics, New Rectangle(155, 5, 60, 60), 57)
End Sub

Private Sub DrawProgress(g As Graphics, rect As Rectangle, percentage As Single)
    'work out the angles for each arc
    Dim progressAngle = CSng(360 / 100 * percentage)
    Dim remainderAngle = 360 - progressAngle

    'create pens to use for the arcs
    Using progressPen As New Pen(Color.LightSeaGreen, 2), remainderPen As New Pen(Color.LightGray, 2)
        'set the smoothing to high quality for better output
        g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
        'draw the blue and white arcs
        g.DrawArc(progressPen, rect, -90, progressAngle)
        g.DrawArc(remainderPen, rect, progressAngle - 90, remainderAngle)
    End Using

    'draw the text in the centre by working out how big it is and adjusting the co-ordinates accordingly
    Using fnt As New Font(Me.Font.FontFamily, 14)
        Dim text As String = percentage.ToString + "%"
        Dim textSize = g.MeasureString(text, fnt)
        Dim textPoint As New Point(CInt(rect.Left + (rect.Width / 2) - (textSize.Width / 2)), CInt(rect.Top + (rect.Height / 2) - (textSize.Height / 2)))
        'now we have all the values draw the text
        g.DrawString(text, fnt, Brushes.Black, textPoint)
    End Using
End Sub

输出

- Matt Wilko

---

谢谢，那个很好用，但是如果您知道如何将其设置为比“HighQuality”更高的质量，该怎么办？ - faresabb2

老兄，你是大师！ - Roni Tovi

Answer 2

这是一个关于如何更新进度环形条的例子，可以在需要时进行更新，不会因刷新而闪烁。

基于Matt的代码。

只需将代码复制到您的表单Paint事件中，适当更改矩形大小和位置以容纳圆形在您的表单中。百分比是全局变量，当它改变时，您可以调用me.refresh()方法来触发重绘！

Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint

    Dim g As Graphics = e.Graphics
    Dim rect As New Rectangle(70, 45, 90, 90)


    Dim curvatura_progress = CSng(360 / 100 * percent)
    Dim curvatura_rimanente = 360 - curvatura_progress 


    Using tratto_progresso As New Pen(Color.Lime, 4), tratto_rimanente As New Pen(Color.White, 4)

        g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias

        g.DrawArc(tratto_progresso, rect, -90, curvatura_progress)
        g.DrawArc(tratto_rimanente, rect, curvatura_progress - 90, curvatura_rimanente)
    End Using

           Using fnt As New Font(Me.Font.FontFamily, 14)

        Dim text As String = percent.ToString + "%"

                    Dim textSize = g.MeasureString(text, fnt)
        Dim textPoint As New Point(CInt(rect.Left + (rect.Width / 2) - (textSize.Width / 2)), CInt(rect.Top + (rect.Height / 2) - (textSize.Height / 2)))

        g.DrawString(text, fnt, Brushes.Black, textPoint)

    End Using

End Sub

- BR1COP

---

只需添加 Dim percent As Single，这可能被 BR1COP 忽略。 - Laxmikant Bhumkar

Answer 3

@faresabb2 在 Form2.Paint 子程序的代码开头处放置

e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality

- user2155059

Answer 4

这是用户控件

Imports System.ComponentModel
Imports System.Drawing.Drawing2D
Public Class CircularProgressBar
    Inherits UserControl
    Public Enum _ProgressShape
        Round
        Flat
    End Enum
    Public Enum _TextMode
        None
        Value
        Percentage
        [Custom]
    End Enum
    Private _Value As Integer = 0
    Private _Maximum As Integer = 100
    Private _LineWitdh As Integer = 5
    Private _BarWidth As Single = 11
    Private _ProgressColor1 As Color = Color.Orange
    Private _ProgressColor2 As Color = Color.Orange
    Private _LineColor As Color = Color.LightGray
    Private _GradientMode As LinearGradientMode = LinearGradientMode.ForwardDiagonal
    Private ProgressShapeVal As _ProgressShape
    Private ProgressTextMode As _TextMode
    Private _ShadowOffset As Single = 0
    Public Sub New()
        MyBase.SuspendLayout()
        'SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.UserPaint Or ControlStyles.ResizeRedraw Or ControlStyles.OptimizedDoubleBuffer Or ControlStyles.SupportsTransparentBackColor Or ControlStyles.Opaque, True)
        SetStyle(ControlStyles.SupportsTransparentBackColor, True)
        SetStyle(ControlStyles.Opaque, True)
        BackColor = SystemColors.Control
        ForeColor = Color.DimGray
        Size = New Size(75, 75)
        Font = New Font("Segoe UI", 15)
        MinimumSize = New Size(58, 58)
        DoubleBuffered = True
        LineColor = Color.LightGray
        Value = 50
        ProgressShape = _ProgressShape.Flat
        TextMode = _TextMode.Percentage
        MyBase.ResumeLayout(False)
        MyBase.PerformLayout()
    End Sub
    <Description("Integer Value that determines the position of the Progress Bar."), Category("Behavior")>
    Public Property Value() As Long
        Get
            Return _Value
        End Get
        Set
            If Value > _Maximum Then
                Value = _Maximum
            End If
            _Value = Value
            Invalidate()
        End Set
    End Property
    <Description("Gets or Sets the Maximum Value of the Progress bar."), Category("Behavior")>
    Public Property Maximum() As Long
        Get
            Return _Maximum
        End Get
        Set
            If Value < 1 Then
                Value = 1
            End If
            _Maximum = Value
            Invalidate()
        End Set
    End Property
    <Description("Initial Color of Progress Bar"), Category("Appearance")>
    Public Property BarColor1() As Color
        Get
            Return _ProgressColor1
        End Get
        Set
            _ProgressColor1 = Value
            Invalidate()
        End Set
    End Property
    <Description("Final Color of Progress Bar"), Category("Appearance")> Public Property BarColor2() As Color
        Get
            Return _ProgressColor2
        End Get
        Set
            _ProgressColor2 = Value
            Invalidate()
        End Set
    End Property
    <Description("Progress Bar Width"), Category("Appearance")>
    Public Property BarWidth() As Single
        Get
            Return _BarWidth
        End Get
        Set
            _BarWidth = Value
            Invalidate()
        End Set
    End Property
    <Description("Modo del Gradiente de Color"), Category("Appearance")>
    Public Property GradientMode() As LinearGradientMode
        Get
            Return _GradientMode
        End Get
        Set
            _GradientMode = Value
            Invalidate()
        End Set
    End Property
    <Description("Color de la Linea Intermedia"), Category("Appearance")>
    Public Property LineColor() As Color
        Get
            Return _LineColor
        End Get
        Set
            _LineColor = Value
            Invalidate()
        End Set
    End Property
    <Description("Width of Intermediate Line"), Category("Appearance")>
    Public Property LineWidth() As Integer
        Get
            Return _LineWitdh
        End Get
        Set
            _LineWitdh = Value
            Invalidate()
        End Set
    End Property
    <Description("Get or Set the Shape of the progress bar terminals."), Category("Appearance")>
    Public Property ProgressShape() As _ProgressShape
        Get
            Return ProgressShapeVal
        End Get
        Set
            ProgressShapeVal = Value
            Invalidate()
        End Set
    End Property
    <Description("Modo del Gradiente de Color"), Category("Appearance")>
    Public Property ShadowOffset() As Integer
        Get
            Return _ShadowOffset
        End Get
        Set
            If Value > 2 Then
                Value = 2
            End If
            _ShadowOffset = Value
            Invalidate()
        End Set
    End Property
    <Description("Get or Set the Mode as the Text is displayed inside the Progress bar."), Category("Behavior")>
    Public Property TextMode() As _TextMode
        Get
            Return ProgressTextMode
        End Get
        Set
            ProgressTextMode = Value
            Invalidate()
        End Set
    End Property
    Protected Overloads Overrides Sub OnResize(e As EventArgs)
        MyBase.OnResize(e)
        SetStandardSize()
    End Sub
    Protected Overloads Overrides Sub OnSizeChanged(e As EventArgs)
        MyBase.OnSizeChanged(e)
        SetStandardSize()
    End Sub
    Protected Overloads Overrides Sub OnPaintBackground(p As PaintEventArgs)
        MyBase.OnPaintBackground(p)
    End Sub
    Private Sub SetStandardSize()
        Dim _Size As Integer = Math.Max(Width, Height)
        Size = New Size(_Size, _Size)
    End Sub
    Public Sub Increment(Val As Integer)
        _Value += Val
        Invalidate()
    End Sub
    Public Sub Decrement(Val As Integer)
        _Value -= Val
        Invalidate()
    End Sub
    'Protected Overloads Overrides Sub OnPaint(e As PaintEventArgs)
    Protected Overrides Sub OnPaint(e As PaintEventArgs)
        Using bitmap As New Bitmap(Width, Height)
            Using graphics As Graphics = Graphics.FromImage(bitmap)
                graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear
                graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality
                graphics.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality
                graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
                graphics.TextRenderingHint = Drawing.Text.TextRenderingHint.AntiAliasGridFit
                PaintTransparentBackground(Me, e)
                Dim rect As Rectangle = New Rectangle(10, 10, MyBase.Width - 20, MyBase.Width - 20)
                Using mBackColor As Brush = New SolidBrush(BackColor)
                    graphics.FillEllipse(mBackColor, rect)
                End Using
                Using pen2 As New Pen(LineColor, LineWidth)
                    graphics.DrawEllipse(pen2, rect)
                End Using
                Using brush As New LinearGradientBrush(ClientRectangle, _ProgressColor1, _ProgressColor2, GradientMode)
                    Using pen As New Pen(brush, BarWidth)
                        Select Case ProgressShapeVal
                            Case _ProgressShape.Round
                                pen.StartCap = LineCap.Round
                                pen.EndCap = LineCap.Round
                                Exit Select
                            Case _ProgressShape.Flat
                                pen.StartCap = LineCap.Flat
                                pen.EndCap = LineCap.Flat
                                Exit Select
                        End Select
                        graphics.DrawArc(pen, rect, -90, CType((360 / _Maximum) * _Value, Integer))

                    End Using
                End Using

                Select Case TextMode
                    Case _TextMode.None
                        Text = String.Empty
                        Exit Select
                    Case _TextMode.Value
                        Text = _Value.ToString()
                        Exit Select
                    Case _TextMode.Percentage
                        Text = Convert.ToString((100 / _Maximum) * _Value) & "%"
                        Exit Select
                    Case _TextMode.Custom
                        Text = Text
                        Exit Select
                    Case Else
                        Exit Select
                End Select

                If Text IsNot String.Empty Then
                    Dim MS As SizeF = graphics.MeasureString(Text, Font)
                    Dim shadowBrush As New SolidBrush(Color.FromArgb(100, ForeColor))
                    If ShadowOffset > 0 Then graphics.DrawString(Text, Font, shadowBrush, (Width / 2 - MS.Width / 2) + ShadowOffset, (Height / 2 - MS.Height / 2) + ShadowOffset)
                    graphics.DrawString(Text, Font, New SolidBrush(ForeColor), (Width / 2 - MS.Width / 2), (Height / 2 - MS.Height / 2))
                End If
                MyBase.OnPaint(e)

                e.Graphics.DrawImage(bitmap, 0, 0)
                graphics.Dispose()
            End Using
        End Using
    End Sub
    Private Shared Sub PaintTransparentBackground(c As Control, e As PaintEventArgs)
        If c.Parent Is Nothing OrElse Not Application.RenderWithVisualStyles Then
            Return
        End If
        ButtonRenderer.DrawParentBackground(e.Graphics, c.ClientRectangle, c)
    End Sub

    Private Sub FillCircle(g As Graphics, brush As Brush, centerX As Single, centerY As Single, radius As Single)
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear
        g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality
        g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
        Using gp As New System.Drawing.Drawing2D.GraphicsPath()
            g.FillEllipse(brush, centerX - radius, centerY - radius, radius + radius, radius + radius)
        End Using
    End Sub
End Class

- XCoder