QProgressBar chunk edges goes out of bounds

[lupo]

Hi all,

First of all I have to say that I'm totally new to Qt and GUI design (a few days only indeed ). So please forgive my poor style and silly question. I have this issue on Qt 4.5.2 embedded version, however since I do not think it's related to embedded, I'm posting it here.

My problem is, I need a progress bar with rounded ends (totally circular ends with radius equal to half height of the bar) but I couldn't manage to make it appear the way I want. Setting the radius for progressbar ends is straight forward and the progressbar itself has the shape I want. However, the chunk of the progressbar keeps its rectangular shape and goes out of bounds at both left and right ends. Is there a way to keep those chunk-ends somehow underneath or transparent?

You could probably suggest giving radius to chunk borders as well. It solves some parts of the issue but brings in some other issues too If I do that, for small values of progress bar fill-ratio (let's say 4%), chunk still has a rectangular shape rather than rounded Probably it cannot complete the circle for such a big radius with such a low size or something like that.

I have also tried changing chunk width but it didn't work either.

Hopefully there is a better answer than placing a mask image on the progress bar with transparent center and opaque ends. So, what are your suggestions?

For your reference, I have also copy-pasted the stylesheet part of Qt Designer and size settings of the containing widget & progressbar itself.

Thank you very much for your help in advance.

QProgressBar { background-color: rgb(161, 161, 161); border: 2px solid grey; border-radius: 25px; color: rgb(255, 255, 255); text-align: right; margin-right: 4ex; }
QProgressBar::chunk { background-color: rgb(255, 255, 255); border-top-left-radius: 23px; border-bottom-left-radius: 23px; width: 1px }

QProgressBar { background-color: rgb(161, 161, 161); border: 2px solid grey; border-radius: 25px; color: rgb(255, 255, 255); text-align: right; margin-right: 4ex; }
QProgressBar::chunk { background-color: rgb(255, 255, 255); border-top-left-radius: 23px; border-bottom-left-radius: 23px; width: 1px }

To copy to clipboard, switch view to plain text mode 

Progress bar placement code to give an idea about the size.

sub_widget_1Class->resize(426, 76);
progressBar->setGeometry(QRect(13, 13, 400, 50));

sub_widget_1Class->resize(426, 76);
progressBar->setGeometry(QRect(13, 13, 400, 50));

To copy to clipboard, switch view to plain text mode 

[wysota]

I would suggest to implement your own style (subclassing one of available styles, of course) or subclass the progress bar and correct the drawing in the paint event. The simplest way would be to clip the painter to the rounded shape. But I'd still go for subclassing one of QStyle subclasses. Then it's just a matter of reimplementing QStyle::drawControl() for QStyle::CE_ProgressBarContents and QStyle::CE_ProgressBarGroove.