Setting the window's background image/ambiance

Note: this is also partly a design question

Many media applications on big screens, like Jellyfin, tend to set an image as backdrop when browsing through their media collection. Since Sailfish OS applications by default show their ambiance through the ApplicationWindow, I thought it would be pretty neat if my Jellyfin application could achieve the same effect by changing the ApplicationWindow’s background image and updating the Theme properties, like the primary colour, accordingly.

Right now there is a workaround I’ve used, but it isn’t perfect. It is done by creating a QML object like this:

// Based on Hutspot's GlassyBackground
Rectangle {
    property alias source: backgroundImage.source
    property alias sourceSize: backgroundImage.sourceSize
    property real dimmedOpacity: Theme.opacityFaint
    readonly property alias status: backgroundImage.status
    color: Theme.colorScheme == Theme.DarkOnLight ? "#fff" : "#000"
    z: -9999 // Is this high enough?
    opacity: status == Image.Ready ? 1.0 : 0.0
    Behavior on opacity { FadeAnimator {} }

    Image {
        id: backgroundImage
        cache: true
        smooth: false
        asynchronous: true
        fillMode: Image.PreserveAspectCrop
        anchors.fill: parent
        visible: false
    }

    FastBlur {
        cached: true
        anchors.fill: backgroundImage
        source: backgroundImage
        opacity: dimmedOpacity
        radius: 100
    }

    Image {
        anchors.fill: parent
        fillMode:  Image.Tile
        source: "image://theme/graphic-shader-texture"
        opacity: 0.1
    }
}

and adding it to your ApplicationWindow. While it looks pretty convincing, it has several problems:

  1. The ApplicationWindow’s real background visibly shows through when for example a ComboBox is open.
  2. Colours do not match the background, although this could be fixed by extracting some colours out of an image and creating a Palette from that and applying it to the applicationWindow.
  3. This effect is highly likely to look out of place once Silica gets redesigned or the undocumented “image://theme” images disappear.

So my question is: is their a better way of doing this, or even better, does Silica have support for this?

  • If not: could Silica getting support for doing this? This would be really nice, because the workaround described above wouldn’t be needed and its flaws wouldn’t be visible.
  • Or should I consider stopping to try setting the ApplicationWindow’s background at all, because of designwise it is horrible?