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