[Solved] Different Backgroundcolors for QCombobox items



  • Hi,

    i have here a QCombobox with the itmes Black and Red.
    Now i want to have for the item Black a black background and for Red and so on.

    How can i realize it?
    Is it possible to do it with stylesheets?

    Thanks in advance



  • Hi,

    yes it is. just do:
    @
    my_combo_box->setStyleSheet("background:#000000");
    @

    for a black background (HTML code for red is #ff0000).



  • But how can i adress the different colors

    Black for the first
    Red for the second item?

    I dont want to change the generel backgroundcolor.

    Greetz



  • the style sheet only affect the widget on which you called setStyleSheet() and its children, so call setStyleSheet() on each of your combo boxes with different values for the background.



  • Right, been here and done this ;o)

    The issue is complicated somewhat by the fact that a QComboBox drop down is actually a QAbstractItemView with an associated model which makes styling things rather difficult. The solution I found (which follows) is to set a QItemDelegate on the QComboBox and overload the paint method. Ideally we would just modify the QStyleOptionViewItem's palette and call the default implementation, however as this palette is often ignored in favour of the native OS palette we have to manually draw the background in the colour of our choice:

    @
    #include <QtGui>

    class ComboDelegate : public QItemDelegate {
    public:

    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {
        QStyleOptionViewItem newOption(option);
        if(index.data().toString()=="Black"){
            newOption.palette.setColor(QPalette::Text, Qt::white);
        }
    
        drawBackground(painter, newOption, index);
        QItemDelegate::paint(painter, newOption, index);
    }
    
    void drawBackground(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {
        QString text=index.data().toString();
        if(text=="Red") painter->fillRect(option.rect, Qt::red);
        else if(text=="Black") painter->fillRect(option.rect, Qt::black);
    }
    

    };

    class Widget : public QWidget {
    public:
    Widget(QWidget *parent=0) : QWidget(parent) {
    QVBoxLayout *l=new QVBoxLayout(this);

        QComboBox *c=new QComboBox(this);
        c->addItems(QStringList()<< "Black" << "Red" << "White");
        c->setItemDelegate(new ComboDelegate);
    
        l->addWidget(c);
    }
    

    };

    int main(int argc, char *argv[])
    {
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec&#40;&#41;;
    

    }
    @

    This works nicely on Windows 7 and Mac OSX. If anyone has a tidier method I'd like to see it too!

    Anyway, hope this helps ;o)


  • Moderators

    Why not just do this?

    @
    ui->comboBox->setItemData( 0, QColor( Qt::black ), Qt::BackgroundRole );
    ui->comboBox->setItemData( 1, QColor( Qt::red ), Qt::BackgroundRole );
    @



  • Super, works..Thanks to Krzysztof Kawa
    now the only prob is that the initial stat of that box have no backgroundcolor and after selecting the color is as well gone see pic.

    !https://docs.google.com/file/d/0B_XtrNsGHzjNbWpBakJER0hOUVk/edit?usp=sharing(picture)!


  • Moderators

    While this is probably doable you're starting to mess with the native controls look. It's easy to screw the blooms, highlights or whatever the OS is doing with it.

    A somewhat different and deffinitely easier solution would be to give your items a decorative role like this:
    @
    QImage img(16,16,QImage::Format_RGB32);
    QPainter p(&img);
    p.fillRect(img.rect(), Qt::black);

    QRect rect = img.rect().adjusted(1,1,-1,-1);
    p.fillRect(rect, Qt::red);
    ui->comboBox->setItemData(0, QPixmap::fromImage(img), Qt::DecorationRole);
    p.fillRect(rect, Qt::green);
    ui->comboBox->setItemData(1, QPixmap::fromImage(img), Qt::DecorationRole);
    p.fillRect(rect, Qt::blue);
    ui->comboBox->setItemData(2, QPixmap::fromImage(img), Qt::DecorationRole);
    @

    !http://img442.imageshack.us/img442/7602/colorsib.jpg(color combo example)!

    This solves not only the native look problem, but also color is visible when you hover over items and you don't have to worry about color of the text.



  • I tried this but no change in in the selected backgroundcolor
    @ui->comboBoxColor->currentText()@ returns the coorname which is also the name of the item.

    @QColor color(ui->comboBoxColor->currentText());
    ui->comboBoxColor->setItemData(ui->comboBoxColor->currentIndex(), color,
    Qt::BackgroundRole );@



  • Thanks alot.
    really nice look for the QCombobox.


Log in to reply
 

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