QtQuick 2 Transparent Window Background - qt

Question

I've been searching how to make the background of my QtQuick 2.0 application transparent.
Most answers I've found use QtDeclarative which is ok for QtQuick 1.0 but not version 2.
Finally I found an answer that I will post but I would like to know if there is a better/simpler/smaller way to achieve this task.
Note*
I wanna make the Background of the window transparent.
Some people suggest to setOpacity but this makes all the qml elements transparent.

Answer 1

I found a solution in this post http://qt-project.org/forums/viewthread/18984/#106629 by billouparis. He uses the main application template that is being generated by QtCreator which is pretty convenient.
Note: I changed a little bit the original code to make it smaller.
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QSurface>
#include <QSurfaceFormat>
#include <QDebug>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QtQuick2ApplicationViewer viewer;
// Make Background Transparent Start
viewer.setSurfaceType(QSurface::OpenGLSurface);
QSurfaceFormat format;
format.setAlphaBufferSize(8);
format.setRenderableType(QSurfaceFormat::OpenGL);
viewer.setFormat(format);
viewer.setColor(QColor(Qt::transparent));
viewer.setClearBeforeRendering(true);
// Make Background Transparent Stop
viewer.setMainQmlFile(QStringLiteral("qml/myProject/main.qml"));
viewer.showExpanded();
return app.exec();
}
Also make sure that the root qml element has an alpha color (Qt.rgba)

Answer 2

here a example to get a frameless, transparent window in pure qml
import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
ApplicationWindow {
id: backlight
flags: Qt.FramelessWindowHint
visible: true
title: qsTr("backlight")
width: 500
height: 50
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
property real slideValue
signal onSlide(real value)
Rectangle {
anchors.centerIn: parent
width: parent.width
height: 50
color: "transparent"
Rectangle {
anchors.fill: parent
radius: 25
opacity: 0.3
color: "gray"
}
Slider {
anchors.centerIn: parent
width: backlight.width - 16
height: backlight.height
value: backlight.slideValue
focus: true
onValueChanged: backlight.onSlide(value)
Keys.onSpacePressed: Qt.quit()
Keys.onEscapePressed: Qt.quit()
style: SliderStyle {
groove: Rectangle {
implicitHeight: 8
radius: 4
color: "gray"
}
handle: Rectangle {
anchors.centerIn: parent
color: control.pressed ? "white" : "lightgray"
border.color: "gray"
border.width: 2
width: 34
height: 34
radius: 17
}
}
}
}
}

Answer 3

Try this
import QtQuick 2.2
import QtQuick.Window 2.0
Window {
id: backlight
visible: true
title: qsTr("backlight")
width: 500
height: 50
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
}