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. Changing QtabWidget tabbar color in paint event
QtWS25 Last Chance

Changing QtabWidget tabbar color in paint event

Scheduled Pinned Locked Moved Unsolved General and Desktop
qtabbarcolorspalettepainteventqtabwidget
11 Posts 5 Posters 1.4k Views
  • 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.
  • N Narutoblaze
    6 Jul 2023, 17:04

    I am trying to change the color of QTabBar via paintEvent according to documention and other solution on stackoverflow this works but in my case it is not working any help is greatly appreciated.

    my code :

    void myTab::paintEvent(QPaintEvent *event)
    {
        QStylePainter painter(this);
        QStyleOptionTab opt;
    
        for (int i = 0; i < count(); i++) {
            initStyleOption(&opt, i);
    
            opt.palette.setColor(QPalette::Window, Qt::red);
            opt.palette.setColor(QPalette::Button, Qt::red);
            painter.drawControl(QStyle::CE_TabBarTabShape, opt);
            painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        }
    }
    
    J Offline
    J Offline
    JonB
    wrote on 6 Jul 2023, 17:22 last edited by
    #2

    @Narutoblaze
    What does "not working" mean? E.g. what do you see/not see?
    What stackoverflow post? How does your situation differ from it?
    You don't have some stylesheet which already sets the color of the QTabBar do you?

    N 1 Reply Last reply 7 Jul 2023, 12:23
    1
    • C Offline
      C Offline
      CPPUIX
      wrote on 6 Jul 2023, 20:19 last edited by
      #3

      Hi,

      Put a qDebug in your paintEvent, to see if it even gets called.

      If it doesn't and the changes you applied are not visible (no red background), it's possible you did not set your custom Tab bar to your tab widget using QTabWidget::setTabBar.

      For reference: dynamically style an individual tab in QTabWidget.

      N 1 Reply Last reply 6 Jul 2023, 23:06
      0
      • N Offline
        N Offline
        Narutoblaze
        wrote on 6 Jul 2023, 20:59 last edited by Narutoblaze 7 Jun 2023, 20:59
        #4

        @JonB The reference @Abderrahmene_Rayene given is actually the same thing i am trying to do and my code almost 99% same as that and yes i have set the tabbar but the tabbar is same as default it is not red My qt version 6.5.0

        1 Reply Last reply
        0
        • C CPPUIX
          6 Jul 2023, 20:19

          Hi,

          Put a qDebug in your paintEvent, to see if it even gets called.

          If it doesn't and the changes you applied are not visible (no red background), it's possible you did not set your custom Tab bar to your tab widget using QTabWidget::setTabBar.

          For reference: dynamically style an individual tab in QTabWidget.

          N Offline
          N Offline
          Narutoblaze
          wrote on 6 Jul 2023, 23:06 last edited by
          #5

          @Abderrahmene_Rayene yes it does get called

          1 Reply Last reply
          0
          • J JonB
            6 Jul 2023, 17:22

            @Narutoblaze
            What does "not working" mean? E.g. what do you see/not see?
            What stackoverflow post? How does your situation differ from it?
            You don't have some stylesheet which already sets the color of the QTabBar do you?

            N Offline
            N Offline
            Narutoblaze
            wrote on 7 Jul 2023, 12:23 last edited by
            #6

            @JonB no i have not set any stylesheet.

            J 1 Reply Last reply 7 Jul 2023, 16:01
            0
            • C Offline
              C Offline
              CPPUIX
              wrote on 7 Jul 2023, 14:07 last edited by
              #7

              The only code you're sharing is the painEvent, and it has no problems, it works if used correctly.

              Share the code of both of your QTabBar and QTabWidget, how you're using both of them, and how and when are you setting the custom QTabBar.

              A minimal reproducible example would answer all of these question.

              Here's one:

              #include <QApplication>
              #include <QTabBar>
              #include <QTabWidget>
              #include <QStylePainter>
              #include <QStyleOptionTab>
              
              class myTab : public QTabBar
              {
              public:
                  myTab (QWidget *parent = nullptr)
                  {
                      //I'm using this to check later if this is the tab bar being used
                      setObjectName("myTabBar");
                  }
              
                  void paintEvent(QPaintEvent *event)
                  {
                      QStylePainter painter(this);
                      QStyleOptionTab opt;
              
                      for (int i = 0; i < count(); i++)
                      {
                          initStyleOption(&opt, i);
              
                          opt.palette.setColor(QPalette::Window, Qt::red);
                          opt.palette.setColor(QPalette::Button, Qt::red);
                          painter.drawControl(QStyle::CE_TabBarTabShape, opt);
                          painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
                      }
                      qDebug()<<"window color role color:"<<opt.palette.color(QPalette::Window);
                      qDebug()<<"button color role color:"<<opt.palette.color(QPalette::Button);
                  }
              };
              
              class myTabWidget : public QTabWidget
              {
                  myTab *mt;
              public:
                  myTabWidget (QWidget *parent = nullptr)
                  {
                      mt = new myTab(this);
                      setTabBar(mt);
                  }
              };
              
              int main(int argc,char*argv[])
              {
                  QApplication a(argc, argv);
              
                  myTabWidget *mtw = new myTabWidget();
                  //This is where I check if the right tab bar is being used by verifyinng the object name
                  qDebug()<<mtw->tabBar();
              
                  mtw->tabBar()->addTab("tab1");
                  mtw->tabBar()->addTab("tab2");
                  mtw->tabBar()->addTab("tab3");
              
                  mtw->show();
              
                  return a.exec();
              }
              

              Here's the output:

              QTabBar(0x556a0ace5a20, name="myTabBar")
              window color role color: QColor(ARGB 1, 1, 0, 0)
              button color role color: QColor(ARGB 1, 1, 0, 0)
              window color role color: QColor(ARGB 1, 1, 0, 0)
              

              Here's how it looks:

              redtabbar.png

              If you're not missing any of these details, I would suggest using this example and gradually adding your code to it, until it doesn't work, to identify what's reversing your custom painting.

              Hope this helps!

              N 1 Reply Last reply 8 Jul 2023, 16:12
              1
              • N Narutoblaze
                7 Jul 2023, 12:23

                @JonB no i have not set any stylesheet.

                J Offline
                J Offline
                JoeCFD
                wrote on 7 Jul 2023, 16:01 last edited by
                #8

                @Narutoblaze
                is it simpler to set stylesheet?
                https://stackoverflow.com/questions/43349684/how-to-customize-tab-header-for-qtabbar-with-a-custom-witdh-max-qt-style-sheet

                1 Reply Last reply
                0
                • C CPPUIX
                  7 Jul 2023, 14:07

                  The only code you're sharing is the painEvent, and it has no problems, it works if used correctly.

                  Share the code of both of your QTabBar and QTabWidget, how you're using both of them, and how and when are you setting the custom QTabBar.

                  A minimal reproducible example would answer all of these question.

                  Here's one:

                  #include <QApplication>
                  #include <QTabBar>
                  #include <QTabWidget>
                  #include <QStylePainter>
                  #include <QStyleOptionTab>
                  
                  class myTab : public QTabBar
                  {
                  public:
                      myTab (QWidget *parent = nullptr)
                      {
                          //I'm using this to check later if this is the tab bar being used
                          setObjectName("myTabBar");
                      }
                  
                      void paintEvent(QPaintEvent *event)
                      {
                          QStylePainter painter(this);
                          QStyleOptionTab opt;
                  
                          for (int i = 0; i < count(); i++)
                          {
                              initStyleOption(&opt, i);
                  
                              opt.palette.setColor(QPalette::Window, Qt::red);
                              opt.palette.setColor(QPalette::Button, Qt::red);
                              painter.drawControl(QStyle::CE_TabBarTabShape, opt);
                              painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
                          }
                          qDebug()<<"window color role color:"<<opt.palette.color(QPalette::Window);
                          qDebug()<<"button color role color:"<<opt.palette.color(QPalette::Button);
                      }
                  };
                  
                  class myTabWidget : public QTabWidget
                  {
                      myTab *mt;
                  public:
                      myTabWidget (QWidget *parent = nullptr)
                      {
                          mt = new myTab(this);
                          setTabBar(mt);
                      }
                  };
                  
                  int main(int argc,char*argv[])
                  {
                      QApplication a(argc, argv);
                  
                      myTabWidget *mtw = new myTabWidget();
                      //This is where I check if the right tab bar is being used by verifyinng the object name
                      qDebug()<<mtw->tabBar();
                  
                      mtw->tabBar()->addTab("tab1");
                      mtw->tabBar()->addTab("tab2");
                      mtw->tabBar()->addTab("tab3");
                  
                      mtw->show();
                  
                      return a.exec();
                  }
                  

                  Here's the output:

                  QTabBar(0x556a0ace5a20, name="myTabBar")
                  window color role color: QColor(ARGB 1, 1, 0, 0)
                  button color role color: QColor(ARGB 1, 1, 0, 0)
                  window color role color: QColor(ARGB 1, 1, 0, 0)
                  

                  Here's how it looks:

                  redtabbar.png

                  If you're not missing any of these details, I would suggest using this example and gradually adding your code to it, until it doesn't work, to identify what's reversing your custom painting.

                  Hope this helps!

                  N Offline
                  N Offline
                  Narutoblaze
                  wrote on 8 Jul 2023, 16:12 last edited by
                  #9

                  @Abderrahmene_Rayene I have ran your code as it is but did not work there was no change from default QtabWidget but after adding a.setStyle("fusion") it worked as you have shown but i don't want to change other parts like the background became black and foreground white also why did it required a.setStyle("fusion") ??

                  My spec :
                  Windows 10
                  Qt 6.5.0

                  Running your code it shows color was applied but no changes happened :

                  window color role color: QColor(ARGB 1, 0.117647, 0.117647, 0.117647)
                  button color role color: QColor(ARGB 1, 1, 0, 0)
                  

                  Worked after Adding setStyle :

                  int main(int argc, char *argv[])
                  {
                      QApplication a(argc,argv);
                    
                      // Added this line
                      a.setStyle("fusion");
                  }
                  
                  C 1 Reply Last reply 8 Jul 2023, 17:12
                  0
                  • N Narutoblaze
                    8 Jul 2023, 16:12

                    @Abderrahmene_Rayene I have ran your code as it is but did not work there was no change from default QtabWidget but after adding a.setStyle("fusion") it worked as you have shown but i don't want to change other parts like the background became black and foreground white also why did it required a.setStyle("fusion") ??

                    My spec :
                    Windows 10
                    Qt 6.5.0

                    Running your code it shows color was applied but no changes happened :

                    window color role color: QColor(ARGB 1, 0.117647, 0.117647, 0.117647)
                    button color role color: QColor(ARGB 1, 1, 0, 0)
                    

                    Worked after Adding setStyle :

                    int main(int argc, char *argv[])
                    {
                        QApplication a(argc,argv);
                      
                        // Added this line
                        a.setStyle("fusion");
                    }
                    
                    C Offline
                    C Offline
                    CPPUIX
                    wrote on 8 Jul 2023, 17:12 last edited by
                    #10

                    @Narutoblaze That's a good discovery!

                    Unfortunately that goes beyond the scope of my knowledge, and I'm using a Linux.

                    I did however set Windows style on my QApplication and got a slightly different result: bright red for the tabs as they became flat instead of raised in Fusion style.

                    Here's how it looks:

                    windowsonapplication.png

                    I'm not sure I can test and get the same result as you do, you'd need the insight of a Windows user for more accuracy.

                    But I could suggest setting Fusion style (or another style if available and works) to your tab bar only in its ctor like this:

                    myTab (QWidget *parent = nullptr)
                        {
                            setStyle(QStyleFactory::create("Fusion"));
                        }
                    

                    Just to compare, I set Windows style on my tab bar only and here's how it looks:

                    windowsontabbar.png

                    S 1 Reply Last reply 8 Jul 2023, 20:35
                    0
                    • C CPPUIX
                      8 Jul 2023, 17:12

                      @Narutoblaze That's a good discovery!

                      Unfortunately that goes beyond the scope of my knowledge, and I'm using a Linux.

                      I did however set Windows style on my QApplication and got a slightly different result: bright red for the tabs as they became flat instead of raised in Fusion style.

                      Here's how it looks:

                      windowsonapplication.png

                      I'm not sure I can test and get the same result as you do, you'd need the insight of a Windows user for more accuracy.

                      But I could suggest setting Fusion style (or another style if available and works) to your tab bar only in its ctor like this:

                      myTab (QWidget *parent = nullptr)
                          {
                              setStyle(QStyleFactory::create("Fusion"));
                          }
                      

                      Just to compare, I set Windows style on my tab bar only and here's how it looks:

                      windowsontabbar.png

                      S Offline
                      S Offline
                      SGaist
                      Lifetime Qt Champion
                      wrote on 8 Jul 2023, 20:35 last edited by
                      #11

                      Hi,

                      System styles such as those from Windows and macOS ignore certain hints and draw controls as expected for these platforms. Qt follows the platform user interface guidelines closely to ensure that applications looks as expected.

                      Interested in AI ? www.idiap.ch
                      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                      1 Reply Last reply
                      1

                      11/11

                      8 Jul 2023, 20:35

                      • Login

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