How to get opacity to main window & widgets on button click in Windows using Qt 4.8?

Question

I'm bit new to Qt framework, so am struggling bit in one of the requirement.

We have to fade the main window on button click which in turns pop-up the confirmation message. With that only the pop-up message should be visible and the background should get opaque.

Currently on clicking the button the message is displayed the background gets opaque. But the other widgets in the windows are still prominent.

Below is the code snippet on Click event of Ok Button

void MainWindow::OkClicked()
{
  QGraphicsOpacityEffect*   effect01  = new QGraphicsOpacityEffect();
  effect01->setOpacity(0.2);
  this->setGraphicsEffect(effect01);
  MessageDialog->updateStyles(); //Pop-up message Box
  MessageDialog->show();
}

One approach can be, if we set the opacity for all widgets individually. But that won't be a good design Any guidance is highly appreciated.

Answer 1

It's possible to create a containing widget and add a QSS styling with a background-color property with an alpha property. Then add layouts to your containing widget for organizing the layout of the nested widgets. I use this technique to achieve a transparency effect while maintaining opacity for the nested controls. Here's some example code:

setAttribute(Qt::WA_NoSystemBackground, true);
// set the parent widget's background to translucent
setAttribute(Qt::WA_TranslucentBackground, true);

setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
// create a display widget for displaying child widgets
QWidget* displayWidget = new QWidget;
displayWidget->setGeometry(0, 0, this->width(), this->height());
displayWidget->setStyleSheet(".QWidget { background-color: rgba(0, 0, 0, 75%); border-width: 1px; border-style: solid; border-radius: 5px; border-color: #555555; } .QWidget:hover { background-color: rgba(68, 68, 68, 75%); border-width: 2px; border-style: solid; border-radius: 10px; border-color: #ffffff; }");

QLabel* icon = new QLabel;
icon->setPixmap(pixmapIcon);
icon->setMaximumSize(32, 32);
QLabel* header = new QLabel;
header->setMaximumSize(225, 50);
header->setWordWrap(true);
header->setText(headerText);
header->setStyleSheet("QLabel { color: #ffffff; font-weight: bold; font-size: 12px; }");
QLabel* message = new QLabel;
message->setMaximumSize(225, 100);
message->setWordWrap(true);
message->setText(messageText);
message->setStyleSheet("QLabel { color: #ffffff; font-size: 10px; }");
QHBoxLayout* displayMainLayout = new QHBoxLayout;
displayMainLayout->addWidget(icon);
QVBoxLayout* vl = new QVBoxLayout;
vl->addWidget(header);
vl->addWidget(message);
displayMainLayout->addLayout(vl);
displayWidget->setLayout(displayMainLayout);

QHBoxLayout* containerLayout = new QHBoxLayout;
containerLayout->addWidget(displayWidget);
setLayout(containerLayout);

show();

This code is taken directly from my Qt Tray Notification Manager project. You can view the full code here to get some context: https://github.com/pcmantinker/Tray-Notification-System

Note, if you're familiar with CSS, QSS is very similar. If you want to style all QWidgets a certain way, you would use the QWidget selector. However, if you just want to style a particular QWidget, use the .QWidget selector. Styling all QWidgets would make every visible QWidgets inherit the same properties as each UI element is derived from QWidget. Keep that in mind when building the styles. Here's a reference to QSS: http://qt-project.org/doc/qt-4.8/stylesheet.html

Here's some sample images of how it looks:
Windows 7

Mac OS X Lion

Ubuntu

I hope this helps. Let me know if you have any questions.