Problem with QTreeWidget Stylesheet



  • Hello,

    i want to adjust the style of my QTreeWidget. I read the Reference, examples and syntax documentation, but i couldn't figure out the problem.

    The problem is when i select a item:

    1-2: different results
    3: how it should look like

    I have multiple stylesheet codes and maybe it's not the obvious file that causes the problem.

    button.sytl
    https://git.rwth-aachen.de/carstenf/qtTsOverlay/blob/master/ChannelListWidget.cpp#L143

    QPushButton {
    	width:10px;
    	height:10px;
    	background-color:rgba(50,50,50,0);
    	border-style:solid;
    	border-radius:5px;
    	border-width:1px;
    	border-color:rgb(100,100,100);
    	padding:2px;
    	margin:2px;
    }
    
    QPushButton:hover {
    	background-color:rgba(255,255,255,100);
    	border-color:rgb(100,100,100);
    }
    

    tree.styl
    https://git.rwth-aachen.de/carstenf/qtTsOverlay/blob/master/ChannelListWidget.cpp#L16

    QTreeWidget {
    	color:rgb(255,255,255);
    	background-color:rgba(0,0,0,0);
    	selection-background-color:transparent;
    }
    
    QTreeWidget::item:hover,QTreeWidget::item:hover:selected {
    	border:none;
    	border-radius:5px;
    	background-color:rgba(255,255,255,100);
    }
    
    QTreeWidget::item:selected {
    	border:none;
    	background-color:rgba(255,255,255,0);
    }
    

    background.styl
    https://git.rwth-aachen.de/carstenf/qtTsOverlay/blob/master/ChannelListWidget.cpp#L62

    QLabel {
    	padding:2px;
    	border-radius:5px;
    	border-style:solid;
    	border-width:1px;
    	border-color:rgb(100,100,100);
    	background-color:rgba(50,50,50,150);
    }
    

    label.styl
    https://git.rwth-aachen.de/carstenf/qtTsOverlay/blob/master/overlaycontroller.cpp#L36

    padding:2px;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:rgb(100,100,100);
    font:bold;
    font-size:15px;
    background-color:rgba(50,50,50,150);
    color:rgb(255,255,255);
    

    I changed many things for the tree.styl:

    QTreeWidget::item:selected {
    	border:none;
    	background-color:rgba(255,255,255,0);
    }
    

    for this above variant 1 is the result

    QTreeWidget::item:selected {
    	border:none;
    	background-color:rgba(0,0,0,0);
    }
    
    QTreeWidget::item:selected {
    	border:none;
    	background-color:transparent;
    }
    
    QTreeWidget::item:selected {
    	border:none;
    	selection-background-color:transparent;
    }
    
    QTreeWidget::item:selected {
    	border:none;
    	background:none;
    }
    

    for all above variant 2 is the result

    So how do i remove the "highlight" around the selected text? And how do i remove the blue color from the icons of selected items?



  • really?? 26 views and no one know something about the stylesheet??

    Is there maybe somewhere the default stylesheet of all Qt elements?? In that case i could see how the highlight is done and make it not happen.



  • As from http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qtreeview you probably want to style QTreeView::item:selected:active and QTreeView::item:selected:!active

    really?? 26 views and no one know something about the stylesheet??

    a bit aggressive given the solution is clearly set out in the docs



  • @VRonin sry if it felt aggressive to you. Wasn't meant that way.

    So i changed it to this:

    QTreeWidget {
    	color:rgb(255,255,255);
    	background-color:rgba(0,0,0,0);
    	selection-background-color:transparent;
    }
    
    QTreeWidget::item:hover,QTreeWidget::item:hover:selected {
    	border:none;
    	border-radius:5px;
    	background-color:rgba(255,255,255,100);
    }
    
    QTreeWidget::item:selected, QTreeWidget::item:selected:active, QTreeWidget::item:selected:!active {
    	border:none;
    	background-color:rgba(255,255,255,0);
    }
    

    Result: everything like it was before but now the hover effect is not applied to selected items



  • Try :

    QTreeView
    {
       show-decoration-selected: 0;
    }
    ``
    
    

    and maybe set your:

    QTreeView::branch{
        background-color: rgb(some_color);
        selection-background-color: rgb(some_color);
    }
    

    And yes, your reaction sounds very aggressive.

    Good luck,
    hope its help you



  • @Aviad-Rotstein said in Problem with QTreeWidget Stylesheet:

    QTreeView::branch{
    background-color: rgb(some_color);
    selection-background-color: rgb(some_color);
    }

    the last part changed the Color infront of the icon. So i set it to transparent as well. But the decoration does not change anything. So same problem with this updated code:

    QTreeWidget {
    	color:rgb(255,255,255);
    	background-color:rgba(0,0,0,0);
    	selection-background-color:transparent;
    	show-decoration-selected:0;
    }
    
    QTreeView {
    	show-decoration-selected:0;
    }
    
    QTreeWidget::item:hover,QTreeWidget::item:hover:selected:active {
    	border:none;
    	border-radius:5px;
    	background-color:rgba(255,255,255,100);
    }
    
    QTreeWidget::item:selected, QTreeWidget::item:selected:active, QTreeWidget::item:selected:!active {
    	background-color:rgba(255,255,255,0);
    }
    
    QTreeView::branch{
        background-color:transparent;
        selection-background-color:transparent;
    }
    

    where it makes no difference if i use QTreeView::branch or QTreeWidget::branch. Both do the chane (i tested with solid red Color before i changed to transparent)

    Btw changing it to this:
    QTreeWidget::item:selected, QTreeWidget::item:selected:active, QTreeWidget::item:selected:!active {
    background-color:rgb(255,0,0);
    }

    makes the whole item's background red (from the icon to the end of the line. ) while using transparent, only the text has the background that i cannot remove (as you can see on the picture)
    So maybe the item has a label as sub and there is the background set? But how could i access that? Same for the icon that turns into blue



  • OK. You can try style:

    QTreeView::item {
        background-color: none;
    }
    QTreeView::item:selected {
        background-color: none;
    }
    

    And set item delegate, by subleasing QItemDelegate and re-implement the paint function, something like this:

    class MyItemDelegate : public QItemDelegate
    {
     public:
    void paint ( QPainter * painter, const QStyleOptionViewItem & oStyleOption, const QModelIndex & index ) const
    {
            QStyleOptionViewItem oStyleOpt = oStyleOption;
            
            if(oStyleOpt.state & QStyle::State_Selected){
                      oStyleOpt.state ^= QStyle::State_Selected;
                      painter->fillRect(oStyleOpt.rect,  rgb(some_color));
            }
            // Paint
           QItemDelegate::paint(painter, oStyleOpt, index);
    }
    }
    
    ........
    MyItemDelegate oItemDelegate;
    myTree->setItemDelegate(oItemDelegate);
    
    

    Its work for me...
    Good luck



  • @Aviad-Rotstein not sure what you mean with that item delegate?

    Should i make my own class of QTreeWidgetItem and reimplement the paint function the way you made for the delegate??
    (my code can be found under the links above)



  • No. As in the given example code, you just need to make your own QItemDelegate,
    and then set your tree item delegate.
    As said at the documentation: "This is useful if you want complete control over the editing and display of items."



  • @Aviad-Rotstein As you can see the blue hue from the icons is gone :D
    But there is still this stupid surrounding around the text. Again this is ONLY when the focus is on that window.

    I removed the painter->fillRect(oStyleOpt.rect, rgb(some_color)); line becuase it added a solid color (see the 2nd picture) and even an qrgba did not work.

    So any ideas how to remove that text surrounding??

    Maybe something else is easier. Since i never want the window to become the focus (to make the game to continue play music,..) is there maybe a way to interact with the window but do not have focus?

    ah and btw the hover effect does not work anymore. Any ideas how to fix that??

    ==EDIT==

    void paint(QPainter * painter, const QStyleOptionViewItem & oStyleOption, const QModelIndex & index) const
    	{
    		QStyleOptionViewItem oStyleOpt = oStyleOption;
    
    		if (oStyleOpt.state & QStyle::State_Selected) {
    			oStyleOpt.state ^= QStyle::State_Selected;
    		}
    
    		if (oStyleOpt.state & QStyle::State_HasFocus) {
    			oStyleOpt.state ^= QStyle::State_HasFocus;
    		}
    		
    		// Paint
    		QItemDelegate::paint(painter, oStyleOpt, index);
    	}
    

    that removed the surrounding. But the hover is still gone



  • @QT-static-prgm

    mmh have you tried:

    setFocusPolicy(Qt::NoFocus);
    

    it may help in your situation.



  • If you still go with the item delegate solution, you can add color for hovering items, something like:

    if(oStyleOpt.state & QStyle::State_MouseOver){
            painter->fillRect(oStyleOpt.rect, m_oHoverColor);
    }
    

    And set the hover text color by the style sheet.
    (of course, I hope the setFocusPolicy(Qt::NoFocus) solution will do the work...).



  • @J-Hilk @Aviad-Rotstein

    i tested setFocusPolicy(Qt::NoFocus); and it works fine for the surrounding bug. But it does not fix the blue icon. Have you an idea how to get that fixed?? I would prefere this policy method because i want to give users the ability to adjust the style of of my plugin. And using the delegate method works, but would limit that option.



  • I was always searching at the wrong place.

    The blue hue wasn't a problem of the style, it was a problem of the icon. Here is the solution:

    for all icons

    m_clientIcon.normal.addFile("plugins\\qtTsOverlay\\client.png");
    

    add this

    m_clientIcon.normal.addFile("plugins\\qtTsOverlay\\client.png", QSize(), QIcon::Selected);
    


Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.