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. QWidget custom styling
Qt 6.11 is out! See what's new in the release blog

QWidget custom styling

Scheduled Pinned Locked Moved Unsolved General and Desktop
qwidgetstylestylesheet
14 Posts 3 Posters 8.3k Views 2 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.
  • mrjjM mrjj

    Hi
    What about using a QFrame as base and just use stylesheet ?
    QFrame{background-color: red; border: 1px solid black; border-radius: 10px;}

    Not tried with QGraphicsScene though :)

    alternate text

    Joel BodenmannJ Offline
    Joel BodenmannJ Offline
    Joel Bodenmann
    wrote on last edited by Joel Bodenmann
    #3

    @mrjj Thank you for your suggestion!
    Two problems with that:

    1. While I see the rounder corners of the border the red background still is rectangular.
    2. Now the items that are part of the layout have a black border around them too


    The screenshot shows a QFormLayout with a QLabel using the text "Hello World"

    Industrial process automation software: https://simulton.com
    Embedded Graphics & GUI library: https://ugfx.io

    mrjjM 1 Reply Last reply
    0
    • Joel BodenmannJ Joel Bodenmann

      @mrjj Thank you for your suggestion!
      Two problems with that:

      1. While I see the rounder corners of the border the red background still is rectangular.
      2. Now the items that are part of the layout have a black border around them too


      The screenshot shows a QFormLayout with a QLabel using the text "Hello World"

      mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by mrjj
      #4

      @Joel-Bodenmann
      Ok. hmm.
      And this is using a QFrame ?
      Im wondering if QFrame is using the flag to not get bg painted before paintEvent.

      Joel BodenmannJ 1 Reply Last reply
      0
      • mrjjM mrjj

        @Joel-Bodenmann
        Ok. hmm.
        And this is using a QFrame ?
        Im wondering if QFrame is using the flag to not get bg painted before paintEvent.

        Joel BodenmannJ Offline
        Joel BodenmannJ Offline
        Joel Bodenmann
        wrote on last edited by
        #5

        @mrjj
        Yes, that is a QFrame.
        QGraphicsScene::addWidget() takes Qt::WindowFlags as a parameter but as far as I can tell it's not related to this issue.

        Any ideas?

        Industrial process automation software: https://simulton.com
        Embedded Graphics & GUI library: https://ugfx.io

        mrjjM 1 Reply Last reply
        0
        • Joel BodenmannJ Joel Bodenmann

          @mrjj
          Yes, that is a QFrame.
          QGraphicsScene::addWidget() takes Qt::WindowFlags as a parameter but as far as I can tell it's not related to this issue.

          Any ideas?

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by
          #6

          @Joel-Bodenmann
          hmm not really then.
          I was thinking of
          setAttribute(Qt::WA_NoSystemBackground);.

          Joel BodenmannJ 1 Reply Last reply
          0
          • mrjjM mrjj

            @Joel-Bodenmann
            hmm not really then.
            I was thinking of
            setAttribute(Qt::WA_NoSystemBackground);.

            Joel BodenmannJ Offline
            Joel BodenmannJ Offline
            Joel Bodenmann
            wrote on last edited by
            #7

            @mrjj
            Well if I do that then I see the two labels but the actual rectangular box with the rounder border of the QFrame is gone.

            Industrial process automation software: https://simulton.com
            Embedded Graphics & GUI library: https://ugfx.io

            mrjjM 1 Reply Last reply
            0
            • Joel BodenmannJ Joel Bodenmann

              @mrjj
              Well if I do that then I see the two labels but the actual rectangular box with the rounder border of the QFrame is gone.

              mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #8

              @Joel-Bodenmann

              is the QFormLayout inside anything ?

              Joel BodenmannJ 1 Reply Last reply
              0
              • mrjjM mrjj

                @Joel-Bodenmann

                is the QFormLayout inside anything ?

                Joel BodenmannJ Offline
                Joel BodenmannJ Offline
                Joel Bodenmann
                wrote on last edited by Joel Bodenmann
                #9

                @mrjj
                Yes. I create the layout (and the label that goes into the layout) in the constructor of my SchematicPopup class which inherits from QFrame. I use setLayout() in the constructor to apply the layout to the QFrame.

                Industrial process automation software: https://simulton.com
                Embedded Graphics & GUI library: https://ugfx.io

                kshegunovK 1 Reply Last reply
                0
                • Joel BodenmannJ Joel Bodenmann

                  @mrjj
                  Yes. I create the layout (and the label that goes into the layout) in the constructor of my SchematicPopup class which inherits from QFrame. I use setLayout() in the constructor to apply the layout to the QFrame.

                  kshegunovK Offline
                  kshegunovK Offline
                  kshegunov
                  Moderators
                  wrote on last edited by
                  #10

                  @Joel-Bodenmann
                  Try using a custom graphics effect for your widget.

                  Read and abide by the Qt Code of Conduct

                  Joel BodenmannJ 1 Reply Last reply
                  0
                  • kshegunovK kshegunov

                    @Joel-Bodenmann
                    Try using a custom graphics effect for your widget.

                    Joel BodenmannJ Offline
                    Joel BodenmannJ Offline
                    Joel Bodenmann
                    wrote on last edited by
                    #11

                    @kshegunov
                    Thank you for your suggestion! Can you be a bit more specific? I'm having troubles figuring out a way to implement a QGraphicsEffect to make rounder corners.

                    Industrial process automation software: https://simulton.com
                    Embedded Graphics & GUI library: https://ugfx.io

                    kshegunovK 1 Reply Last reply
                    0
                    • Joel BodenmannJ Joel Bodenmann

                      @kshegunov
                      Thank you for your suggestion! Can you be a bit more specific? I'm having troubles figuring out a way to implement a QGraphicsEffect to make rounder corners.

                      kshegunovK Offline
                      kshegunovK Offline
                      kshegunov
                      Moderators
                      wrote on last edited by kshegunov
                      #12

                      @Joel-Bodenmann
                      I haven't used the effects framework myself, but as far as I understand how they work you could try the following:

                      1. Set your widget attributes to include Qt::WA_TranslucentBackground
                      2. Subclass QGraphicsEffect and implement the pure virtual QGraphicsEffect::draw(QPainter *)
                        • in that method draw manually the window's border and background using the provided QPainter argument (you should be able to provide even more complex behavior than rounded corners if needed, but for your case QPainter::drawRoundedRect should suffice).
                        • the geometry of the widget itself you should be able to get from QGraphicsEffect::boundingRect
                      3. Install an instance of your effect on your widget with QWidget::setGraphicsEffect

                      Note that the effect is supposed to be inherited through child widgets, so I'm not completely sure it won't interfere with the labels/buttons you add to the widget. In any case you could patch that up by holding a reference to the relevant widget in the effect itself.

                      I hope that helps.

                      Read and abide by the Qt Code of Conduct

                      Joel BodenmannJ 1 Reply Last reply
                      1
                      • kshegunovK kshegunov

                        @Joel-Bodenmann
                        I haven't used the effects framework myself, but as far as I understand how they work you could try the following:

                        1. Set your widget attributes to include Qt::WA_TranslucentBackground
                        2. Subclass QGraphicsEffect and implement the pure virtual QGraphicsEffect::draw(QPainter *)
                          • in that method draw manually the window's border and background using the provided QPainter argument (you should be able to provide even more complex behavior than rounded corners if needed, but for your case QPainter::drawRoundedRect should suffice).
                          • the geometry of the widget itself you should be able to get from QGraphicsEffect::boundingRect
                        3. Install an instance of your effect on your widget with QWidget::setGraphicsEffect

                        Note that the effect is supposed to be inherited through child widgets, so I'm not completely sure it won't interfere with the labels/buttons you add to the widget. In any case you could patch that up by holding a reference to the relevant widget in the effect itself.

                        I hope that helps.

                        Joel BodenmannJ Offline
                        Joel BodenmannJ Offline
                        Joel Bodenmann
                        wrote on last edited by
                        #13

                        Thank you for the explanation!
                        As this seems to be a bit more complex than it looked initially I will postpone this and just life with rectangular boxes for now :)

                        Industrial process automation software: https://simulton.com
                        Embedded Graphics & GUI library: https://ugfx.io

                        kshegunovK 1 Reply Last reply
                        0
                        • Joel BodenmannJ Joel Bodenmann

                          Thank you for the explanation!
                          As this seems to be a bit more complex than it looked initially I will postpone this and just life with rectangular boxes for now :)

                          kshegunovK Offline
                          kshegunovK Offline
                          kshegunov
                          Moderators
                          wrote on last edited by kshegunov
                          #14

                          @Joel-Bodenmann said:

                          As this seems to be a bit more complex than it looked initially I will postpone this and just life with rectangular boxes for now :)

                          Sure, if this is an option. However, implementing a class with a single function shouldn't be very complex ;)

                          class MyRoundedCornerEffects
                          {
                          public:
                              MyRoundedCornerEffects(QObject * parent = NULL)
                                  : QObject(parent)
                              {
                              }
                              
                              virtual draw(QPainter * painter)
                              {
                                  painter->setPen(QPen(Qt::black, 1));
                                  painter->setBrush(Qt::red);
                                  painter->drawRoundedRect(boundingRect(), 10, 10);
                              }
                          };
                          
                          class MyWidgetWithEffect : public QWidget
                          {
                          public:
                              MyWidgetWithEffect(QWidget * parent)
                                  : QWidget(parent)
                              {
                                  setAttribute(Qt::WA_TranslucentBackground);
                                  setGraphicsEffect(new MyRoundedCornerEffects(this));
                              }
                          };
                          

                          Read and abide by the Qt Code of Conduct

                          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