Loading progress Circle?

[rafter_01]

Afternoon,

searched the web but cannot find any type of code that will allow me to implement a loading circle. Can someone please post me some code that can achieve this?

or can vb2008 allow me to change the look of the original proress bar?

ta

[kareninstructor]

Here is one at Code Project
http://www.codeproject.com/Articles/...Mac-OS-X-style

[rafter_01]

thanks for the link but isnt that code in C#?

[OhGreen]

The link Kevin posted is really helpful even if it is in C#, I've previously created my own circular progress bar within VB.NET but not even considered the method he used.

My advice rafter would be to have a go at creating the control yourself, that way you become the artist and you can make changes in anyway you like. You can use not only the method mentioned in the post, but also if you didn't know, the syntax of C# is easily converted if it's not already the same.

If you have any problems, post here and I'll have a look for you.

[rafter_01]

The link Kevin posted is really helpful even if it is in C#, I've previously created my own circular progress bar within VB.NET but not even considered the method he used.

My advice rafter would be to have a go at creating the control yourself, that way you become the artist and you can make changes in anyway you like. You can use not only the method mentioned in the post, but also if you didn't know, the syntax of C# is easily converted if it's not already the same.

If you have any problems, post here and I'll have a look for you.

thanks for the advice, ive tried converting it to vb.net but its way above me..

i need to familiarize myself firstly with vb.net before anything else.

can i have a look at the vb.net code that you did for the progress bar?

ta

[Niya]

thanks for the advice, ive tried converting it to vb.net but its way above me..

i need to familiarize myself firstly with vb.net before anything else.

can i have a look at the vb.net code that you did for the progress bar?

ta

Why not simply download the one from the link and use that ?

[OhGreen]

I don't personally like gifting answers, I feel that you don't learn anything that way.

Method:

The idea is to draw two imaginary circles, one smaller than the other and placed in the middle of the larger.

You then, draw a line from a point on the smaller circle to a point on the larger circle.

Using the tick event of a timer, you can keep painting the next line on the next two points.

For now that is your aim.

To do that, take some baby steps:

- Do some googling, learn how to paint a line on a form. Once you've done it, play around with changing it's colour, location etc until you're confident.

- Make sure you know how to use a timer to move that line and draw it somewhere else. To do this, make some integer variables and use them as your x and y locations for the line, then on timer tick add 10 to the variables and redraw.

You may not like the fact I'm not doing the work for you, but you'll learn a lot by trying the above.

[rafter_01]

I don't personally like gifting answers, I feel that you don't learn anything that way.

Method:

The idea is to draw two imaginary circles, one smaller than the other and placed in the middle of the larger.

You then, draw a line from a point on the smaller circle to a point on the larger circle.

Using the tick event of a timer, you can keep painting the next line on the next two points.

For now that is your aim.

To do that, take some baby steps:

- Do some googling, learn how to paint a line on a form. Once you've done it, play around with changing it's colour, location etc until you're confident.

- Make sure you know how to use a timer to move that line and draw it somewhere else. To do this, make some integer variables and use them as your x and y locations for the line, then on timer tick add 10 to the variables and redraw.

You may not like the fact I'm not doing the work for you, but you'll learn a lot by trying the above.

"You may not like the fact I'm not doing the work for you", dont worry about it.. ill see what i can do.. but thanks for your advice

[rafter_01]

I don't personally like gifting answers, I feel that you don't learn anything that way.

Method:

The idea is to draw two imaginary circles, one smaller than the other and placed in the middle of the larger.

You then, draw a line from a point on the smaller circle to a point on the larger circle.

Using the tick event of a timer, you can keep painting the next line on the next two points.

For now that is your aim.

To do that, take some baby steps:

- Do some googling, learn how to paint a line on a form. Once you've done it, play around with changing it's colour, location etc until you're confident.

- Make sure you know how to use a timer to move that line and draw it somewhere else. To do this, make some integer variables and use them as your x and y locations for the line, then on timer tick add 10 to the variables and redraw.

You may not like the fact I'm not doing the work for you, but you'll learn a lot by trying the above.

so, does the code that i right for drawing two circles go into a class that is attached to the project?

so if when i start by drawing a line on the form, will all my drawing code go in a class or directly in my form code?

[jmcilhinney]

I would think that the most logical thing to do would be to create a custom control. You could inherit the PictureBox for example, which is already optimised for graphics, and override its OnPaint method to do the drawing. You then have all the logic encapsulated in a control that you can simply add to a form from the Toolbox, just like any other control. You could add logic to set the speed of the animation if you wanted and various other things like that.

[rafter_01]

I would think that the most logical thing to do would be to create a custom control. You could inherit the PictureBox for example, which is already optimised for graphics, and override its OnPaint method to do the drawing. You then have all the logic encapsulated in a control that you can simply add to a form from the Toolbox, just like any other control. You could add logic to set the speed of the animation if you wanted and various other things like that.

