Shadow for qml frameless windows

Question

I have frameless main window, created by qml ( ApplicationWindow {..} in my main.qml file) I instantiate qml by QQmlApplicationEngine::load (class introduced in Qt5.1). If I set the Qt.FramelessWindowHint flag, the window is frameless, but loses shadow (in Windows). How to add shadow to my window?

My window listing:

ApplicationWindow {
    id: rootWindow
    color : "#f8f8f8"
    maximumHeight: 445
    minimumHeight: 445
    minimumWidth: 730
    maximumWidth: 730
    flags  : Qt.FramelessWindowHint  |  Qt.Window

    Component.onCompleted: {
        setHeight(455)
        setWidth(740)
    }

    MainObject{
            id:mainObject1
            anchors.fill: parent
            height:445
            width:730
    }


}

Answer 1

The solution is to implement the shadow part integral to the application, this way you can disable WM decoration and still have decoration, and have it consistent across different platforms.

In the following example the window has a shadow that even animates to create the effect of lifting the window up when moving it. And when the window is maximized, the margins are removed and the shadow is thus no longer visible.

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0
import QtQuick.Window 2.3

ApplicationWindow {
    id: main
    visible: true
    width: 300
    height: 200
    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.Window

    Rectangle {
      id: rect
      anchors.fill: parent
      anchors.margins: main.visibility === Window.FullScreen ? 0 : 10
      MouseArea {
        id: ma
        anchors.fill: parent
        property int dx
        property int dy
        onPressed: { dx = mouseX; dy = mouseY }
        onPositionChanged: {
          main.x += mouseX - dx
          main.y += mouseY - dy
        }
        onDoubleClicked: main.visibility = main.visibility === Window.FullScreen ? Window.AutomaticVisibility : Window.FullScreen
      }
    }

    DropShadow {
      anchors.fill: rect
      horizontalOffset: 1
      verticalOffset: 1
      radius: ma.pressed ? 8 : 5
      samples: 10
      source: rect
      color: "black"
      Behavior on radius { PropertyAnimation { duration: 100 } }
    }
}