QtQuick 2 Transparent Window Background

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

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"


    }

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

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)