How to style a QML Dialog

marinas

I need a resizable dialog with a Close button, so the QML Dialog type is a good alternative. It's not pretty though and doesn't look anything like the rest of my application.
Is it possible to style a QML Dialog?
And if not, has anyone attempted to make a dialog style resizable Rectangle?

p3c0

Hi @marinas and Welcome,
Since QML Dialog doesnot have any styling component I think you are only left by setting a custom contentItem as shown in the example.
Also how about using ApplicationWindow and setting flags as Qt.Dialog ? ApplicationWindow can be customized using ApplicationWindowStyle.

marinas

The problem with ApplicationWindow, Window and Dialog is the border and titlebar on top. They just don´t go with the rest of my application and there doesn´t seem to be an easy way to hide them/change their appearance.
You don´t happen to have som code laying around for resizing a Rectangle with mouse like you would a dialog?
A ResizingRectangle would be a great addition to QML Object Types!

p3c0

@marinas

You don´t happen to have som code laying around for resizing a Rectangle with mouse like you would a dialog?
A ResizingRectangle would be a great addition to QML Object Types!

By this you mean resizing the window which contains the Rectangle ?

marinas

@p3c0 No, I mean making a Rectangle that you can drag around with mouse to reposition it and use mouse to drag the edges/corners to resize it just like a dialog without the visible borders and titlebar.

p3c0

@marinas Perhaps something like this:

import QtQuick 2.5

Item {
    id: root
    width: 200
    height: 200

    Rectangle {
        id: rect
        width: 20
        height: 20
        color: "red"

        MouseArea {
            anchors.fill: parent
            onPositionChanged: {
                rect.width = mapToItem(root,mouseX,mouseY).x
                rect.height = mapToItem(root,mouseX,mouseY).y
            }
        }
    }
}

Drag the Red rectangle.

marinas

@p3c0 I just made a Rectangle with 9 different mouse areas: 4 corner areas (4x4 pixels), 4 side areas (4 pixels wide/high) and one center area handling drag to reposition rectangle. Seems to work fairly well, I have just found one issue. Top left corner and bottom right corners both use cursor shape SizeFDiagCursor as documentation states it should, but the cursor looks nothing like in the documentation and is correct only for bottom right corner. ( Cursor looks like a bottom right corner with a single headed arrow pointing into the corner.) What affects the appearance of the cursor?
(I´m on RHEL 7.1)

p3c0

@marinas I seem to be disconnected with what you are trying. Can you post the code for Rectangle ?