Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use a meter-style progress bar?

In Vista/7, the Windows Explorer shell window makes use of a special kind of static progress bar to display hard drive space.

With default styles, this bar is blue colored and non-animated. It also turns red colored when it gets close to being full (low disk space).

Using messaging, I can tell the Windows Forms ProgressBar control to update its state to Paused and Error (yellow and red colored, respectively), which works fine, but these are still specific to progress.

In the Windows User Experience Guidelines, it specifically points out this "meter" variant of the Progress Bar:

This pattern isn't a progress bar, but it is implemented using the progress bar control. Meters have a distinct look to differentiate them from true progress bars.

They say it "is implemented using the progress bar control", so... how? What message could I send to the control to have it behave this way?

I've seen that you can send messages for setting the bar color, but the documentation says these calls are ignored when visual styles are enabled. Nothing else in the Windows API documentation for raw ProgressBar controls seemed to suggest a way to do this. Am I just stuck making a custom drawn bar? I'd really like to utilize the OS whenever possible so that the application will appear consistent throughout different OS versions. I realize that pre-Vista versions probably won't support this, though.

I'm looking for a Windows Forms solution, but I wonder if it is even exposed at all via Win32 API.

like image 209
Sean Hanley Avatar asked Apr 19 '10 22:04

Sean Hanley


People also ask

How do you style a progress tag in HTML?

In the stylesheet, we actually can use the element selector to target and add style rules to <progress> element. In this example, we change the background color, remove the border line, and make it rounded by adding a border radius at half of its height.

What is the difference between progress and meter tag?

According to the latest HTML5 working draft, the progress tag is best used to display the progress of a specific task at hand. meter is best used for task-unrelated guages, such as disk space or memory usage. The progress element represents the completion progress of a task.

How do you make a progress bar in HTML?

Use the <progress> tag to create a progress bar in HTML. The HTML <progress> tag specifies a completion progress of a task. It is displayed as a progress bar. The value of progress bar can be manipulated by JavaScript.


1 Answers

It is possible, but not through ProgressBar. Nor does Win7 use a PB to draw those meters, there is no window handle associated with the bar. It must be using custom drawing. That's possible in WinForms as well with the VisualStyleRenderer class. One thing that doesn't help however is that the required visual style parts and states are not declared, not even in .NET 4.0.

This sample form reproduces the meter bar:

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.VisualStyles;

namespace WindowsFormsApplication1 {
  public partial class Form1 : Form {
    public Form1() {
      InitializeComponent();
    }
    VisualStyleRenderer renderer = new VisualStyleRenderer(VisualStyleElement.ProgressBar.Bar.Normal);
    protected override void OnPaint(PaintEventArgs e) {
      renderer.SetParameters("PROGRESS", 11, 2);
      renderer.DrawBackground(e.Graphics, new Rectangle(10, 10, 200, 15));
      renderer.SetParameters("PROGRESS", 5, 4);
      renderer.DrawBackground(e.Graphics, new Rectangle(10, 10, 100, 15));
    }
  }
}

I got the part and state numbers from the vsstyle.h SDK header file.

like image 177
Hans Passant Avatar answered Oct 15 '22 23:10

Hans Passant