How to get a progress bar like in this picture in vb.net? Please help

Hello,

I need a progress bar, like this:
Attachment 100215

But by as you know, by default we get a progress bar like this:

Attachment 100217

Please help me to code/get the progress bar like in the first picture, I do NOT need the buttons.

I need it to be, when i click on a button (lets say Button1), The progress should slowly go to %100 in rectangle by rectangle format.

Please help,
thanks

You should have one in your toolbox.

Quote:

---

Originally Posted by paulorton

You should have one in your toolbox.

---

I have progress bar under toolbox, thats not the problem. I need the progress bar to be loaded, like, block by block as in 1st picture.

thanks for the reply any way.

that's a custom control.

Quote:

---

Originally Posted by .paul.

that's a custom control.

---

thanks for the help.
Can you please describe it little more? with an example please? Im very new to vb.net

thanks

Take a look at Developing Custom Controls with VB.NET

here's a custom progressbar:

Attachment 100221

Quote:

---

Originally Posted by .paul.

here's a custom progressbar:

Attachment 100221

---

thanks a lot man

rated :)

If you want to reduce the flickering that .paul.'s control causes then change the code in the OnPaint event for the control to this:

Code:

---

  Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
    Using bmp As New Bitmap(Me.Width, Me.Height)
      Using g As Graphics = Graphics.FromImage(bmp)
        'top left corner
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(0, 0, 2, 1))
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(0, 1, 1, 1))
        'top right corner
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(Me.Width - 2, 0, 2, 1))
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(Me.Width - 1, 1, 1, 1))
        'bottom right corner
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(Me.Width - 1, Me.Height - 2, 1, 1))
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(Me.Width - 2, Me.Height - 1, 2, 1))
        'bottom left corner
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(0, Me.Height - 2, 1, 1))
        g.FillRectangle(New SolidBrush(SystemColors.Control), New Rectangle(0, Me.Height - 1, 2, 1))

        For x As Integer = 5 To 100 Step 5
          If progressPercentage >= x Then
            g.DrawImage(block, New Rectangle(New Point(((x \ 5) * 2) + (((x \ 5) - 1) * block.Width), 2), block.Size))
          End If
        Next
        e.Graphics.DrawImage(bmp, New Point(0, 0))
      End Using
    End Using
    MyBase.OnPaint(e)
  End Sub

---

This will draw everything on a memory bitmap first and then draw the whole bitmap image on the control surface (so there is only one thing that is painted on the control) which reduces the flickering to a minimum.

Actually Joacim, you didn't have to go through all that trouble:-

vbnet Code:

'
    Public Sub New()
        Me.Size = New Size(200, 20)
        Me.BackColor = Color.SteelBlue
 
        'Stops flicker
        Me.DoubleBuffered = True
    End Sub

You can simply set DoubleBuffered to True in the constructor and the flicker stops.

Oh, I thought the DoubleBuffered property was removed after the VB6 days. :)
Well, at least now we know how to set a property and how to control double buffering by ourselves. ;)

Actually knowing how to do it yourself can be pretty useful, say that you have a larger control that shows some kind of animation in the corner while the rest is static, no need to double buffer the whole control when it's only a smaller piece in the corner that actually change.

In this case setting the property is easier, even though it's just a couple of lines that actually differs in my code from the original. However my code isn't optimal since I create a new bitmap each time you need to redraw the control. It would be better to create the bitmap somewhere else and only create a new one if the size of the control changes.

I didn't notice the flicker until after I posted the app.
Niya was right, DoubleBuffering fixes it.

That's what I was going to suggest was the DoubleBuffered property. I could probably make a control very similar to the one posted in that image, it wouldn't be very difficult.

Quote:

---

Originally Posted by AceInfinity

That's what I was going to suggest was the DoubleBuffered property. I could probably make a control very similar to the one posted in that image, it wouldn't be very difficult.

---

simples. took me about 10 or 15 minutes:D

Quote:

---

Originally Posted by .paul.

