transparent Widget
-
Hi everyone,
I want to make a semi-transparent/transparent window like:
I want to make something like a semi transparent QTabWidget object which whole the background be semi transparent (even the icons) but the text of the icons and also whole the contents don't be. -
Hi and welcome to the forums.
(we cant see your links to www.qtcentre.org for some reason)For window type of widgets , you can use
http://doc.qt.io/qt-5/qwidget.html#windowOpacity-prop
-
-
Hi, the image you linked can't be seen by people that don't have account on qtcentre. I'm reuploding it, hope you don't mind.
This effect is not opacity. It is called Aero Glass and it's a window frame style provided by the Windows DWM (Desktop Window Manager). It's done by extending the window frame into the client area. Qt has a wrapper for that API in the WinExtras module (as seen in the window title in that screenshot). The function you're looking for is extendFrameIntoClientArea().
Note that this will only work on Windows Vista and 7. In Windows 8 and 10 the glass effect on the frame was replaced by a solid color so you still can extend the frame, but you won't get that blurred transparency. -
@mrjj
Thanks,
Set the window opacity is not the thing that I want because it influences whole contents not only the background.
I want to make both main window and QTabWidget be transparent (in Windows).
Something like this:
@CodeFreaks
So the image one can see in your sample actually the Desktop image ?Well you can do
setAttribute(Qt::WA_TranslucentBackground, true);
setWindowFlags(Qt::FramelessWindowHint);and mainwindow will be completely transparent.
(but also loses close buttons etc) -
@CodeFreaks
So the image one can see in your sample actually the Desktop image ?Well you can do
setAttribute(Qt::WA_TranslucentBackground, true);
setWindowFlags(Qt::FramelessWindowHint);and mainwindow will be completely transparent.
(but also loses close buttons etc)@mrjj
Thanks for reply,
@mrjj said in transparent Widget:So the image one can see in your sample actually the Desktop image ?
Any thing behind my app can be seen.
This method doesn't work for QTabWidget (as I tried),
also for Main Window any content behind it, is accessible for all mouse/touch events (In Windows 8.1). -
Hi, the image you linked can't be seen by people that don't have account on qtcentre. I'm reuploding it, hope you don't mind.
This effect is not opacity. It is called Aero Glass and it's a window frame style provided by the Windows DWM (Desktop Window Manager). It's done by extending the window frame into the client area. Qt has a wrapper for that API in the WinExtras module (as seen in the window title in that screenshot). The function you're looking for is extendFrameIntoClientArea().
Note that this will only work on Windows Vista and 7. In Windows 8 and 10 the glass effect on the frame was replaced by a solid color so you still can extend the frame, but you won't get that blurred transparency.@Chris-Kawa
Thanks for reply,
As I realized;
It is possible to make a semi transparent widget (parent/child) in Linux but if I want to do the same in Windows I should use Winextras which windows 8 and later versions don't support it.
Doesn't exist any way to make it possible for Windows 8 and 10? -
windows 8 and later versions don't support it
Well it's not that they don't support it. They do and the APIs are exactly the same. It's just that the style has changed and aero windows are no longer transparent.
I'm afraid I don't have good news. The closest thing to that effect in Windows 10 is the new Acrylic Material:
The bad part is that it is available exclusively via XAML brushes, so while trivial to use with C# it might be very difficult or even impossible to make it work with native C++ (yeah, thanks Microsoft...). Combining it with Qt on top of that. Well... good luck ;)The only other alternative I know is to implement the whole thing yourself i.e. take a screenshot from under the window with native API and write your own DirectX shaders to add the glass effect. That would be just a very dirty hack though that would probably break easily. It is a lot of very low level work involving DirectComposition and expected performance is not gonna be too good. Combining it with Qt would also pose quite a challenge.
The sad state of the world is that Microsoft is heavily promoting XAML technology and has actively taken away all the easy ways to add the same effect to native c++ apps.
-
This post is deleted!
-
This post is deleted!
-
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(); }@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(); }@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?
-
@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?
@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(); } -
-
@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.
@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
@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
