Qt Quick Controls 2 - Resizing frameless window

lorow23

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!

thorbjorn

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. :-/

haftado3

is'nt it better to use custom windows with resizing borders on it?
like this

flags: Qt.Window | Qt.CustomizeWindowHint

it is borderless but you have resizing borders