Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual basic circular progress bar

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

enter image description here

like image 276
faresabb2 Avatar asked Nov 14 '14 11:11

faresabb2


2 Answers

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

like image 125
Matt Wilko Avatar answered Sep 29 '22 08:09

Matt Wilko


Here's an example of how to update the progress circular bar just when you need, with no flickering due to refresh.

Based on Matt's Code

Simply copy the code in your form Paint Event, properly changing the rectangle size and location to host the circle in your form. Percent is a global variable, when it changes, you can call me.refresh() method to trigger the repaint!

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
like image 23
BR1COP Avatar answered Sep 29 '22 07:09

BR1COP