thanks for this but me bieng new to vb, would my override code go into a seperate class ?

[jmcilhinney]

It would go in the custom control, which inherits PictureBox. You can't override a member of a class anywhere other than inside that class.

[OhGreen]

I would've thought creating a custom control would be a bit of a stretch for someone new to VB?

That's the only reason I suggested a more primitive "draw it yourself" technique.

[jmcilhinney]

It may seem like an advanced concept but the code you put in an overridden OnPaint method will be the same as the code you put in a Paint event handler, so you get a more flexible outcome from basically the same work.

[rafter_01]

It may seem like an advanced concept but the code you put in an overridden OnPaint method will be the same as the code you put in a Paint event handler, so you get a more flexible outcome from basically the same work.

guys im confused

whats the difference between overriden OnPaint Method and paint event handler?

[kareninstructor]

If you have time to create your own control as jmc recommended this would be best as you have full control over it. If instead time is important then I would use the control at Code Project. Simply compile the project which creates CircularProgressbarControl.dll and then reference this in your project, there is no need to convert this control to VB.NET as all we care about is in the end the control does what you want.

[SJWhiteley]

guys im confused

whats the difference between overriden OnPaint Method and paint event handler?

The OnPaint method is called when a control needs painting. This method will raise the Paint event.

So, you can either handle the Paint event, by effectively adding an event handler, or you can override the OnPaint event. In the latter case, *your* method will be called when the control needs painting.

If you are performing painting/drawing within the control, you will ordinarily override the OnPaint event - this will leave the Paint method to be handled exclusively by the consumer of the control (e.g. the form that the control is hosted on).

While handling the Paint event within the control *can* work, if the consumer also handles the paint event, it can lead to unpredictable behavior (multiple consumers of an event) since the order in which the methods are called that handle the event is not strictly defined. By overriding the OnPaint event you are ensuring that your drawing in that method is performed before (or after) the event handlers. You will raise the Paint method by calling the base OnPaint method that you overrode.

The short answer is that you will always use the (overridden) OnPaint method when drawing within your own control.

[boops boops]

Hi rafter, it wouldn't surprise me if you are suffering from information overload. I agree with OGreen, start simple. I suggest you break it down into three stages.

Stage 1. Take an image like this (right click to save) and get it rotating in a picture box on a form. I'll give you an example of the code below.

Stage 2. Generate the image yourself in code, so that you can change values like the color, the number of spokes, the line thickness etc.

Stage 3. If you want to use the progress indicator in other projects, you could consider turning it into a custom control. That's not too hard in theory -- a lot of the code will be the same as in stage1/stage2. But in practice it can be a lot of work especially if you have a lot of properties you want to expose in the designer. And there are pitfalls.

Here's what I suggest for Stage 1. Open a form, and add a picture box(PictureBox1, Size about 50x50 pixels, BackColor = Transparent. Leave other properties at default.), a Button (Button1) and a Timer (Timer1, Interval = 100). Try the following code to start and stop rotation:

Private rotaryImage As Image = Image.FromFile(_image file path+name _)
    Private spokeCount As Integer = 14
    Private angle As Single = 0
 
    Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
        Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
        e.Graphics.TranslateTransform(center.X, center.Y)
        e.Graphics.RotateTransform(angle)
        e.Graphics.TranslateTransform(-center.X, -center.Y)
        e.Graphics.DrawImage(rotaryImage, drawLocation)
    End Sub
 
    Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
        angle += 360.0F / spokeCount
        PictureBox1.Invalidate()
    End Sub
 
    Private Sub StartRotaryIndicator()
        Timer1.Start()
    End Sub
 
    Private Sub StopRotaryIndicator()
        Timer1.Stop()
    End Sub
 
    Private Sub ResetRotaryIndicator()
        angle = 0
    End Sub
 
    Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        If Timer1.Enabled = False Then
            ResetRotaryIndicator()
            StartRotaryIndicator()
            PictureBox1.Show()
        Else
            StopRotaryIndicator()
            PictureBox1.Hide()
        End If
    End Sub

A few notes:
1. SpokeCount = 14 is the number of spokes in this particular image.
2. The only complicated part is in the Paint event. You have to shift the center of rotation from the origin to the actual center (line 8), then do the rotation (line 9), and then shift it back again (line 10).
3. The control is transparent, but only to its Parent control - normally the form. If you want to show it on a button, for example, you need to set PictureBox1.Parent = button and adjust the Location accordingly. This limitation applies to all transparency in Windows Forms controls.

BB

[rafter_01]

Hi rafter, it wouldn't surprise me if you are suffering from information overload. I agree with OGreen, start simple. I suggest you break it down into three stages.

Stage 1. Take an image like this (right click to save) and get it rotating in a picture box on a form. I'll give you an example of the code below.

Stage 2. Generate the image yourself in code, so that you can change values like the color, the number of spokes, the line thickness etc.

