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
Forum Updated to NodeBB v4.3 + New Features

QWidget custom styling

Scheduled Pinned Locked Moved Unsolved General and Desktop
qwidgetstylestylesheet
14 Posts 3 Posters 7.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 Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on last edited by mrjj
    #2

    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 1 Reply Last reply
    0
    • 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