Problem with QTreeWidget Stylesheet

[QT-static-prgm]

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?

[QT-static-prgm]

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.

[VRonin]

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

[QT-static-prgm]

@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

[Aviad Rotstein]

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

[QT-static-prgm]

@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

[Aviad Rotstein]

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

[QT-static-prgm]

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

[Aviad Rotstein]

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

[QT-static-prgm]

@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

[J.Hilk]

@QT-static-prgm

mmh have you tried:

setFocusPolicy(Qt::NoFocus);

it may help in your situation.

[Aviad Rotstein]

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

[QT-static-prgm]

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

[QT-static-prgm]

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