simples. took me about 10 or 15 minutes:D

---

Yours works, but it lacks the fine detail to the overlay for the shine, and when it reaches 100, you don't have that extra bit of padding for the last block like at the start. It's good needless to say, but it would still need a bit of minor tweaking. :)

edit:
http://i.imgur.com/cNtjl2W.png

Just change the width of the control slightly.

Quote:

---

Originally Posted by AceInfinity

Yours works, but it lacks the fine detail to the overlay for the shine, and when it reaches 100, you don't have that extra bit of padding for the last block like at the start. It's good needless to say, but it would still need a bit of minor tweaking. :)

edit:
http://www.vbforums.com/images/ieimages/2013/05/1.png

---

it was intended to get the OP started. I didn't predict it'd be that popular (16 downloads) + everyone discussing it, or I might've put an extra 10 minutes into it + got the colors better.
as JA said, the layout can be improved by setting an optimal width.

Quote:

---

Originally Posted by AceInfinity

Yours works, but it lacks the fine detail to the overlay for the shine, and when it reaches 100, you don't have that extra bit of padding for the last block like at the start.

---

Challenge accepted.
Attachment 100237

This one is a little more customizable. You can set the size, roundedness and colour of the little bars. And it has a little shine. It uses Longs instead of Integers for its values.

Quote:

---

Originally Posted by Niya

Challenge accepted.
Attachment 100237

This one is a little more customizable. You can set the size, roundedness and colour of the little bars. And it has a little shine. It uses Longs instead of Integers for its values.

---

Not bad. :) Your gradients are upside-down to that of the ones in the attachment image though lol. Other than that, you're only missing the blue for behind the yellow chunks, and it's border. :)

Why does it use Long's though instead of Integer's? :confused: I don't quite see the gain in that... I would say that 90% of the time, a 16 bit integer is probably all you would ever need. The odd case, you would be dealing with larger data than that just to display progress.

Ex: Maybe you have a product database or something, and you want to keep track of the total # of QC'd products, out of the total. But even then, you would have a hard time exceeding the limit of a 32 bit integer...

A just-in-case implementation?

Well I wasn't going for the exact look but something "in the spirit of" in a manner of speaking.

Quote:

---

Originally Posted by Niya

Well I wasn't going for the exact look but something "in the spirit of" in a manner of speaking.

---

Either way, I never said it was bad at all. Well done. :)

Quote:

---

Originally Posted by AceInfinity

Why does it use Long's though instead of Integer's? :confused: I don't quite see the gain in that...

---

One common scenario: processing of large files where you use the file length, in bytes, as the Maximum.

You can also change the BackColor property to be blue if that is what you want to have.

When I looked at the two attachments in the OP's post, McAfee SiteAdvisor stepped in, flagged it as a red site and asked if I was sure I wanted to go there as when they visited the page, they found dodgy behaviour! :/

That's strange since they are attached to this forum. In either case I edited the original post so that the images are shown directly in the post.

@Niya: I think you mixed up the argument order for the bottomBrush:

Code:

---

'Original code
    Dim topBrush As New System.Drawing.Drawing2D.LinearGradientBrush(topRect, topColor, middleColor, 90)
    Dim bottomBrush As New System.Drawing.Drawing2D.LinearGradientBrush(bottomRect, color, middleColor, 90)

---

Shouldn't it be:

Code:

---

    Dim topBrush As New System.Drawing.Drawing2D.LinearGradientBrush(topRect, topColor, middleColor, 90)
    Dim bottomBrush As New System.Drawing.Drawing2D.LinearGradientBrush(bottomRect, middleColor, color, 90)

---

So you get a smooth transition all the way down instead of that very sharp line in the middle?

Quote:

---

Originally Posted by AceInfinity

Why does it use Long's though instead of Integer's? :confused: I don't quite see the gain in that...

---

Joacim hit the nail square on its head. I had files in mind. Its unbelievably annoying having to do percentage calculations for files over 4GBs when it would be easier to simply use the file size as the max value.

