How to make Transparent QT Dock Widget

Question

On Windows ,I am trying to create Qt application with transparent DOCKWIDGETS, where background of dock widget is transparent when it is floated. So we can see through dock widget. Currently it looks black as below.

Code as below

    QDockWidget * dock3 = new QDockWidget(tr("DOCK3 TranslucentBackground"), 
    textEdit,Qt::FramelessWindowHint);
    dock3->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);
    //dock3->setWindowFlags(dock2->windowFlags()|Qt::FramelessWindowHint);
    dock3->setAttribute(Qt::WA_TranslucentBackground);
    //dock3->setAttribute(Qt::WA_NoSystemBackground);
   {
        QWidget* WindowRect = new QWidget(dock3);
        QWidget* titleRect = new QLabel ("Title",WindowRect);
        titleRect->setFixedSize(QSize(30,60));
        titleRect->setStyleSheet("background:rgb(0,0,255);");
        QWidget* ContentRect = new QLabel("Content",WindowRect);
        ContentRect->setFixedSize(QSize(60,30));
        ContentRect->setStyleSheet("background:rgb(0,255,0);");
        QVBoxLayout* layout = new QVBoxLayout(WindowRect);
        layout->addWidget(titleRect);
        layout->addWidget(ContentRect);
        dock3->setWidget(WindowRect);
    }

You should have posted your code (as a [MCVE](https://stackoverflow.com/help/minimal-reproducible-example)) , so that we can understand why it looks black like that... — jpo38, Jun 07 '20 at 18:57

score 0 · Answer 1 · answered Jun 02 '20 at 09:41

0

One way is to use setWindowOpacity(qreal) of the QDockWidget.
But keep in mind that this will apply the opacity to all children of the QDockWidget.

For reference: https://doc.qt.io/qt-5/qwidget.html#windowOpacity-prop

Another way is to use style sheets: setStyleSheet("background-color: transparent;");. Unfortunately this doesn't work for top level widgets until you set the attribute WA_TranslucentBackground of the base widget.

For reference:
https://doc.qt.io/qt-5/stylesheet.html
https://doc.qt.io/qt-5/qwidget.html#styleSheet-prop

answered Jun 02 '20 at 09:41

luv4bytes

144
7

"setWindowOpacity" function makes all the child widgets also transparent. I want Child widgets opaque. – living on edge Jun 05 '20 at 11:30
For second solution, It appears with black Background while floating. – living on edge Jun 06 '20 at 09:10

score 0 · Answer 2 · answered Jun 07 '20 at 07:12

Try with this article: Qt tip & Trick: Masking Widgets

You can do it with:

setStyleSheet("background-color: rgba(0,0,0,0)");

You can try to to it in the drawin customisation by changing the style of your widget like:

MyCustomWidget {background-color: none;}

It should work

jpo38 · Answer 3 · 2020-06-07T18:56:30.557

I understand that you want to see through the docking bar only when it is floating. When it's not (docked), it makes no sense because there's nothing behind to be shown.

Using setAttribute(Qt::WA_TranslucentBackground) does the trick. I'm under Linux, hopefully, it also works for Windows (I found some posts where people additionally set setAttribute(Qt::WA_NoSystemBackground), it made no difference for me under Linux, if Qt::WA_TranslucentBackground is not enough for you, give it a try with both).

#include <QMainWindow>
#include <QApplication>
#include <QDockWidget>
#include <QLabel>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow w;

    w.setCentralWidget( new QWidget() );
    w.centralWidget()->setStyleSheet("background-color: green");

    QDockWidget* dock = new QDockWidget();
    dock->setWidget( new QLabel("Hello World",dock) );

    // make docking bar transparent!
    dock->setAttribute(Qt::WA_TranslucentBackground);

    w.addDockWidget(Qt::BottomDockWidgetArea,dock, Qt::Horizontal);

    w.show();

    return a.exec();
}

When docked, it looks like this:

When floating, it looks like this:

You can see the central widget (green), can be visible through the docking bar.

Reference: Make QWidget transparent

This exact I wanted, but I have already tried this, I have added code as above. As you said it seems to be working on Linux not on Windows. I appears with black background — living on edge, Jun 11 '20 at 10:31

How to make Transparent QT Dock Widget

3 Answers3