Important: Please read the Qt Code of Conduct -

Creating transparent window background

  • Hello,

    answering the incoming questions:

    • setWindowFlag(Qt::FramelessWindowHint);
    • setAttribute(Qt::WA_TranslucentBackground);

    are tested, they don't work as I desire.

    My idea is to implement a transparent (or partially transparent) window, like the ones to be seen in UWP (metro) type of applications, for example on Windows 10.

    I have successfully implemented such on UWP, and ... partially even in Qt.
    The problem is that:

    Method A:

    • requires borderless window (that just doesn't work well for any type of user in my opinion)

    Method B:

    • is the most likely a "bug" (writing over an inherited property I believe, as the "color" one isn't natively available for that object)

    Therefore, I would like to try out a proper method that would be supported in the framework.
    By no means I am advanced in general programming, especially Qt. However, I understand the most of basic terms I believe.

    Method A:

    Using the aforementioned flags I could create a transparent window, however it lacks dragging event tracking, any maximize/minimize buttons etc. (presented below, the top part is a grid or something alike, that inherits the color thus they go one on another)


    This is using the desktop type of application, with the main.cpp and mainwindow.cpp files.

    Method B:


    This is the result I wish to achieve, but I believe that this way is wrong.
    Not all colors work properly (the hex values, not every hex value is rendered), as well I get error messages (that aren't crucial in the compiling process).

    qrc:/main.qml:63:5: QML StackView: push: qrc:/Page1Form.ui.qml:7 Cannot assign to non-existent property "color" QQmlComponent: Component is not ready qrc:/main.qml:63:5: QML StackView: pop: qrc:/HomeForm.ui.qml:10 Cannot assign to non-existent property "color" QQmlComponent: Component is not ready qrc:/main.qml:63:5: QML StackView: push: qrc:/Page2Form.ui.qml:7 Cannot assign to non-existent property "color"

    Modifications made:
    Page files:

    Page {
    width: 600
    height: 400
    color: "#6655b4f7" - adding the line that probably overwrites the inherited color


    Background=#800000FF - setting the background property

    Results without the page file modification:


    The colors overlap, this is what I wanted to evade.

    Am I doing something wrong, or is the transparency feature handled in restricted ways?

    This post has helped me:

    Method 2:
    Background in .conf undefined, background color in ApplicationWindow

    ApplicationWindow {
    id: window
    width: 640
    height: 480
    opacity: 1
    visible: true
    color: "#6655b4f7"
    title: qsTr("Stack")

    for each

    Page {
    width: 600
    height: 400
    //color: "#6655b4f7"
    Universal.background: "transparent"



    I might have not tested enough the <theme>.background option... No errors this time.
    To the method 1, I have no idea if rendering frame transparent with the controls preserved is possible.