Quote:

---

Originally Posted by Joacim Andersson

@Niya: I think you mixed up the argument order for the bottomBrush:

Code:

---

'Original code
    Dim topBrush As New System.Drawing.Drawing2D.LinearGradientBrush(topRect, topColor, middleColor, 90)
    Dim bottomBrush As New System.Drawing.Drawing2D.LinearGradientBrush(bottomRect, color, middleColor, 90)

---

Shouldn't it be:

Code:

---

    Dim topBrush As New System.Drawing.Drawing2D.LinearGradientBrush(topRect, topColor, middleColor, 90)
    Dim bottomBrush As New System.Drawing.Drawing2D.LinearGradientBrush(bottomRect, middleColor, color, 90)

---

So you get a smooth transition all the way down instead of that very sharp line in the middle?

---

Actually, that was deliberate. It is supposed to be sharp to give a kind of glass effect. I originally developed it for another project, however, it was made with highlighters in mind:-
Attachment 100247

OK, I guess you could go with whatever you like the best.

Actually, I reproduced the highlighter I saw in the picture of a DevComponents TreeView:-
http://www.devcomponents.com/dotnetbar/img/AdvTree2.png

First time I saw it, I just loved it for some reason and set out to reproduce the effect.

That looks a little bit better, in your implementation the color change seems to happen straight in the middle and it's hard to see that it actually gets lighter at the bottom. I guess it's just a simple tweaking of the numbers but I, personally, liked the effect I got by getting a continuous gradient effect by just switching the arguments. It's a matter of taste and not very important.

I actually changed it to transition in the middle when I copied the code to the progress bar project. For TabMenu I used in the total screen I posted, it was set to change at 1/3 the way. It didn't look right that way for the ProgressBar. You may have a point, I think a straight gradient may work better for the progress bar. My goal was for a glassy look and I still fell short of the mark. I have a thing for glassy interfaces but I'm not very talented when it comes to artsy stuff to be quite honest. Its always a struggle for me to produce nice looking effects. It seems my brain is not wired to think like an artist :(

Quote:

---

Originally Posted by Joacim Andersson

@Niya: I think you mixed up the argument order for the bottomBrush:

Code:

---

'Original code
    Dim topBrush As New System.Drawing.Drawing2D.LinearGradientBrush(topRect, topColor, middleColor, 90)
    Dim bottomBrush As New System.Drawing.Drawing2D.LinearGradientBrush(bottomRect, color, middleColor, 90)

---

Shouldn't it be:

Code:

---

    Dim topBrush As New System.Drawing.Drawing2D.LinearGradientBrush(topRect, topColor, middleColor, 90)
    Dim bottomBrush As New System.Drawing.Drawing2D.LinearGradientBrush(bottomRect, middleColor, color, 90)

---

So you get a smooth transition all the way down instead of that very sharp line in the middle?

---

The sharp line is the way it is in the original attachment though. :thumb:

Quote:

---

Originally Posted by Niya

Joacim hit the nail square on its head. I had files in mind. Its unbelievably annoying having to do percentage calculations for files over 4GBs when it would be easier to simply use the file size as the max value.

---

I suppose, I didn't think of that, but there is that LongLength property that you might be dealing with, yes. In that case I don't have an argument here it seems. :)

I remember once upon a time, a Short was more than enough integer to deal with stuff. Today, an Int32 is fast becoming a small data type. Everything gets bigger. Files are getting bigger, images take more and more data to represent, more and more data is being transferred online per connection. I'm sure in ten years an Int32 would not be enough to take measure of the processes that would be in use by that time. 64 bit integers are going to become more popular in the coming years.

True, pretty soon we'll have Int128 as a standard :lol:

Well Int64 is gonna last pretty long. The sizes these data types can represent increase exponentially. Lets say an Int16 was good for 2 years then an Int32 would be good for 4 years and an Int64 16 years. Something like that.

Of course you may be right if the needs also increase exponentially.