Stage 3. If you want to use the progress indicator in other projects, you could consider turning it into a custom control. That's not too hard in theory -- a lot of the code will be the same as in stage1/stage2. But in practice it can be a lot of work especially if you have a lot of properties you want to expose in the designer. And there are pitfalls.

Here's what I suggest for Stage 1. Open a form, and add a picture box(PictureBox1, Size about 50x50 pixels, BackColor = Transparent. Leave other properties at default.), a Button (Button1) and a Timer (Timer1, Interval = 100). Try the following code to start and stop rotation:

Private rotaryImage As Image = Image.FromFile(_image file path+name _)
    Private spokeCount As Integer = 14
    Private angle As Single = 0
 
    Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
        Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
        e.Graphics.TranslateTransform(center.X, center.Y)
        e.Graphics.RotateTransform(angle)
        e.Graphics.TranslateTransform(-center.X, -center.Y)
        e.Graphics.DrawImage(rotaryImage, drawLocation)
    End Sub
 
    Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
        angle += 360.0F / spokeCount
        PictureBox1.Invalidate()
    End Sub
 
    Private Sub StartRotaryIndicator()
        Timer1.Start()
    End Sub
 
    Private Sub StopRotaryIndicator()
        Timer1.Stop()
    End Sub
 
    Private Sub ResetRotaryIndicator()
        angle = 0
    End Sub
 
    Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        If Timer1.Enabled = False Then
            ResetRotaryIndicator()
            StartRotaryIndicator()
            PictureBox1.Show()
        Else
            StopRotaryIndicator()
            PictureBox1.Hide()
        End If
    End Sub

A few notes:
1. SpokeCount = 14 is the number of spokes in this particular image.
2. The only complicated part is in the Paint event. You have to shift the center of rotation from the origin to the actual center (line 8), then do the rotation (line 9), and then shift it back again (line 10).
3. The control is transparent, but only to its Parent control - normally the form. If you want to show it on a button, for example, you need to set PictureBox1.Parent = button and adjust the Location accordingly. This limitation applies to all transparency in Windows Forms controls.

BB

many many thanks for this,

by the way how do i stop the image from bouncing? i just want it to rotate.

now i must learn how to turn it into a custom control...

[rafter_01]

Hi rafter, it wouldn't surprise me if you are suffering from information overload. I agree with OGreen, start simple. I suggest you break it down into three stages.

Stage 1. Take an image like this (right click to save) and get it rotating in a picture box on a form. I'll give you an example of the code below.

Stage 2. Generate the image yourself in code, so that you can change values like the color, the number of spokes, the line thickness etc.

Stage 3. If you want to use the progress indicator in other projects, you could consider turning it into a custom control. That's not too hard in theory -- a lot of the code will be the same as in stage1/stage2. But in practice it can be a lot of work especially if you have a lot of properties you want to expose in the designer. And there are pitfalls.

Here's what I suggest for Stage 1. Open a form, and add a picture box(PictureBox1, Size about 50x50 pixels, BackColor = Transparent. Leave other properties at default.), a Button (Button1) and a Timer (Timer1, Interval = 100). Try the following code to start and stop rotation:

Private rotaryImage As Image = Image.FromFile(_image file path+name _)
    Private spokeCount As Integer = 14
    Private angle As Single = 0
 
    Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
        Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
        e.Graphics.TranslateTransform(center.X, center.Y)
        e.Graphics.RotateTransform(angle)
        e.Graphics.TranslateTransform(-center.X, -center.Y)
        e.Graphics.DrawImage(rotaryImage, drawLocation)
    End Sub
 
    Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
        angle += 360.0F / spokeCount
        PictureBox1.Invalidate()
    End Sub
 
    Private Sub StartRotaryIndicator()
        Timer1.Start()
    End Sub
 
    Private Sub StopRotaryIndicator()
        Timer1.Stop()
    End Sub
 
    Private Sub ResetRotaryIndicator()
        angle = 0
    End Sub
 
    Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        If Timer1.Enabled = False Then
            ResetRotaryIndicator()
            StartRotaryIndicator()
            PictureBox1.Show()
        Else
            StopRotaryIndicator()
            PictureBox1.Hide()
        End If
    End Sub

A few notes:
1. SpokeCount = 14 is the number of spokes in this particular image.
2. The only complicated part is in the Paint event. You have to shift the center of rotation from the origin to the actual center (line 8), then do the rotation (line 9), and then shift it back again (line 10).
3. The control is transparent, but only to its Parent control - normally the form. If you want to show it on a button, for example, you need to set PictureBox1.Parent = button and adjust the Location accordingly. This limitation applies to all transparency in Windows Forms controls.

BB

btw at stage 2, you mentioned changing the color, thickness etc, how would i implement this?

[MattP]

A quick Google search turned up these:

http://www.codeproject.com/Articles/...r-Progress-Bar

http://www.codeproject.com/Articles/...ET-Framework-C

http://www.codeproject.com/Articles/...to-ProgressBar

http://michaelsync.net/2007/09/06/fr...ogressbar-in-c