How to update a progress bar so it increases smoothly?

I'm using progress bar of WPF (C#) to describe the process's progress.

My algorithm is below:

ProgressBar.SetPercent(10); // 10%
ProgressBar.SetPercent(20); // 20%


ProgressBar.SetPercent(100); // 100%

It's ok, but it will make the progress bar was not sequent.

Someone can tell me some suggestions that make the progress bar is updated softly?


You could call the BeginAnimation method to animate the ProgressBar's Value property. In my example below, I used a DoubleAnimation.

I created an extension method that takes in the desired percentage:

public static class ProgressBarExtensions
    private static TimeSpan duration = TimeSpan.FromSeconds(2);

    public static void SetPercent(this ProgressBar progressBar, double percentage)
        DoubleAnimation animation = new DoubleAnimation(percentage, duration);
        progressBar.BeginAnimation(ProgressBar.ValueProperty, animation);          

So in your code you could simply call:


Doing this simply smooths out the transition so it looks nicer. To quote another answer: "The idea is that a progress bar reports actual progress - not time elapsed. It's not intended to be an animation that just indicates something is happening." However, the default style of the progress bar does have a pulsating effect which can imply work is happening.

You can use a behavior!

public class ProgressBarSmoother
    public static double GetSmoothValue(DependencyObject obj)
        return (double)obj.GetValue(SmoothValueProperty);

    public static void SetSmoothValue(DependencyObject obj, double value)
        obj.SetValue(SmoothValueProperty, value);

    public static readonly DependencyProperty SmoothValueProperty =
        DependencyProperty.RegisterAttached("SmoothValue", typeof(double), typeof(ProgressBarSmoother), new PropertyMetadata(0.0, changing));

    private static void changing(DependencyObject d, DependencyPropertyChangedEventArgs e)
        var anim = new DoubleAnimation((double)e.OldValue, (double)e.NewValue, new TimeSpan(0,0,0,0,250));
        (d as ProgressBar).BeginAnimation(ProgressBar.ValueProperty, anim, HandoffBehavior.Compose);

Your XAML would look like this:

<ProgressBar local:ProgressBarSmoother.SmoothValue="{Binding Progress}">

Whenever the Progress property you are binding to in the xaml changes, the code in the ProgressBarSmoother behavior will run, adding the animation to the progress bar for you with the appropriate values for To and From!

Check if you can modify the style of the progressbar and set an Easing function to it's storyboard that modifies the "filling" of the progressbar and by doing that it will have a smooth transition.

try this out.

private void updateProgressBar(int percent)
        if (ProgressBar.InvokeRequired)
            updateProgressBarCallback cb = new updateProgressBarCallback(updateProgressBar);
            this.Invoke(cb, new object[] { percent });
            ProgressBar.Value = percent;

Need Your Help

adjustPan not preventing keyboard from covering EditText

android android-layout android-manifest android-softkeyboard

I'm trying to create a pretty basic chat screen with a ListView displaying the text and an EditText at the bottom and a "Send" button to the right of the EditText. Everything is functional, but whe...

Glue divs next to each other

css web

Is there anyway to make divs sort of glue to each other no matter the size that they have?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.