Smooth ProgressBar in WPF

Question

I'm using the ProgressBar control in a WPF application and I'm getting this old, Windows 3.1 Progress*Blocks* thing. In VB6, there was a property to show a smooth ProgressBar. Is there such a thing for WPF?

Answer 1

This KB article seems to explain what you are looking for... there is a link to a VB version of the article too.

Answer 2

I am not sure what you want to do. If you simply want a progress bar that "sweeps" from side to side like on starting Vista you could use: IsIndetermined = true.

If you actually want to go from 0% to 100% you have to either animate over the value as shown in this example on msdn: http://msdn.microsoft.com/en-us/library/system.windows.controls.progressbar.aspx or set the value explicitly either in code-behind (most likely from a background worker) or through a binding to a changing value.

Nevertheless the WPF ProgressBar should always be "smooth", there is the possibility that the UI will default to a more simpler version through a RemoteDesktop connection.

Answer 3

I recently was annoyed by the appearance of my progress bars on XP after developing on Vista. I didn't want to try suggestions I'd seen for loading the Vista styles out of dll's, but this article gave me just what I was looking for. vista appearance - no new classes. Plus it has the glassy highlight on a timer. No pictures on the article, but it looks just like Vista's ProgressBar.

Answer 4

I was not able to find a direct solution for this. But I found something even better. In WPF, you can use Windows Themes. I am using Windows XP, and having Vista-Aero Theme on my WPF Application, making all controls look like Vista-Aero.

Here's the code...

Go to Application.xaml.vb and write...

  Enum appThemes
        Aero
        Luna
        LunaMettalic
        LunaHomestead
        Royale
    End Enum

