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. How to remove decoration tinting of selected items in item views?
QtWS25 Last Chance

How to remove decoration tinting of selected items in item views?

Scheduled Pinned Locked Moved Solved General and Desktop
qssviewsitemsselection
10 Posts 4 Posters 4.0k 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.
  • napajejenunedk0N Offline
    napajejenunedk0N Offline
    napajejenunedk0
    wrote on last edited by
    #1

    Hello, all.

    By default, on Windows 10 for example, the selected items in item views - QListView, QTableView, QTreeView, etc., are tinted using a semitransparent colored overlay (light blue for instance):
    0_1543225970172_400eb185-0f52-434c-aedb-a4bf5e323051-image.png
    It is configurable using the following QSS *::item:selected { ... } but the problem is that whatever the QSS for this state the tinting of the decoration is left intact (see the white part of the image used for the decoration of the item):
    0_1543226358723_ea5c9baa-feda-47b1-ba7d-1d4e0192830e-image.png

    Is there an integrated way - some QSS statement, to remove or disable the decoration tinting? Presumably, the hard way is to tune some item delegates' painting?

    raven-worxR 1 Reply Last reply
    1
    • VRoninV Offline
      VRoninV Offline
      VRonin
      wrote on last edited by
      #2

      This is actually some magic that happens inside QIcon. can you show us how you are setting the image for the decoration?

      "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
      ~Napoleon Bonaparte

      On a crusade to banish setIndexWidget() from the holy land of Qt

      1 Reply Last reply
      0
      • napajejenunedk0N napajejenunedk0

        Hello, all.

        By default, on Windows 10 for example, the selected items in item views - QListView, QTableView, QTreeView, etc., are tinted using a semitransparent colored overlay (light blue for instance):
        0_1543225970172_400eb185-0f52-434c-aedb-a4bf5e323051-image.png
        It is configurable using the following QSS *::item:selected { ... } but the problem is that whatever the QSS for this state the tinting of the decoration is left intact (see the white part of the image used for the decoration of the item):
        0_1543226358723_ea5c9baa-feda-47b1-ba7d-1d4e0192830e-image.png

        Is there an integrated way - some QSS statement, to remove or disable the decoration tinting? Presumably, the hard way is to tune some item delegates' painting?

        raven-worxR Offline
        raven-worxR Offline
        raven-worx
        Moderators
        wrote on last edited by
        #3

        @napajejenunedk0
        have you tried the show-decoration-selected property?

        QAbstractItemView {
            show-decoration-selected: 0;
        }
        

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

        napajejenunedk0N 1 Reply Last reply
        1
        • raven-worxR raven-worx

          @napajejenunedk0
          have you tried the show-decoration-selected property?

          QAbstractItemView {
              show-decoration-selected: 0;
          }
          
          napajejenunedk0N Offline
          napajejenunedk0N Offline
          napajejenunedk0
          wrote on last edited by napajejenunedk0
          #4

          @raven-worx, setting it results in resizing the selection marquee to fit the contents horizontally:
          0_1543236217927_4557752e-2b10-4efc-8579-099cf3fbce1f-image.png
          Actually, the name of the QSS property looks promising and targeting exactly this - to remove the tinting of the decoration, but its documentation says exactly what it practically does:

          Controls whether selections in a QListView cover the entire row or just the extent of the text.

          If you have other ideas, they are welcome.

          raven-worxR VRoninV 2 Replies Last reply
          0
          • napajejenunedk0N napajejenunedk0

            @raven-worx, setting it results in resizing the selection marquee to fit the contents horizontally:
            0_1543236217927_4557752e-2b10-4efc-8579-099cf3fbce1f-image.png
            Actually, the name of the QSS property looks promising and targeting exactly this - to remove the tinting of the decoration, but its documentation says exactly what it practically does:

            Controls whether selections in a QListView cover the entire row or just the extent of the text.

            If you have other ideas, they are welcome.

            raven-worxR Offline
            raven-worxR Offline
            raven-worx
            Moderators
            wrote on last edited by
            #5

            @napajejenunedk0 said in How to remove decoration tinting of selected items in item views?:

            but its documentation says exactly what it practically does:

            Controls whether selections in a QListView cover the entire row or just the extent of the text.

            that doesn't necessarily means the right side of the row. As the name lets one assume.

            Also the corresponding QStyle::SH_ItemView_ShowDecorationSelected doc says:

            When an item in an item view is selected, also highlight the branch or other decoration.

            Can you try to set your model and delegate to a QTreeView and check the results there?

            --- 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
            • napajejenunedk0N napajejenunedk0

              @raven-worx, setting it results in resizing the selection marquee to fit the contents horizontally:
              0_1543236217927_4557752e-2b10-4efc-8579-099cf3fbce1f-image.png
              Actually, the name of the QSS property looks promising and targeting exactly this - to remove the tinting of the decoration, but its documentation says exactly what it practically does:

              Controls whether selections in a QListView cover the entire row or just the extent of the text.

              If you have other ideas, they are welcome.

              VRoninV Offline
              VRoninV Offline
              VRonin
              wrote on last edited by
              #6

              @napajejenunedk0 said in How to remove decoration tinting of selected items in item views?:

              If you have other ideas, they are welcome.

              Did you consider my question?

              "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
              ~Napoleon Bonaparte

              On a crusade to banish setIndexWidget() from the holy land of Qt

              napajejenunedk0N 1 Reply Last reply
              0
              • VRoninV VRonin

                @napajejenunedk0 said in How to remove decoration tinting of selected items in item views?:

                If you have other ideas, they are welcome.

                Did you consider my question?

                napajejenunedk0N Offline
                napajejenunedk0N Offline
                napajejenunedk0
                wrote on last edited by
                #7

                @VRonin, sorry, I thought I provided you with the source code. I haven't found a way to set the decoration through the QSS but only using the standard approach - to pass it from the model. Here is the complete code:

                QListView* const view = new QListView;
                QStandardItemModel* const model = new QStandardItemModel( this );
                model->appendColumn( {
                                         new QStandardItem( QIcon( ":/icon.png" ), "Test 1" ),
                                         new QStandardItem( QIcon( ":/icon.png" ), "Test 2" )
                                     } );
                view->setModel( model );
                qApp->setStyleSheet( "QListView::item { outline: none; }"
                                     "QListView::item:selected { background-color: black; color: white; } "
                                     "QListView::item:hover:!selected { background-color: lightgray; color: white; }" );
                
                1 Reply Last reply
                0
                • VRoninV Offline
                  VRoninV Offline
                  VRonin
                  wrote on last edited by VRonin
                  #8
                  QIcon uniformIcon(const QString& path){
                      const QPixmap basePixmap(path);
                      QIcon result;
                      for (auto state : {QIcon::Off, QIcon::On}){
                          for (auto mode : {QIcon::Normal, QIcon::Disabled, QIcon::Active, QIcon::Selected})
                              result.addPixmap(basePixmap, mode, state);
                      }
                      return result;
                  }
                  

                  now replace

                  new QStandardItem( QIcon( ":/icon.png" ), "Test 1" ),
                  new QStandardItem( QIcon( ":/icon.png" ), "Test 2" )
                  

                  with

                  new QStandardItem( uniformIcon(QStringLiteral(":/icon.png")), "Test 1" ),
                  new QStandardItem( uniformIcon(QStringLiteral(":/icon.png")), "Test 2" )
                  

                  "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
                  ~Napoleon Bonaparte

                  On a crusade to banish setIndexWidget() from the holy land of Qt

                  napajejenunedk0N 1 Reply Last reply
                  5
                  • VRoninV VRonin
                    QIcon uniformIcon(const QString& path){
                        const QPixmap basePixmap(path);
                        QIcon result;
                        for (auto state : {QIcon::Off, QIcon::On}){
                            for (auto mode : {QIcon::Normal, QIcon::Disabled, QIcon::Active, QIcon::Selected})
                                result.addPixmap(basePixmap, mode, state);
                        }
                        return result;
                    }
                    

                    now replace

                    new QStandardItem( QIcon( ":/icon.png" ), "Test 1" ),
                    new QStandardItem( QIcon( ":/icon.png" ), "Test 2" )
                    

                    with

                    new QStandardItem( uniformIcon(QStringLiteral(":/icon.png")), "Test 1" ),
                    new QStandardItem( uniformIcon(QStringLiteral(":/icon.png")), "Test 2" )
                    
                    napajejenunedk0N Offline
                    napajejenunedk0N Offline
                    napajejenunedk0
                    wrote on last edited by
                    #9

                    @VRonin Nice. I was looking for something more integrated, so that to provide clear graphics of the icon all of the time, but obviously the clarity should be achieved in a more manual manner. Thanks. Actually, is there a QSS way to set the decoration?

                    1 Reply Last reply
                    0
                    • O Offline
                      O Offline
                      OSxy
                      wrote on last edited by
                      #10
                      QListView {outline: none;}
                      
                      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