CODEWITHSUNDEEP
qtqml
Dcow
Dcow

Reputation: 1463

Shadow for qml frameless windows

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
    }


}

Upvotes: 4

Views: 4490

Answers (3)

Allen Zhu
Allen Zhu

Reputation: 870

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0

ApplicationWindow{
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    flags: Qt.Window | Qt.FramelessWindowHint
    color: "#00000000"

    Rectangle {
        id: rect
        anchors.fill: parent
        anchors.margins: 10
        radius: 5
    }

    DropShadow {
        anchors.fill: rect
        samples: 20
        source: rect
        color: "gray"
    }
}

Upvotes: 1

dtech
dtech

Reputation: 49329

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 } }
    }
}

enter image description here

Upvotes: 5

László Papp
László Papp

Reputation: 53225

If you mean the drop shadow effect, that is not quite so.

We have no control over the WM decoration in Qt besides the frameless window flag you have just used. It is pretty much WM specific. Windows (TM) WM applies shadow effect to decorate windows, but this is a Windows (TM) choice. Also, you have just hinted that it should not decorate.

Upvotes: 0

Related Questions