transparent Widget
-
wrote on 7 Aug 2018, 11:44 last edited by CodeFreaks 8 Jul 2018, 15:22This post is deleted!
-
wrote on 7 Aug 2018, 15:23 last edited by CodeFreaks 8 Aug 2018, 06:58This post is deleted!
-
wrote on 8 Aug 2018, 06:47 last edited by CodeFreaks 8 Aug 2018, 06:59
I examined many ways,
But I can't make a transparent tabwidget (In Linux) :
-
It's a 3 step process.
-
Make the window widget transparent using attribute
Qt::WA_TranslucentBackground, which gives you something like in your picture:
-
Make the tab header transparent. You can do that with stylesheet
QTabBar::tab { background: transparent; }
Note that this is stylingQTabBar, notQTabWidget.
You can modify the stylesheet to add the borders of the tab back if you like. -
Make the tab content transparent. Note that
QTabWidgetitself doesn't have a background. It's the background of the widget inside it that you need to make transparent. The easiest way to do this is to tell Qt that the paint event takes care of all the painting and it does not need to fill the background with default color i.e. useQt::WA_OpaquePaintEventattribute.
So the entire example looks like this:
int main(int argc, char *argv[]) { QApplication a(argc, argv); QWidget* tab_content = new QWidget(); tab_content->setAttribute(Qt::WA_OpaquePaintEvent); //makes the widget transparent QTabWidget* tw = new QTabWidget(); tw->addTab(tab_content, "Example"); tw->setStyleSheet("QTabBar::tab { background: transparent; }"); //makes the header transparent QWidget w; w.setAttribute(Qt::WA_TranslucentBackground); //makes the window transparent w.setLayout(new QVBoxLayout()); w.layout()->addWidget(tw); w.show(); return a.exec(); } -
-
It's a 3 step process.
-
Make the window widget transparent using attribute
Qt::WA_TranslucentBackground, which gives you something like in your picture:
-
Make the tab header transparent. You can do that with stylesheet
QTabBar::tab { background: transparent; }
Note that this is stylingQTabBar, notQTabWidget.
You can modify the stylesheet to add the borders of the tab back if you like. -
Make the tab content transparent. Note that
QTabWidgetitself doesn't have a background. It's the background of the widget inside it that you need to make transparent. The easiest way to do this is to tell Qt that the paint event takes care of all the painting and it does not need to fill the background with default color i.e. useQt::WA_OpaquePaintEventattribute.
So the entire example looks like this:
int main(int argc, char *argv[]) { QApplication a(argc, argv); QWidget* tab_content = new QWidget(); tab_content->setAttribute(Qt::WA_OpaquePaintEvent); //makes the widget transparent QTabWidget* tw = new QTabWidget(); tw->addTab(tab_content, "Example"); tw->setStyleSheet("QTabBar::tab { background: transparent; }"); //makes the header transparent QWidget w; w.setAttribute(Qt::WA_TranslucentBackground); //makes the window transparent w.setLayout(new QVBoxLayout()); w.layout()->addWidget(tw); w.show(); return a.exec(); }wrote on 20 Sept 2018, 06:54 last edited by CodeFreaks@Chris-Kawa
Hi Dear Chris Kawa
The method that you mentioned in previous post helped me a lot.
Thanks a lot.
But I tried to make a semi-transparent canvas (of qwtplot) . The canvas inherit from QFrame. I tried many days but I still can't do that.
A black background will appear instead of parent widget behind it.
QwtPlotCanvas Class Reference -
-
It's a 3 step process.
-
Make the window widget transparent using attribute
Qt::WA_TranslucentBackground, which gives you something like in your picture:
-
Make the tab header transparent. You can do that with stylesheet
QTabBar::tab { background: transparent; }
Note that this is stylingQTabBar, notQTabWidget.
You can modify the stylesheet to add the borders of the tab back if you like. -
Make the tab content transparent. Note that
QTabWidgetitself doesn't have a background. It's the background of the widget inside it that you need to make transparent. The easiest way to do this is to tell Qt that the paint event takes care of all the painting and it does not need to fill the background with default color i.e. useQt::WA_OpaquePaintEventattribute.
So the entire example looks like this:
int main(int argc, char *argv[]) { QApplication a(argc, argv); QWidget* tab_content = new QWidget(); tab_content->setAttribute(Qt::WA_OpaquePaintEvent); //makes the widget transparent QTabWidget* tw = new QTabWidget(); tw->addTab(tab_content, "Example"); tw->setStyleSheet("QTabBar::tab { background: transparent; }"); //makes the header transparent QWidget w; w.setAttribute(Qt::WA_TranslucentBackground); //makes the window transparent w.setLayout(new QVBoxLayout()); w.layout()->addWidget(tw); w.show(); return a.exec(); }wrote on 24 Jun 2021, 10:46 last edited by 8Observer8@Chris-Kawa, I tried your code but it does not work on Windows 10 and Qt 5.15.2. Why? Maybe does somebody else know it?
-
-
@Chris-Kawa, I tried your code but it does not work on Windows 10 and Qt 5.15.2. Why? Maybe does somebody else know it?
wrote on 8 May 2023, 15:31 last edited by@8Observer8 Were you able to resolve this issue? I'm having weird behavior even though i'm following the instructions, so not sure what am I doing wrong?
-
@8Observer8 Were you able to resolve this issue? I'm having weird behavior even though i'm following the instructions, so not sure what am I doing wrong?
wrote on 30 May 2023, 10:39 last edited by 8Observer8@Taytoo I am also waiting for a solution. Maybe someone knows what is the problem in the above example?
How to implement the same behavior as in ScreenToGif to take a screenshot inside a window?
-
It's a 3 step process.
-
Make the window widget transparent using attribute
Qt::WA_TranslucentBackground, which gives you something like in your picture:
-
Make the tab header transparent. You can do that with stylesheet
QTabBar::tab { background: transparent; }
Note that this is stylingQTabBar, notQTabWidget.
You can modify the stylesheet to add the borders of the tab back if you like. -
Make the tab content transparent. Note that
QTabWidgetitself doesn't have a background. It's the background of the widget inside it that you need to make transparent. The easiest way to do this is to tell Qt that the paint event takes care of all the painting and it does not need to fill the background with default color i.e. useQt::WA_OpaquePaintEventattribute.
So the entire example looks like this:
int main(int argc, char *argv[]) { QApplication a(argc, argv); QWidget* tab_content = new QWidget(); tab_content->setAttribute(Qt::WA_OpaquePaintEvent); //makes the widget transparent QTabWidget* tw = new QTabWidget(); tw->addTab(tab_content, "Example"); tw->setStyleSheet("QTabBar::tab { background: transparent; }"); //makes the header transparent QWidget w; w.setAttribute(Qt::WA_TranslucentBackground); //makes the window transparent w.setLayout(new QVBoxLayout()); w.layout()->addWidget(tw); w.show(); return a.exec(); }wrote on 22 Apr 2024, 22:56 last edited by JoeCFD@Chris-Kawa Your code works nicely on my local computer. But the transparent feature is gone after I copy the executable from my machine to another computer. Any thoughts?
same OS: Ubuntu 22.04
same Qt version: 5.15.3 -
-
@Chris-Kawa Your code works nicely on my local computer. But the transparent feature is gone after I copy the executable from my machine to another computer. Any thoughts?
same OS: Ubuntu 22.04
same Qt version: 5.15.3 -
@JoeCFD I lied. The desktop is different. One is gnome and another one is lxqt. It could be a qt bug.
wrote on 23 Apr 2024, 06:16 last edited by@JoeCFD you people may find this helpfull
https://github.com/jordanprog86/QtTransparentWindow.git
-
@JoeCFD you people may find this helpfull
https://github.com/jordanprog86/QtTransparentWindow.git
wrote on 23 Apr 2024, 22:56 last edited by JoeCFD@Ronel_qtmaster thanks for your post. Your code is not working on Lubuntu with LXQt desktop as well for Qt5/6. Chris Kawa's test code has the same issue.
The following example works
https://doc.qt.io/qt-5/qtwidgets-widgets-shapedclock-example.html -
@Ronel_qtmaster thanks for your post. Your code is not working on Lubuntu with LXQt desktop as well for Qt5/6. Chris Kawa's test code has the same issue.
The following example works
https://doc.qt.io/qt-5/qtwidgets-widgets-shapedclock-example.htmlwrote on 24 Apr 2024, 15:33 last edited by JoeCFD@JoeCFD solved the transparency issue in my code with mask. but kind of awkward and unnecessary. Submit a bug report with Chris Kawa's test code here
https://bugreports.qt.io/browse/QTBUG-124722 -
@Ronel_qtmaster thanks for your post. Your code is not working on Lubuntu with LXQt desktop as well for Qt5/6. Chris Kawa's test code has the same issue.
The following example works
https://doc.qt.io/qt-5/qtwidgets-widgets-shapedclock-example.htmlwrote on 24 Apr 2024, 15:58 last edited by@JoeCFD i think on ubuntu it might depend on the windows manager
-
@JoeCFD solved the transparency issue in my code with mask. but kind of awkward and unnecessary. Submit a bug report with Chris Kawa's test code here
https://bugreports.qt.io/browse/QTBUG-124722 -
@JoeCFD solved the transparency issue in my code with mask. but kind of awkward and unnecessary. Submit a bug report with Chris Kawa's test code here
https://bugreports.qt.io/browse/QTBUG-124722
