none
How yo make this style prograssbar? RRS feed

  • Question

  • Hello. I'm Korean. XD I want to change the design of the Progras Bar like in the picture! And ... I would like to make the time when the Progras Bar moves is infinite. I wish I had a picture : D
    Thursday, April 19, 2018 10:28 AM

All replies

  • Thursday, April 19, 2018 11:30 AM
  • Hello,

    As mentioned Vikram Manjare, the Marquee is you best option only if you don't need to show percent done. If you need percent done that you will need a method to calculate percentage done and not use Marquee. 


    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    Thursday, April 19, 2018 11:44 AM
    Moderator
  • For those who see this text  in the documentation. 

    WinXpFamily

    The Marquee style is supported only on these platforms.

    I tested it and it runs also on W10 with .Net 4.7.1


    Success
    Cor

    Thursday, April 19, 2018 12:34 PM
  • Here is a draw your own example class that inherits from label control.

    You can add your own fancy graphics as desired.

    Public Class Form4
        Private WithEvents Prog1 As New ProgressBarEX With {.Parent = Me,
            .Location = New Point(50, 50),
            .Size = New Size(200, 30),
            .Font = New Font("arial", 14, FontStyle.Bold),
            .Text = "Working...",
            .BorderStyle = BorderStyle.FixedSingle,
            .ForeColor = Color.Red,
            .BackColor = Color.White}
    
        Private WithEvents Button1 As New Button With {.Parent = Me, .Location = New Point(150, 100), .Text = "Go"}
        Private WithEvents Timer1 As New Timer With {.Interval = 50}
    
        Private Sub ProgressBarClassExample_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Text = "Progress Bar Example"
            Height = 200
            BackColor = Color.AliceBlue
    
            Prog1.Visible = False
        End Sub
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    
            If Timer1.Enabled Then
                Prog1.Visible = False
                Button1.Text = "Go"
                Timer1.Stop()
            Else
                Prog1.Visible = True
                Prog1.Value = 1
                Button1.Text = "Stop"
                Timer1.Start()
            End If
            Prog1.Invalidate()
        End Sub
    
        Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            Prog1.Increment()
    
        End Sub
    
        Private Class ProgressBarEX
            Inherits Label
            Public Value As Integer
    
            Public Sub Increment()
    
                If (ClientRectangle.Height * 3) + (Value * (ClientRectangle.Width / 100)) > ClientRectangle.Width Then
                    Value = 1
                Else
                    Value += 2
                End If
    
                Invalidate()
            End Sub
    
            Private Sub Progger_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
                Dim rectf As RectangleF = ClientRectangle
                Dim w As Integer = CInt(rectf.Height * 3)
                rectf.X = Value * rectf.Width / 100
                rectf.Width = w
    
                With e.Graphics
                    .Clear(BackColor)
                    .TextRenderingHint = Drawing.Text.TextRenderingHint.AntiAlias
    
                    .DrawString(Value.ToString, Font, New SolidBrush(ForeColor), rectf.X, rectf.Y + 2)
    
                    .FillRectangle(New SolidBrush(ForeColor), rectf)
    
                    If Text IsNot Nothing Then
                        .DrawString(Text, New Font("arial", 12, FontStyle.Bold),
                                    New SolidBrush(BackColor), CSng((rectf.Width / 4) - 2), rectf.Y + 3)
                        .DrawString(Text, New Font("arial", 12, FontStyle.Bold),
                                    New SolidBrush(ForeColor), CSng((rectf.Width / 4)), rectf.Y + 4)
                    End If
                End With
            End Sub
        End Class
    End Class

    • Proposed as answer by Mr. Monkeyboy Thursday, April 19, 2018 7:55 PM
    Thursday, April 19, 2018 12:39 PM
  • Well you could also use VisualStyles which supports a ProgressBar shape and then draw on the shape like the code below does. The actual progress is drawn semi transparent so the progressbar drawn underneath shows through a bit. And there's an upper and lower rectangle drawn in more and less transparent to show the offset of the top approximately 1/4 and bottom 3/4's of the drawn progessbars shaded areas.

    You would probably want to draw it on a PictureBox rather than the Form too. Since a PictureBox is double buffered and won't bother the Form or other controls. Like tommytwotrain does with the ProgressBarEX Class.

    The animated .Gifs below run slower than the actual drawing does. I couldn't show the entire movement of the ProgressBar in 1 .Gif because the .Gif would be too large to upload.

    Update: I added the last animated .Gif that shows the complete sequenece due to using every 3rd image so it appears jerky.

    Option Strict On
    
    Imports System.Windows.Forms
    Imports System.Windows.Forms.VisualStyles
    
    Public Class Form1
    
        Private Shared visualStyleRenderer As VisualStyleRenderer = New VisualStyleRenderer(VisualStyleElement.ProgressBar.Bar.Normal)
    
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Me.Location = New Point(CInt((Screen.PrimaryScreen.WorkingArea.Width / 2) - (Me.Width / 2)), CInt((Screen.PrimaryScreen.WorkingArea.Height / 2) - (Me.Height / 2)))
            Me.DoubleBuffered = True
            Timer1.Interval = 1
        End Sub
    
        Dim x As Single = 10
        Dim xWidth As Single = 1
    
        Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
            visualStyleRenderer.DrawBackground(e.Graphics, New Rectangle(10, 10, Me.ClientRectangle.Width - 20, 23))
            Using b1 As New SolidBrush(Color.FromArgb(150, Color.LimeGreen))
                Using b2 As New SolidBrush(Color.FromArgb(100, Color.LimeGreen))
                    e.Graphics.FillRectangle(b1, New RectangleF(x, 16, xWidth, 17))
                    e.Graphics.FillRectangle(b1, New RectangleF(x, 10, xWidth, 6))
                End Using
            End Using
        End Sub
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            If Timer1.Enabled = False Then
                Timer1.Enabled = True
                Button1.BackColor = Color.Red
            Else
                Timer1.Enabled = False
                Button1.BackColor = Color.LimeGreen
            End If
        End Sub
    
        Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            If xWidth < 80 AndAlso x < Me.ClientRectangle.Width - 20 - 70 Then
                xWidth += 1
            ElseIf x >= Me.ClientRectangle.Width - 20 - 70 Then
                xWidth -= 1
                x += 1
            ElseIf xWidth = 80 Then
                x += 1
            Else
            End If
            Me.Invalidate()
            If x = (Me.ClientRectangle.Width - 20) Then
                x = 10
                xWidth = 1
            End If
        End Sub
    
    End Class


    La vida loca

    Thursday, April 19, 2018 8:57 PM
  • How Can I change prograss bar stlye like this? I cant change and I want to answer with Picture or Video ( Youtube is OK. ) Thank you.


    Wednesday, April 25, 2018 11:38 AM
  • Duplicate post.

    https://social.msdn.microsoft.com/Forums/en-US/439c585e-ecc2-4d25-9844-d7216d91470a/how-yo-make-this-style-prograssbar?forum=vbgeneral

    Did the answers in your other post not work properly for you?

    You will need to describe in more detail what you want to do that is different from a normal progress bar.

    Wednesday, April 25, 2018 1:03 PM
  • Duplicate post.

    https://social.msdn.microsoft.com/Forums/en-US/439c585e-ecc2-4d25-9844-d7216d91470a/how-yo-make-this-style-prograssbar?forum=vbgeneral

    Did the answers in your other post not work properly for you?

    You will need to describe in more detail what you want to do that is different from a normal progress bar.


    Yeah. I cant understand :C Because I can't understand answer without picture or video well. I want to answer with picture or video sry..
    Wednesday, April 25, 2018 2:23 PM
  • Yeah. I cant understand :C Because I can't understand answer without picture or video well. I want to answer with picture or video sry..

    You can't alter the ProgressBars style to become the style you display in your image.

    In your previous thread, hopefully a moderator will merge these threads, tommytwotrain and I provided some examples with animated .Gifs which is similar to video. So you should reply in that thread and not this thread.


    La vida loca

    Wednesday, April 25, 2018 2:37 PM
  • Yeah. I cant understand :C Because I can't understand answer without picture or video well. I want to answer with picture or video sry..

    Hi UserWIndows10TK,

    You put one Progress bar on the Form, and then left-click on Progress bar to change this style to Marquee in properties.

    You said that you don't  understand it, why? It can not resolved your problem? If yes, You could describe your question more detailed.

    Note: please ask the same question in the one thread.

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, April 26, 2018 6:07 AM
    Moderator