Visual basic circular progress bar

前端 未结 4 1286
耶瑟儿~
耶瑟儿~ 2021-02-09 14:49

I\'m trying to make a software with good UI , but i\'m not professional in VB ... How can i make a circular progress bar ?

for Example

4条回答
  •  抹茶落季
    2021-02-09 15:50

    How about just drawing your own using GDI+.

    You can convert this to your own usercontrol later but this will get you started. It should be fairly self explanatory:

    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
    

    Output

    enter image description here

提交回复
热议问题