Private Sub Application_Startup(ByVal sender As Object, ByVal e As System.Windows.StartupEventArgs) Handles Me.Startup

        setTheme(appThemes.Aero)

    End Sub

    ''' <summary>
    ''' Function to set the default theme of this application
    ''' </summary>
    ''' <param name="Theme">
    ''' Theme of type appThemes
    ''' </param>
    ''' <remarks></remarks>
    Public Sub setTheme(ByVal Theme As appThemes)

        Dim uri As Uri

        Select Case Theme
            Case appThemes.Aero
                ' Vista Aero Theme
                uri = New Uri("PresentationFramework.Aero;V3.0.0.0;31bf3856ad364e35;component\\themes/Aero.NormalColor.xaml", UriKind.Relative)

            Case appThemes.Luna
                ' Luna Theme
                uri = New Uri("PresentationFramework.Luna;V3.0.0.0;31bf3856ad364e35;component\\themes/Luna.NormalColor.xaml", UriKind.Relative)

            Case appThemes.LunaHomestead
                ' Luna Mettalic
                uri = New Uri("PresentationFramework.Luna;V3.0.0.0;31bf3856ad364e35;component\\themes/Luna.Metallic.xaml", UriKind.Relative)

            Case appThemes.LunaMettalic
                ' Luna Homestead
                uri = New Uri("PresentationFramework.Luna;V3.0.0.0;31bf3856ad364e35;component\\themes/Luna.Homestead.xaml", UriKind.Relative)

            Case appThemes.Royale
                ' Royale Theme
                uri = New Uri("PresentationFramework.Royale;V3.0.0.0;31bf3856ad364e35;component\\themes/Royale.NormalColor.xaml", UriKind.Relative)

        End Select

        ' Set the Theme
        Resources.MergedDictionaries.Add(Application.LoadComponent(uri))

    End Sub

(I hope you can convert it to C#)

Answer 5

    namespace Tester
{
 public partial class Form1 : Form
 {
  public Form1()
  {
   InitializeComponent();
  }

  private void Form1_Load(object sender, EventArgs e)
  {

  }

  private void timer1_Tick(object sender, EventArgs e)
  {
   Do();
  }

  void Do()
  {
   if (this.InvokeRequired)
   {
    this.Invoke(new MethodInvoker(Do));
   }
   else
   {
    if (this.vistaProgressBar1.Value >= 100)
     this.vistaProgressBar1.Value = 1;

    if (this.vistaProgressBar2.Value >= 100)
     this.vistaProgressBar2.Value = 1;

    if (this.vistaProgressBar3.Value >= 100)
     this.vistaProgressBar3.Value = 1;

    this.vistaProgressBar1.Value += 0.1F;
    this.vistaProgressBar2.Value += 0.1F;
    this.vistaProgressBar3.Value += 0.1F;
   }
  }
 }
}

    namespace MyUserControl.Controls
{
 public partial class VistaProgressBar : UserControl
 {
  Color _border = Color.FromArgb(178, 178, 178);
  Color _backRemain1 = Color.FromArgb(202, 202, 202);
  Color _backRemain2 = Color.FromArgb(234, 234, 234);
  Color _backRemain3 = Color.FromArgb(219, 219, 219);
  Color _backRemain4 = Color.FromArgb(243, 243, 243);

  Color _backActive1 = Color.FromArgb(180, 0, 0);
  Color _backActive2 = Color.FromArgb(252, 0, 0);
  Color _backActive3 = Color.FromArgb(255, 127, 127);
  Color _backActive4 = Color.FromArgb(255, 205, 205);

  float _value = 50.0F;

  public float Value
  {
   get { return _value; }
   set
   {
    if (_value > 100.0F) _value = 100.0F;
    if (_value < 1.0F) _value = 1.0F;
    _value = value;
    Invalidate();
   }
  }

  VistaProgressBarTheme _theme = VistaProgressBarTheme.Default;
  [Browsable(true)]
  public VistaProgressBarTheme Theme
  {
   get { return _theme; }
   set
   {
    _theme = value;
    CalculateThems();
    Invalidate();
   }
  }

  public VistaProgressBar()
  {
   this.SetStyle(ControlStyles.DoubleBuffer, true);
   this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
   this.SetStyle(ControlStyles.ResizeRedraw, true);
   this.SetStyle(ControlStyles.UserPaint, true);
   this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
   InitializeComponent();
   this.BackColor = Color.Transparent;
   CalculateThems();
  }

  protected override void OnPaintBackground(PaintEventArgs e)
  {
   base.OnPaintBackground(e);

   Rectangle rectUpper = new Rectangle(0, 0, this.Width, this.Height / 2 + 2);
   Rectangle rectLower = new Rectangle(0, this.Height / 2, this.Width, this.Height - (this.Height / 2));

   GraphicsPath pathLower = MyGraphics.GetRoundPath(rectLower, 2);
   GraphicsPath pathUpper = MyGraphics.GetRoundPath(rectUpper, 2);

   using (Brush brushUpper = new LinearGradientBrush(rectUpper, _backRemain4, _backRemain3, LinearGradientMode.Vertical))
   {
    e.Graphics.FillPath(brushUpper, pathUpper);
   }

   using (Brush brushLower = new LinearGradientBrush(rectLower, _backRemain1, _backRemain2, LinearGradientMode.Vertical))
   {
    e.Graphics.FillPath(brushLower, pathLower);
   }
  }

  private void VistaProgressBar_Paint(object sender, PaintEventArgs e)
  {
   float width = (((float)this.Width - 2) * _value) / 100.0F;

   Rectangle rectFull = new Rectangle(0, 0, this.Width - 1, this.Height - 1);
   GraphicsPath pathFull = MyGraphics.GetRoundPath(rectFull, 2);

   Rectangle rectUpper = new Rectangle(1, 1, (int)width, this.Height / 2 + 1);
   GraphicsPath pathUpper = MyGraphics.GetRoundPath(rectUpper, 1);

   Rectangle rectLower = new Rectangle(1, this.Height / 2, (int)width, this.Height - (this.Height / 2) - 1);
   GraphicsPath pathLower = MyGraphics.GetRoundPath(rectLower, 1);

   using (Brush brushUpper = new LinearGradientBrush(rectUpper, _backActive4, _backActive3, LinearGradientMode.Vertical))
   {
    e.Graphics.FillPath(brushUpper, pathUpper);
   }

   using (Brush brushLower = new LinearGradientBrush(rectLower, _backActive1, _backActive2, LinearGradientMode.Vertical))
   {
    e.Graphics.FillPath(brushLower, pathLower);
   }

   using (Pen pen = new Pen(_border))
   {
    e.Graphics.DrawPath(pen, pathFull);
   }
  }

  void CalculateThems()
  {
   switch (_theme)
   {
    case VistaProgressBarTheme.Red:
     _backActive1 = Color.FromArgb(180, 0, 0);
     _backActive2 = Color.FromArgb(252, 0, 0);
     _backActive3 = Color.FromArgb(255, 127, 127);
     _backActive4 = Color.FromArgb(255, 205, 205);
     break;

    case VistaProgressBarTheme.Default:
    case VistaProgressBarTheme.Green:
     _backActive1 = Color.FromArgb(12, 182, 20);
     _backActive2 = Color.FromArgb(55, 217, 60);
     _backActive3 = Color.FromArgb(117, 226, 119);
     _backActive4 = Color.FromArgb(171, 237, 171);
     break;

    case VistaProgressBarTheme.Blue:
     _backActive1 = Color.FromArgb(8, 49, 216);
     _backActive2 = Color.FromArgb(22, 106, 238);
     _backActive3 = Color.FromArgb(102, 171, 255);
     _backActive4 = Color.FromArgb(140, 192, 255);
     break;
   }
  }
 }

 public enum VistaProgressBarTheme
 {
  Default,
  Green,
  Blue,
  Red,
 }
}

    namespace MyUserControl.Controls
{
 internal class MyGraphics
 {
  public static GraphicsPath GetRoundPath(Rectangle r, int depth)
  {
   GraphicsPath graphPath = new GraphicsPath();

   graphPath.AddArc(r.X, r.Y, depth, depth, 180, 90);
   graphPath.AddArc(r.X + r.Width - depth, r.Y, depth, depth, 270, 90);
   graphPath.AddArc(r.X + r.Width - depth, r.Y + r.Height - depth, depth, depth, 0, 90);
   graphPath.AddArc(r.X, r.Y + r.Height - depth, depth, depth, 90, 90);
   graphPath.AddLine(r.X, r.Y + r.Height - depth, r.X, r.Y + depth / 2);

   return graphPath;
  }
 }
}