QStyle Class Reference
[QtGui module]

Creating a Custom Style

You can create a custom look and feel for your application by creating a custom style. There are two approaches to creating a custom style. In the static approach, you either choose an existing QStyle class, subclass it, and reimplement virtual functions to provide the custom behavior, or you create an entire QStyle class from scratch. In the dynamic approach, you modify the behavior of your system style at runtime. The static approach is described below. The dynamic approach is described in QProxyStyle.

The first step in the static approach is to pick one of the styles provided by Qt from which you will build your custom style. Your choice of QStyle class will depend on which style resembles your desired style the most. The most general class that you can use as a base is QCommonStyle (not QStyle). This is because Qt requires its styles to be QCommonStyles.

Depending on which parts of the base style you want to change, you must reimplement the functions that are used to draw those parts of the interface. To illustrate this, we will modify the look of the spin box arrows drawn by QWindowsStyle. The arrows are primitive elements that are drawn by the drawPrimitive() function, so we need to reimplement that function. We need the following class declaration:

 class CustomStyle : public QWindowsStyle
 {
     Q_OBJECT

 public:
     CustomStyle()
     ~CustomStyle() {}

     void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                        QPainter *painter, const QWidget *widget) const;
 };

To draw its up and down arrows, QSpinBox uses the PE_IndicatorSpinUp and PE_IndicatorSpinDown primitive elements. Here's how to reimplement the drawPrimitive() function to draw them differently:

 void CustomStyle::drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                                 QPainter *painter, const QWidget *widget) const
 {
     if (element == PE_IndicatorSpinUp || element == PE_IndicatorSpinDown) {
         QPolygon points(3);
         int x = option->rect.x();
         int y = option->rect.y();
         int w = option->rect.width() / 2;
         int h = option->rect.height() / 2;
         x += (option->rect.width() - w) / 2;
         y += (option->rect.height() - h) / 2;

         if (element == PE_IndicatorSpinUp) {
             points[0] = QPoint(x, y + h);
             points[1] = QPoint(x + w, y + h);
             points[2] = QPoint(x + w / 2, y);
         } else { // PE_SpinBoxDown
             points[0] = QPoint(x, y);
             points[1] = QPoint(x + w, y);
             points[2] = QPoint(x + w / 2, y + h);
         }

         if (option->state & State_Enabled) {
             painter->setPen(option->palette.mid().color());
             painter->setBrush(option->palette.buttonText());
         } else {
             painter->setPen(option->palette.buttonText().color());
             painter->setBrush(option->palette.mid());
         }
         painter->drawPolygon(points);
     } else {
         QWindowsStyle::drawPrimitive(element, option, painter, widget);
     }
 }

Notice that we don't use the widget argument, except to pass it on to the QWindowStyle::drawPrimitive() function. As mentioned earlier, the information about what is to be drawn and how it should be drawn is specified by a QStyleOption object, so there is no need to ask the widget.

If you need to use the widget argument to obtain additional information, be careful to ensure that it isn't 0 and that it is of the correct type before using it. For example:

     QSpinBox *spinBox = qobject_cast<QSpinBox *>(widget);
     if (spinBox) {
     ...
     }

When implementing a custom style, you cannot assume that the widget is a QSpinBox just because the enum value is called PE_IndicatorSpinUp or PE_IndicatorSpinDown.

The documentation for the Styles example covers this topic in more detail.

Warning: Qt style sheets are currently not supported for custom QStyle subclasses. We plan to address this in some future release.

 #include <QtGui>

 #include "customstyle.h"

 int main(int argc, char *argv[])
 {
     QApplication::setStyle(new CustomStyle);
     QApplication app(argc, argv);
     QSpinBox spinBox;
     spinBox.show();
     return app.exec();
 }

 ./myapplication -style custom

     switch (element) {
         case (PE_PanelItemViewItem): {
             painter->save();

             QPoint topLeft = option->rect.topLeft();
             QPoint bottomRight = option->rect.topRight();
             QLinearGradient backgroundGradient(topLeft, bottomRight);
             backgroundGradient.setColorAt(0.0, QColor(Qt::yellow).lighter(190));
             backgroundGradient.setColorAt(1.0, Qt::white);
             painter->fillRect(option->rect, QBrush(backgroundGradient));

             painter->restore();
         break;
         }
         default:
             QWindowsStyle::drawPrimitive(element, option, painter, widget);
     }