Important: Please read the Qt Code of Conduct -

[SOLVED] QtQuickControls ProgressBarStyle change easily color

  • Hi together,

    I am just trying to change in an easy and beautiful way the color of a ProgressBar. By the following Code I get the defalt Progress which is quiet beautiful, just the color of the "blue #49d" I would like to change to red:

    ProgressBar {
    value: 0.5
    style: ProgressBarStyle {
    id: mystyle
    //progress: ...

    The only solution I figured out, was to completely rewrite the progress property in ProgressBarStyle a la:
    progress: Rectangle {
    color: "red"

    But then I would have to rewrite everything; Gradients, Borders, etc.

    A solution like:
    progress.progressColor: "red"

    would be perfect, as the ProgressBarStyles.qml states it(Line 97/98)
    "ProgressBarStyles.qml": Here the snippet:
    property Component progress: Rectangle {
    property color progressColor: "#49d"

    But cascaded acess to this property is unfortunately not possible.

    Does anyone has an idea how to just change the color of the progressBar without completely rewriting it?

    Thanks a lot


  • Moderators

    Hi and Welcome,

    If I understood correctly, you can just define a property, bind it to progress's Rectangle and then update this property when required.
    Something like this:
    property string myColor: "lightgray"

    progress: Rectangle {
    color: myColor
    border.color: "steelblue"

    //To change it for eg:

    onClicked: myColor = "red"

  • Thanks for the quick response,

    But unfortunately you did not understand me correctly.
    The Way you did it, I know. But I want to use the design of the default QtProgressBar and just change the color without writing everything new.
    (clear, less lines of code, etc..;-) )
    As the default Rectangle of ProgressBarStyle.qml in property "progress" has the property "progressColor" I would like to access it somehow

    But I am afraid it is not possible, is it?

  • Moderators

    Right, that is not possible. Since if you donot provide ProgressBarStyle it will use the platform dependent default style and I think modifying it is not possible currently.

  • I was afraid that it is so. Thanks a lot for the confirmation :-)

Log in to reply