Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to make ToolButton icon grayscale?



  • I have a QML app with a ToolBar with ToolButtons with images, for example, a ToolButton that loads something is defined in QML in this way:

    ToolButton {
        contentItem: Image { source: "Icons/load.png" }
        enabled: scene.loadEnabled
        onClicked: loadDialog.open()
    }
    

    and I am looking for a sample code that automatically makes the icon grayscale when the ToolButton is disabled.

    Should I manually implement the algorithm that makes the image graysacle and bind Image.source to a property returning the resulting image or there is a better way?


  • Qt Champions 2018

    You can do it with Desaturate :

    import QtGraphicalEffects 1.0
    ...
    
        contentItem: Image {
            source: "Icons/load.png"
            layer.enabled: true
            layer.effect: Desaturate {
                desaturation: parent.enabled ? 0 : 1
                Behavior on desaturation { NumberAnimation { easing.type: Easing.InOutQuad } }
            }
        }

Log in to reply