Qt Quick Controls 2 - Resizing frameless window

  • Hello!

    I've been developing simple program for making color palettes. And for design purposes I decided to have a frameless window. I figured out how to move it around but I have a little problem with resizing it

    Here is the video showing the problem : https://www.youtube.com/watch?v=ERPGXCz0P6E

    My code for resizing the window from the right side is :

            MouseArea {
                id: leftSideMouseArea
                anchors.fill: parent
                property point lastMousePos: Qt.point(0, 0)
                onPressed: { lastMousePos = Qt.point(mouseX, mouseY); }
                onMouseXChanged: applicationWindow1.width += (mouseX + lastMousePos.x)

    and for the bottom :

            MouseArea {
                anchors.fill: parent
                property point lastMousePos: Qt.point(0, 0)
                onPressed: { lastMousePos = Qt.point(mouseX, mouseY); }
                onMouseYChanged: applicationWindow1.height += (mouseY - lastMousePos.y)

    As you can see in the video, this code working fine when it's apllied to the left or bottom side. But, when I try to apply it to the other sides, it's no longer working. I've tried to replace plus with minus etc. It didn't help either.

    Do you guys know what I'm doing wrong? Are there any other ways to make frameless window resizable?

    Thanks in advance!

  • If you resize from the left side, you'll of course have to modify the window's position as well as its width. Also, since this will cause the mouse area to move below the mouse it will affect the mouse position, so you can't rely on the difference from the last position anymore.

    Instead, you need to use global mouse positions, for example like this:

    ApplicationWindow {
        id: window
        minimumHeight: 200
        minimumWidth: 200
        visible: true
        property point startMousePos
        property point startWindowPos
        property size startWindowSize
        function absoluteMousePos(mouseArea) {
            var windowAbs = mouseArea.mapToItem(null, mouseArea.mouseX, mouseArea.mouseY)
            return Qt.point(windowAbs.x + window.x,
                            windowAbs.y + window.y)
        MouseArea {
            id: leftArea
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: 100
            onPressed: {
                startMousePos = absoluteMousePos(leftArea)
                startWindowPos = Qt.point(window.x, window.y)
                startWindowSize = Qt.size(window.width, window.height)
            onMouseYChanged: {
                var abs = absoluteMousePos(leftArea)
                var newWidth = Math.max(window.minimumWidth, startWindowSize.width - (abs.x - startMousePos.x))
                var newX = startWindowPos.x - (newWidth - startWindowSize.width)
                window.x = newX
                window.width = newWidth
            Rectangle {
                anchors.fill: parent
                color: "red"
        // todo: other resize areas here

    Unfortunately, this method will cause shifting about of the window border on the right side due to the x and width of the window being assigned separately (at least on Windows 10). There seems to be no way around this from QML, since the Window item does not have any way to set the geometry in one go (like QWidget::setGeometry). I can't even find this functionality in QQuickItem or QQuickWindow either, so this seems to be a shortcoming in the APIs. :-/

Log in to reply

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