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

[kenchan]

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();

}
@

[Santosh Reddy]

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.

[raven-worx]

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.

[kenchan]

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.

[kenchan]

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.

[raven-worx]

AFAIK this isn't possible.

[kenchan]

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.

[kenchan]

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.

[Santosh Reddy]

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

[kenchan]

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.

[kenchan]

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.

[kenchan]

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();

}
@

[amonR]

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

[kenchan]

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.