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
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
Here is one at Code Project
http://www.codeproject.com/Articles/...Mac-OS-X-style
thanks for the link but isnt that code in C#?
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.
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.
Last edited by rafter_01; Feb 22nd, 2012 at 05:55 AM. Reason: missed q
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.
2007-2013
Why is my data not saved to my database? | Communicating between multiple forms | MSDN Data Walkthroughs
MSDN "How Do I?" Videos: VB | C#
VBForums Database Development FAQ
My CodeBank Submissions: VB (*NEW* More Random Random Numbers) | C# (*NEW* More Random Random Numbers)
My Blog: Using Parameters in ADO.NET | Keyboard Events | Assemblies & Namespaces
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.
2007-2013
Why is my data not saved to my database? | Communicating between multiple forms | MSDN Data Walkthroughs
MSDN "How Do I?" Videos: VB | C#
VBForums Database Development FAQ
My CodeBank Submissions: VB (*NEW* More Random Random Numbers) | C# (*NEW* More Random Random Numbers)
My Blog: Using Parameters in ADO.NET | Keyboard Events | Assemblies & Namespaces
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.
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.
2007-2013
Why is my data not saved to my database? | Communicating between multiple forms | MSDN Data Walkthroughs
MSDN "How Do I?" Videos: VB | C#
VBForums Database Development FAQ
My CodeBank Submissions: VB (*NEW* More Random Random Numbers) | C# (*NEW* More Random Random Numbers)
My Blog: Using Parameters in ADO.NET | Keyboard Events | Assemblies & Namespaces
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.
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.
"Ok, my response to that is pending a Google search" - Bucky Katt.
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:
A few notes:vb Code:
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
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
Last edited by boops boops; Feb 23rd, 2012 at 06:17 AM. Reason: no link to image - just r.click it!
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
If it's "bouncing" the image must be off-center. The code works perfectly for me, and I can't see how it can go wrong unless you grabbed the image instead of downloading it. Just to be sure, I've put a zipped copy of the PNG file in the download link below. Please try with this image.
I'll try to answer your other questions later.
BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
There must be something different in your code. I wonder if you coded the Paint event handler of the Form instead of the Picture Box? If that's possible, check the Handles clause (the end of line 5 in the code I posted). Otherwise, if you have changed anything else in the paint sub, please post the code.
BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
The code ive implemented:
Code:Public Class Form1 Private rotaryImage As Image = Image.FromFile("C:\Users\Downloads\RotaryIndicator\RotaryIndicator.png") Private spokeCount As Integer = 14 Private angle As Single = 0 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal 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(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click If Timer1.Enabled = False Then ResetRotaryIndicator() StartRotaryIndicator() PictureBox1.Show() Else StopRotaryIndicator() PictureBox1.Hide() End If End Sub Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal 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 End Class
Last edited by rafter_01; Feb 23rd, 2012 at 12:58 PM.
I'm baffled. Your code is identical to what I posted (except of course for the file path). To be sure I even started a new project in VB2008 with a copy of your code and my own original image, and the indicator turned smoothly around its center without bouncing. BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
BB,
ive tried this on a different machine, the same code the same way but still the circle hoovers around. Also for some strange reason now the rotation is very slow...
![]()
hi rafter,
I don't know if it will help, but could you post the code in your form's designer file? To get that, click the "show all files" button at the top of the Solution Explorer, click the + sign next to Form1.vb, and open the Form1.Designer.vb file.
The designer file contains all the code that is generated automatically in the forms designer. It's useful to know about anyway if you want to develop your own controls.
BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
the code for my forms designer is:
Code:<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _ Partial Class Form1 Inherits System.Windows.Forms.Form 'Form overrides dispose to clean up the component list. <System.Diagnostics.DebuggerNonUserCode()> _ Protected Overrides Sub Dispose(ByVal disposing As Boolean) Try If disposing AndAlso components IsNot Nothing Then components.Dispose() End If Finally MyBase.Dispose(disposing) End Try End Sub 'Required by the Windows Form Designer Private components As System.ComponentModel.IContainer 'NOTE: The following procedure is required by the Windows Form Designer 'It can be modified using the Windows Form Designer. 'Do not modify it using the code editor. <System.Diagnostics.DebuggerStepThrough()> _ Private Sub InitializeComponent() Me.components = New System.ComponentModel.Container Me.PictureBox1 = New System.Windows.Forms.PictureBox Me.Button1 = New System.Windows.Forms.Button Me.Timer1 = New System.Windows.Forms.Timer(Me.components) CType(Me.PictureBox1, System.ComponentModel.ISupportInitialize).BeginInit() Me.SuspendLayout() ' 'PictureBox1 ' Me.PictureBox1.BackColor = System.Drawing.Color.Transparent Me.PictureBox1.Location = New System.Drawing.Point(81, 65) Me.PictureBox1.Name = "PictureBox1" Me.PictureBox1.Size = New System.Drawing.Size(50, 50) Me.PictureBox1.TabIndex = 0 Me.PictureBox1.TabStop = False ' 'Button1 ' Me.Button1.Location = New System.Drawing.Point(182, 215) Me.Button1.Name = "Button1" Me.Button1.Size = New System.Drawing.Size(75, 23) Me.Button1.TabIndex = 1 Me.Button1.Text = "Button1" Me.Button1.UseVisualStyleBackColor = True ' 'Timer1 ' Me.Timer1.Interval = 1000 ' 'Form1 ' Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!) Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font Me.ClientSize = New System.Drawing.Size(284, 262) Me.Controls.Add(Me.Button1) Me.Controls.Add(Me.PictureBox1) Me.Name = "Form1" Me.Text = "Form1" CType(Me.PictureBox1, System.ComponentModel.ISupportInitialize).EndInit() Me.ResumeLayout(False) End Sub Friend WithEvents PictureBox1 As System.Windows.Forms.PictureBox Friend WithEvents Button1 As System.Windows.Forms.Button Friend WithEvents Timer1 As System.Windows.Forms.Timer End Class
Thanks. Nothing to see there, unfortunately, except the timer interval is set to 1000 which might account for the slowness on your other machine. The bouncing must be something to do with the image. I wonder whether it could be the pixel resolution? I saved the image with the default resolution (on my computer) of 120*120, but it might be a different default on your system. Would you please try changing the last line of the Paint sub to this:
It's an overload of the DrawImage method that isn't affected by the pixel resolution. Does it fix the bouncing problem?Code:e.Graphics.DrawImage(rotaryImage, New RectangleF(drawLocation, rotaryImage.Size))
BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
Well I'm glad we got that sorted. Putting the code into a user control seems like a good way of making it reusable and I have a few suggestions about that.
As to changing the color, you could in theory do something using a ColorMatrix in the DrawImage sub, but it would take a lot of working out. I think it would easier (for me) to move on to Stage 2 where you build the image yourself in code and can choose any color. I'll go into details tomorrow (W.European time). Now where's that sleepy smiley....? BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!
I don't know what you find "insane" in stage 1. I hope the basic idea is clear: you use the Timer1.Tick to increase the angle, then you draw the result at that angle in the PictureBox1.Paint sub. The result is a spinning image. I said that the Graphics code in the Paint event is the most difficult part, and I don't expect you to understand that if you are having difficult with other parts. So if you have any other problems, please say what they are.
Stage 2, creating the image in code, is all graphics stuff. In principle it is the same as the code in the CodeBank example that kevininstructor linked to in page 2, although I think I can explain my version in slightly easier steps. Still, it sounds like you aren't ready to understand the details of it.
As to Stage 3, making it into a reusable control, I think you came up with a better (or a least easier) way yourself. So first of all I'll tell you about my suggestions for the UserControl.
1. You don't need the Button in the UserControl because that is only for testing purposes. The code for the button could go on a test form which hosts your user control.
2. Set the Dock property of the picture box to DockStyle.Fill (you can do that in the designer).
3. The three subs on lines 19-29 of the code I posted need to be Public instead of Private. That is so that you can call them from the form. Maybe it would be a good idea to shorten their names like this:
(note: "Stop" has to have square brackets round it when you use it as the name of a sub, because it's a reserved word.) The idea is that when you put your user control onto a form, you can start, stop and reset the rotation whenever you like. Let's suppose you call your user control ProgressUC. On the form, you would use it like this:Code:Public Sub Start() rotationTimer.Start() End Sub Public Sub [Stop]() rotationTimer.Stop() End Sub Private Sub Reset() wheelRotation = 0 Me.Invalidate() End Sub
I hope you can follow all this. If you want my code for designing the image yourself (stage 2) I can do that next.Code:ProgressUC.Show ProgressUC.Start 'do long process ProgressUC.Stop ProgressUC.Hide
BB
Code bank stuff:
Rapid pixel processing with FastPix (LockBits wrapper)
Slide show with cross-fading
Three Dimensional Text in GDI+
Pangram Tester
Extended OpenFileDialog -- opens in Thumbnail View etc.
ZoomPictureBox: 3 zooming modes and mouse drag
"Shaped Form" with soft drop shadow, translucent colours -- using WPF!