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

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(&#41;;

}
@

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.