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?



  • 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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.