Enhance the appearance of QTreeView items using a customized display delegate and CSS

In my QTreeView, I have a custom delegate set up for one of the columns to display a colored progress bar. The appearance of the progress bar depends on the content and I used the color information from option.palette to mimic the default delegate behavior.

class ProgressBarDelegate : public QStyledItemDelegate
{
public:
    ProgressBarDelegate(QObject *parent = 0) {}
    ~ProgressBarDelegate() {}
    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
    {
        // QStyledItemDelegate::paint(painter, option, index); // default implementation

        painter->save();

        // progressbar construction and drawing

        painter->restore();
    }
};

Now, I want to highlight a row when hovering over it with the mouse. I added custom CSS to the tree view:

ui->treeView->setStyleSheet("QTreeView::item:hover{background-color:#D0E0F0;}");

The hover highlighting works fine, but unfortunately, my custom delegate does not take into account the CSS settings:

https://i.stack.imgur.com/1BzkN.png

(The dark blue line represents the selected item, while the light blue line is the CSS hover-highlighted row)

If I enable the default implementation, the CSS setting affects my delegate, but it messes up the visual presentation:

https://i.stack.imgur.com/TNR9f.png

The main question is:

  • Is there a way to access the overridden CSS settings data within the delegate? It seems like option.palette doesn't provide this information.

I tried to read the QTreeView property as suggested here:

qDebug() << treeView()->property("background");

but the console output shows QVariant(Invalid)

I also attempted to look at the Qt source code for the drawControl() and drawPrimitive() methods used in the default delegate implementation, but I couldn't find any references to the CSS overrides, only widget palette connections.

Answer №1

Upon reviewing the source code, it became apparent that accessing CSS data from within the delegate by default is not possible as the CSS parsing and calculations are managed by a private QStyleSheetStyle object that applications do not have direct access to. This object simply adjusts the option.palette fields for use in drawing routines.

Nevertheless, there is a method to compel the delegate to render certain elements with desired settings without having to manually parse the option.palette fields by utilizing the style's drawPrimitive() method:

// rendering background with preferred colors:
option.widget->style()->drawPrimitive(QStyle::PE_PanelItemViewItem, &opt, painter);

This approach will display the background with the appropriate settings:

https://i.stack.imgur.com/ggXSs.png

I suspect that there might be a similar technique to apply the CSS-modified setting, something along the lines of:

option.widget->style()->proxy()->drawPrimitive(QStyle::PE_PanelItemViewItem, &opt, painter);

However, my lack of comprehension regarding Qt's style framework has hindered my ability to locate it so far.

Answer №2

When implementing the component's visual representation within the paint method, you have the opportunity to incorporate a "hover" effect.

An example of how this can be achieved is shown below:

// check for hover state
QStyleOptionViewItemV4 styleOption(option);
bool mouseOver = (styleOption.state & QStyle::State_MouseOver);
// apply hover effect     
if(mouseOver) {
...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each bu ...

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

Card columns with dropdown extending into adjacent column

Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards. The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. Thi ...

Struggling to eliminate the padding beneath the menu items in Bootstrap?

I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

In IE8, CSS classes assigned to HTML5 elements are removed when they are printed

Currently, I am facing a challenge where I need to ensure proper printing functionality in IE8. The issue arises when using HTML5 features (such as sections) along with CSS on a page - the problem occurs specifically during printing. For example, when tryi ...

Customizing Text Placement in HTML Lists with CSS List-Style-Image

Is there a way to adjust the vertical positioning of the "Blahs" in the list so that they appear closer to the center of each list bullet in the image displayed on my HTML code below? Here is the snippet of code: <html> <style> li { margin-to ...

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

Boxes maintain their height consistency even after a page refresh

I Implemented This Script to Ensure Same Height for Boxes <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> $(document).ready(function(){ var highestBox = 0; $('.box').each(function(){ ...

What is the process of making circle or square shapes with text inside using React, without the use of SVG images?

Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: I attempted the code below but it did not render any shapes: import React from 'react'; export default fu ...

Is it possible to create custom balloon tooltips for the system tray icon in Qt?

Within the .NET framework, there exist several third-party controls that offer alternative options for customizing system tray icon "balloon tips". These controls enable users to modify colors and add unique styling to the balloons. It piqued my curiosity ...

CSS: Centralizing a Div Element with Fluid Width

I've created a popup that appears in the center of the screen using: transform: translate(-50%, -50%); and position: absolute. However, I'm facing an issue where the width of the popup remains fixed instead of adjusting dynamically based on the c ...

Centered title in side menu for Ionic 3

I recently utilized the Ionic CLI to create an Ionic project. The version I am working with is Ionic 3. Currently, I am facing a challenge in centering the title image. Any assistance on this matter would be greatly appreciated. <ion-menu [content]=" ...

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

Overflow error in Rsuite table row cannot be displayed

Please see the image above Take a look at my picture. I am facing a similar issue. I am struggling to display my error tooltip over my table row. Has anyone else encountered this problem before? Any suggestions for me? I have attempted to set the overflow ...

"Optimizing the placement of a range slider for pricing options

As a beginner in HTML, CSS and JS, I recently faced the challenge of creating a price slider range on a website. However, I am struggling with repositioning it. After copying the code from this link, I noticed that the slider is positioned at the top of th ...

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

Tips for successfully implementing overflow-x in a timeline layout without causing any format disruptions

I've been working on a dynamic timeline design that adapts to different screen sizes. I applied overflow-x property to prevent horizontal scrolling in the mobile version, making the burger menu's sub-items visible without requiring a click. Howev ...

An issue with the font display

I'm having trouble with a specific font on my webpage and jsfiddle, even though it works fine on w3schools website. Here's an example on jsfiddle HTML <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" ...