[Solved] Different Backgroundcolors for QCombobox items

mr_maddog

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

tilsitt

Hi,

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

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

mr_maddog

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

tilsitt

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&#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)

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

mr_maddog

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.

mr_maddog

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

mr_maddog

Thanks alot.
really nice look for the QCombobox.