[Solved]-How can I make a QDockWidget transparent when floating?



  • Hello,

    To continue my QDockWidget series... I would like to make a QDockWidget transparent when it is floating, meaning I want to see through it.

    I have looked around and found several threads that discuss making widgets transparent but I can't seem to get anything to work with a QDockWidget. When there are several widgets involved in a dock widgets which one do I make transparent the top most parent? or each child?

    The code below is a Main Window application with a menu bar, tool bar, status bar and a central widget. I have added a QDockWidget and some code to make it transparent. The title bar of the dock widget is transparent (50%) when docked but the background is not transparent when docked or floated. It would nice if it was :-).

    Can anyone tell me if there is a way to do this on both Windows and Mac?
    I would appreciate any help at all.

    Thanks

    @
    #include <QApplication>
    #include <QMainWindow>
    #include <QAction>
    #include <QMenuBar>
    #include <QToolBar>
    #include <QMenu>
    #include <QTextEdit>
    #include <QStatusBar>
    #include <QGridLayout>
    #include <QDockWidget>
    #include <QToolButton>
    #include <QPalette>
    #include <QString>
    #include <QFont>
    #include <QDebug>

    QString appeal = "Hello everyone,\n\nPlease help me make my dock widget have a transparent background when it is floated.\n\nThank you.";

    int main(int argc, char *argv[])
    {
    QApplication a(argc, argv);
    QMainWindow *w = new QMainWindow();
    w->resize(800,600);

    // add a status bar
    QStatusBar *statusBar = new QStatusBar(w);
    w->setStatusBar(statusBar);
    statusBar->showMessage("Please Make my Dock Widget See Thru :-)");
    
    // add an exit menu
    QMenu *fileMenu = new QMenu();
    QAction *exitAct = new QAction("E&xit", w);
    exitAct->setShortcuts(QKeySequence::Quit);
    exitAct->setStatusTip("Exit the application");
    exitAct->setShortcut(QKeySequence("Ctrl+Q"));
    w->connect(exitAct, SIGNAL(triggered()), &a, SLOT(closeAllWindows()));
    fileMenu = w->menuBar()->addMenu("&File");
    fileMenu->addAction(exitAct);
    
    // add a tool bar
    QToolBar *toolBar = new QToolBar("A Toobar",w);
    toolBar->setAllowedAreas(Qt::AllToolBarAreas);
    toolBar->addAction(exitAct);
    w->addToolBar(Qt::TopToolBarArea,toolBar);
    
    // add a central widget
    QTextEdit *central = new QTextEdit(w);
    QFont font;
    font.setFamily("Helvetica");
    font.setPointSize(24);
    font.setBold(true);
    central->setFont(font);
    central->setText(appeal);
    w->setCentralWidget(central);
    
    // add the dock widget
    QPalette pal;
    QDockWidget *seeThruDock = new QDockWidget("See Thru",w);
    seeThruDock->setFeatures(QDockWidget::DockWidgetClosable|QDockWidget::DockWidgetFloatable|QDockWidget::DockWidgetMovable);
    
    // HOW TO SET TRANSPARENCY WHEN FLOATING???
    seeThruDock->setWindowFlags(seeThruDock->windowFlags()|Qt::FramelessWindowHint);
    seeThruDock->setAttribute(Qt::WA_TranslucentBackground ,true);
    seeThruDock->setAutoFillBackground(false);
    pal = seeThruDock->palette();
    pal.setBrush(QPalette::Window, QColor(255, 0, 0, 128) );
    seeThruDock->setPalette(pal);
    
    // add a contents widget
    QWidget *seeThruContents = new QWidget();
    seeThruContents->setMinimumSize(QSize(72,40));
    
    // add a widget for a layout
    QWidget *gridLayoutWidget = new QWidget(seeThruContents);
    gridLayoutWidget->setGeometry(QRect(0,0,72,40));
    
    // add a grid layout
    QGridLayout *gridLayout = new QGridLayout(gridLayoutWidget);
    gridLayout->setSpacing(2);
    gridLayout->setContentsMargins(2,2,2,2);
    
    // add couple of tool bar buttons to the layout
    QToolButton *Tb_1 = new QToolButton(gridLayoutWidget);
    Tb_1->setIconSize(QSize(32,32));
    gridLayout->addWidget(Tb_1,0,0,1,1);
    //
    QToolButton *Tb_2 = new QToolButton(gridLayoutWidget);
    Tb_2->setIconSize(QSize(32,32));
    gridLayout->addWidget(Tb_2,0,1,1,1);
    
    // set the dock widget
    seeThruDock->setWidget(seeThruContents);
    seeThruDock->setAllowedAreas(Qt::AllDockWidgetAreas);
    w->addDockWidget(Qt::LeftDockWidgetArea,seeThruDock);
    
    w->show();
    return a.exec(&#41;;
    

    }
    @



  • How do you plan to float the dock widget?

    If you plan to float the dock widget using mouse, then the momment you drag the title bar of the dock widget it will pop out and immdiately the FramelessWindowHint (should be explicitly set) will be set and you will lose track of the dock widget's titlebar... think of this!

    If you only want to float it programatically, then connect a slot to topLevelChanged() of dock widget and set the window flags in there.

    Note the trick is to set the WA_TranslucentBackground flag every time after floating the dock widget not before.


  • Moderators

    connect to QDockWidget::topLevelChanged() signal and use "QWidget::setWindowOpacity()":http://qt-project.org/doc/qt-4.8/qwidget.html#windowOpacity-prop to set it semi-transparent.



  • I see, Thank you both for your suggestions. Good point about the loosing track of the title bar. I give your suggestion a try and see how it goes.



  • Hello raven-worx,

    I tried your suggestion and it works fine for the dock widget. The problems is that any child widgets (tool buttons in my case) are also the same level of transparency.

    I don't want my buttons to be transparent. Setting their opacity to 1.0 did not have any effect.

    Is there any way to keep the buttons (children) opaque?

    Many thanks.


  • Moderators

    AFAIK this isn't possible.



  • Ah, I see. Well it's close to what I am looking for. I will try some more approaches and see how it goes.

    Thanks to all for the help.



  • Hello again, we seem to have just lost some posts when the server went down.

    Santosh, I tried your suggestion to use setAutoFillBackground(true) on the child widgets. I set it on the buttons but it did not have any effect.

    Thanks for the suggestion though.



  • QToolButtons and QPushButtons will not be transparent, there is somthing you are missing, can you show the screenshot of the problem?



  • OK, here is a screen shot of the transparent dock widget floating over the background.

    https://www.dropbox.com/s/784h7cgmyltiotm/TransparentDockWidget.png

    As you can see the buttons are also transparent.



  • Hello again,

    I have found that if you use the setWindowOpacity() function on the parent the children are all transparent also
    if you use the following:
    @
    setWindowFlags(Qt::FramelessWindowHint); setAttribute(Qt::WA_TranslucentBackground);
    setStyleSheet("background:rgba(0,0,0,50%);");
    @
    on the top level widget naturally you get a frameless transparent window but you can change the transparency of children which are not direct descendants of the frameless window. You can control the transparency and color of the children using a style like this for example:
    @
    setStyleSheet("MyToolButton { color: black; background: white; border-radius: 5px; }");
    @
    using setWindowOpacity() on the children does not work.
    You can probably do this with a palette but I have not tried that.

    The kicker is... I can't get this to work when the top level widget is a QDockWidget. I can only make the QDockWidget transparent using setWindowOpacity().

    I am sure all those experience with using transparency know all this. Are my findings correct or is there more that I am missing?

    Thanks.
    PS. I will post some code to show this later.



  • Unfortunately this discussion did not help me put opaque buttons on a QDockWidget but it pointed me in another direction and I learned something about transparency. I guess Dock Widgets are complex things but I will keep trying. I have marked this thread solved because it did result in me getting a transparent doc widget. Maybe I should start a new thread to ask about making the buttons transparent.

    For those who might find this useful here is some code to go with my previous post. You can tweak the style sheet stuff and change the colour and transparency of the children.

    Thanks again Santosh and raven-worx for your help . If you have any other ideas please post again.

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

    // a transparent top level widget
    QWidget *widget = new QWidget;
    widget->setWindowFlags(Qt::FramelessWindowHint);
    widget->setAttribute(Qt::WA_TranslucentBackground);
    widget->setStyleSheet("background:rgba(0,0,0,50%);");
    widget->setFixedSize(QSize(500,500));
    
    // a label so we can see the top widget
    QLabel *label = new QLabel(widget);
    label->setFixedSize(500, 500);
    label->setStyleSheet("border-radius: 20px;");
    
    // a close button
    QPushButton *button = new QPushButton(label);
    button->setGeometry(20,20,100,50);
    button->setStyleSheet("background-color: white; border-radius: 10px;");
    button->setText("Close");
    widget->connect(button, SIGNAL(pressed()), &a, SLOT(closeAllWindows()));
    button->setShortcut(QKeySequence("Ctrl+Q"));
    button->setToolTip(a.tr("Close the application (Qtrl-Q)"));
    
    // a widget for some other content also transparent
    QWidget *contentWidget = new QWidget(label);
    contentWidget->setGeometry(25,150,450,200);
    
    // an opaque label for the content
    // if you don't use the style it will also be transparent
    QLabel *label2 = new QLabel(contentWidget);
    label2->move(20,20);
    label2->setText("This is a QWidget");
    label2->setStyleSheet("color : black; background-color : white; border-radius: 0;");
    
    widget->show();
    
    return a.exec(&#41;;
    

    }
    @



  • Kenchan you just saved my life!!! Thanks a lot for your post!!!



  • Hello amonR,

    I am glad to hear something in this post was useful to someone :-).

    Since Qt5.1 this also works quite well on Mac OSX.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.