Creating transparent window background

Matthew0x

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

qtquickcontrols2.conf

[Universal]
Theme=System
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?

Update:
This post has helped me: https://forum.qt.io/post/339664

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"

Results:

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.