[Solved] Different Backgroundcolors for QCombobox items

[A Former User]

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

[A Former User]

Hi,

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

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

[A Former User]

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

[A Former User]

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.

[jazzycamel]

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

}
@

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)

[Chris Kawa]

Why not just do this?

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

[A Former User]

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

[Chris Kawa]

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.

[A Former User]

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

[A Former User]

Thanks alot.
really nice look for the QCombobox.