Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. [Solved]-How can I make a QDockWidget transparent when floating?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved General and Desktop
14 Posts 4 Posters 11.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    kenchan
    wrote on last edited by
    #1

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

    }
    @

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Santosh Reddy
      wrote on last edited by
      #2

      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.

      SS

      1 Reply Last reply
      0
      • raven-worxR Offline
        raven-worxR Offline
        raven-worx
        Moderators
        wrote on last edited by
        #3

        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.

        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
        If you have a question please use the forum so others can benefit from the solution in the future

        1 Reply Last reply
        0
        • K Offline
          K Offline
          kenchan
          wrote on last edited by
          #4

          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.

          1 Reply Last reply
          0
          • K Offline
            K Offline
            kenchan
            wrote on last edited by
            #5

            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.

            1 Reply Last reply
            0
            • raven-worxR Offline
              raven-worxR Offline
              raven-worx
              Moderators
              wrote on last edited by
              #6

              AFAIK this isn't possible.

              --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
              If you have a question please use the forum so others can benefit from the solution in the future

              1 Reply Last reply
              0
              • K Offline
                K Offline
                kenchan
                wrote on last edited by
                #7

                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.

                1 Reply Last reply
                0
                • K Offline
                  K Offline
                  kenchan
                  wrote on last edited by
                  #8

                  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.

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    Santosh Reddy
                    wrote on last edited by
                    #9

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

                    SS

                    1 Reply Last reply
                    0
                    • K Offline
                      K Offline
                      kenchan
                      wrote on last edited by
                      #10

                      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.

                      1 Reply Last reply
                      0
                      • K Offline
                        K Offline
                        kenchan
                        wrote on last edited by
                        #11

                        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.

                        1 Reply Last reply
                        0
                        • K Offline
                          K Offline
                          kenchan
                          wrote on last edited by
                          #12

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

                          }
                          @

                          1 Reply Last reply
                          0
                          • A Offline
                            A Offline
                            amonR
                            wrote on last edited by
                            #13

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

                            1 Reply Last reply
                            0
                            • K Offline
                              K Offline
                              kenchan
                              wrote on last edited by
                              #14

                              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.

                              1 Reply Last reply
                              0

                              • Login

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Categories
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Groups
                              • Search
                              • Get Qt Extensions
                              • Unsolved