How to update a progress bar so it increases smoothly?

Question

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

My algorithm is below:

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

...

DoSomethingCode10();
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?

Answer 1

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!

Answer 2

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:

myProgressBar.SetPercent(50);

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.

Answer 3

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.