The Wayback Machine - https://web.archive.org/web/20100724105911/http://labs.trolltech.com:80/blogs/category/labs/styles/
Thomas Hartmann
Qt
Styles
Windows
Posted by Thomas Hartmann
 in Qt, Styles, Windows
 on Friday, October 30, 2009 @ 14:15

I know that is quite silent about the Qt Windows CE port is the past, but be asured Qt for Windows CE has not been forgotten at all.
A lot of Windows CE bugs and issues have been fixed for Qt 4.6.

Some people might have noticed that a short while ago Windows Mobile 6.5 was released. Unfortunately this was a little bit to late to fully support officially Windows Mobile 6.5 in Qt 4.6.
But the good news are that we will have some support for Windows Mobile 6.5 in Qt 4.6 and will fully support it for Qt 4.7.

Qt 4.6 will contain mkspecs for Windows Mobile 6.5 and it also will contain support for the new style. This means that Qt 4.6 applications look native on Windows Mobile 6.5.
It is also worth mentioning that the new animation framework is fully supported on Windows CE, which allows some really nice effects. This means that Qt is really able to leverage the Windows Mobile experience to new heights or in more appropriate words (I am not a marketing guy.): Qt can help you to deliver astonishing applications for Windows Mobile.

Since screenshots tell more than words, here are some:

wm01

The famous Text Edit.

wm03

A styled Tab Widget.

wm02

The new List View highlight.

Digi Flip

Jens
Uncategorized
Qt
Styles
Windows
Posted by Jens
 in Uncategorized, Qt, Styles, Windows
 on Tuesday, September 15, 2009 @ 19:03

We added transparency support in Qt 4.5 through the Qt::WA_TranslucentBackground attribute. Unfortunately, as documented, it will only work on Windows if you explicitly remove window decorations.

With Windows Vista, Microsoft introduced the DWM (Desktop Window Manager) api, where you can enable a blur effect behind your application window. Unfortunately Qt does not have API to cover this yet, but by using the aforementioned translucent attribute in combination with a few native API calls you can already get this effect with Qt 4.5.

blurbehind2.png

To make it simple, I created a convenience API to handle it so you can
plug it into your existing code. Note that the code should compile fine on other
platforms as well:

bool QtWin::isCompositionEnabled()
bool QtWin::enableBlurBehindWindow(QWidget *widget, bool enable)
bool QtWin::extendFrameIntoClientArea(QWidget *widget, int left, int top, int right, int bottom)
QColor QtWin::colorizationColor()

You can make a widget blurry by calling enableBlurBehindWindow or extendFrameIntoClientArea with the preferred margins. In both cases you are simply modifying the background of the widget. The colorizationColor is the color Windows tints the window with.

To show of the effect I made (yet another!) 200-line Qt browser. It has a custom style sheet with semi-transparent widgets. You will also see how you can make segmented arrow buttons using nothing but a pair of style sheets.

You can get the code and executables here.

blurbehind.png

Happy coding! :)

Jens
Uncategorized
Qt
Styles
Styles/QGtkStyle
Posted by Jens
 in Uncategorized, Qt, Styles, Styles/QGtkStyle
 on Friday, July 17, 2009 @ 17:03

Both GNOME and KDE has a nice little control panel that allows you to configure how you want your toolbars to appear. Pure Qt applications show only the icons by default. Unfortunately, I don’t think it is a good idea to suddenly change this behavior, but we can do the next best thing and allow you to opt-in. Starting with 4.6, you can use setToolButtonStyle(Qt::ToolButtonFollowStyle) on your mainwindow, tool bar or tool button to make your application dynamically follow desktop settings.

Here is a Qt app on GNOME with “Text below Items”:

below31.png

And this is how it looks with with “Text beside Items”:
beside3.png

There are a few things you should do before you enable this setting though. First you should allways set QAction::IconText, otherwise your annoyingly long tool tip text will suddenly appear next to your icon. However, as you can barely see in the second screenshot, doing that is not enough to properly support Qt::TextBesideIcon since putting all that text into the toolbar generally takes up a bit too much space.

To solve this problem we added QAction::setPriority(QAction::Priority). In other words, you can now mark actions as more or less important. Quite handy for dynamic layouts determining which items to collapse first. In this case,  actions with low priority will hide their label automatically when changing to this desktop setting.

Jens
Qt
Styles
Posted by Jens
 in Qt, Styles
 on Friday, June 26, 2009 @ 14:08

I did some work this week on a task related to higher DPI values on Vista. The task was essentially about scaling artifacts related to checkboxes, radio buttons and menus. However after fixing up those I decided that we needed a little more to really work properly on Vista and Windows 7 and realized that there were still quite a few hard-coded pixel metrics in the current styling API that really should depend on DPI as well. So after adjusting those metrics, most Qt apps should now look a lot nicer at higher DPI values. The fixes will also directly benefit similar functionality on Mac, once this gets properly supported by Apple.

Here are some screenshots showing noticable improvements in 4.6 vs 4.5 at a moderate scale size of 1.25:

dpi1.png

With the improved DPI-scaled metrics this is what it should look like in 4.6:

dpi2.png

No radical change in this case, but it certainly looks more polished than the old one. At very high DPI scaling values (1.5 and up) Windows Vista defaults to showing applications in a compatibility friendly, but rather fuzzy scaled mode. In 4.6 we plan to make applications scale properly by default. Unfortunately existing applications are likely to have pixel-based assumptions, so the only real way to ensure that your app will look correct is to try it out.

dpi45.png

And again, this is how things should look with 4.6:

dpi46.png

AndyS
Qt
Styles
Posted by AndyS
 in Qt, Styles
 on Friday, June 05, 2009 @ 13:43

It is a fairly regular occurrence in my job in Qt Software Support that I get asked how to change the look and feel of a given widget and usually this means changing the style. If the application is going to only be released for one platform, for instance Windows XP, then this is simple because all you need to do is subclass QWindowsXPStyle and make the necessary change by reimplementing one of the functions.

However, if your application is going to be targeting more than one platform, for instance Windows and Mac, then in order to get the same change you would need to subclass QWindowsXPStyle and QMacStyle, and maybe you want to cover Windows Vista as well, and before you know it you have to maintain 7 different style subclasses just so that you can modify a tiny aspect of the look and feel for a widget!

Luckily help is at hand in the form of a proxy style, this was originally mentioned way back in Qt Quarterly 9 (all those years ago) using a class that subclasses QStyle and had a member variable which would point to the original style being used. For the curious the article can be found here.

On the face of it, this looks like it will do the trick, and it looks nice, however it is not as robust as it appears. The problem with this approach is due to the fact that inside the styles themselves they call the style functions directly. For instance in QWindowsStyle::drawControl() it will call styleHint() directly meaning it won’t call your reimplemented styleHint() function in the ProxyStyle class and its turns out to not be so useful at all anymore.

So the problem still remains, how do we make this smarter? The proxy style approach is still the one we want to go with as this will give the result we want, however its the implementation of it that we need to change to cope with the situation better. Therefore we need to somehow have subclasses of the existing styles that use the proxy style approach.

Firstly we create a ProxyStyle class that isn’t a subclass of QStyle (all will make sense later I promise :) In this example I want to change all styles to always underline shortcuts so to do this I need to reimplement styleHint() in the styles.

class ProxyStyle
{
public:
    ProxyStyle(const QString &baseStyle) { style = QStyleFactory::create(baseStyle); }
    int proxyStyleHint(QStyle::StyleHint hint, const QStyleOption *option = 0,
                             const QWidget *widget = 0, QStyleHintReturn *returnData = 0) const
    {
        if (hint == QStyle::SH_UnderlineShortcut)
            return 1;
        return style->styleHint(hint, option, widget, returnData);
    }
private:
    QStyle *style;
};

This is similar to the approach that is given in Qt Quarterly 9 except the difference is that we don’t have a styleHint() function but we have a proxyStyleHint() function, this is delibrate due to the following:

#define ADDSTYLESUBCLASS(BaseStyleClass, BaseStyleName) 
class My##BaseStyleClass : public BaseStyleClass, public ProxyStyle 
{
public:
    My##BaseStyleClass() : BaseStyleClass(), ProxyStyle(BaseStyleName) {}
    int styleHint(StyleHint hint, const QStyleOption *option = 0, const QWidget *widget = 0, QStyleHintReturn *returnData = 0) const
    {
        return proxyStyleHint(hint, option, widget, returnData);
    }
};

This is where we are actually subclassing the styles themselves, it has been added as a macro because we want to make it easier to just add styles that a subclass should be provided for. So if for example a Windows 7 style was added in 4.6, it would be easy to update this relevant code. We only need to reimplement the functions that we are interested in, so in this case we add a styleHint() reimplementation that calls our proxyStyleHint() function.

So to make all styles available we just use the macro to define the classes like such (delibrately cut just for illustration purposes):

ADDSTYLESUBCLASS(QCleanlooksStyle, "cleanlooks");
ADDSTYLESUBCLASS(QPlastiqueStyle, "plastique");
ADDSTYLESUBCLASS(QMotifStyle, "motif");
ADDSTYLESUBCLASS(QWindowsStyle, "windows");
ADDSTYLESUBCLASS(QCDEStyle, "cde");

Now its possible to use MyQWindowsStyle and this will always call our proxyStyleHint() implementation even if its called from QWindowsStyle itself or directly on the style.

There is just one thing left to do to make this easy to replace any existing style either on a widget or on the application. In order to be able to determine which subclassed style should be used a function is added that utilizes qobject_cast to determine which one should be used (again cut for illustration purposes).

QStyle *returnSubclassStyleForBaseStyle(QStyle *baseStyle)
{
    if (qobject_cast<QWindowsStyle *>(baseStyle)) {
        if (qobject_cast<QCleanlooksStyle *>(baseStyle)) {
#ifdef Q_OS_X11
            if (qobject_cast<QGtkStyle *>(baseStyle))
                return new MyQGtkStyle;
#endif
            return new MyQCleanlooksStyle;
        }
    ...
    if (qobject_cast<QMotifStyle *>(baseStyle)) {
        if (qobject_cast<QCDEStyle *>(baseStyle))
            return new MyQCDEStyle;
        return new MyQMotifStyle;
    }
    return baseStyle;
}

Leaving just one line needed to set the proxy style on the application in our example:

app.setStyle(returnSubclassStyleForBaseStyle(app.style()));

And there you have it, the application still looks native with the exception of the change that has been done in the style. The way that this is implemented makes it easy to add your own changes in, as you only need to change it in one place and also makes it easy to add support for new styles too.

Unfortunately there is a problem with this approach and that is that it does not work with styles that are implemented as plugins, the approach used here needs to be able to know about the classes themselves. So for example, this will not work exactly as expected when the KDE Oxygen style is used as the code does not know about this style. However, this problem would occur too if an application developer wanted to subclass the Oxygen style to make the change directly (without using the proxy style approach). If the Oxygen style can be linked against in some way then it would be possible to utilize this approach, since all that is needed is to be done is to add an ADDSTYLESUBCLASS line and add a couple of lines to the returnSubclassStyleForBaseStyle() function.

The whole code for the proxy style approach is available here.

Jens
Uncategorized
Qt
Styles
Posted by Jens
 in Uncategorized, Qt, Styles
 on Tuesday, March 31, 2009 @ 13:31

There are a few widgets in Qt that have been treated a bit like a stepchild to other widgets. One of these widgets is the QDial. To a certain extent this has been intentional. A normal flat slider is almost always a better choice usability wise and most platforms do not have a native equivalent so it has been left looking a bit out of place everywhere. In fact the only face lift it has received since Qt 3 days is a bit of anti-aliasing. In case you haven’t seen it, here it is in all it’s glory:

old dial

However lately there has been an increased interest in touch screen devices where QDial seems to make a bit more sense usability wise. Combined with the fact that it has always been an eye-sore in our styles example I decided to finally do something about it for 4.6. So here is the new and improved QDial:

new dial 2

As you see it’s a bit more shiny. It replaces the ugly focus rect with a subtle glow and it’s designed to look more like something more out of this century. Old styles like motif and windows classic will still get the old looks because that’s what they are… old, but on all our modern styles we will use the new one. I hope you like the change.

styles example
Edit: Added a new screenshot in a few different styles also showing the increased contrast.

Jens
Qt
Styles
QGtkStyle
Posted by Jens
 in Qt, Styles, QGtkStyle
 on Wednesday, October 01, 2008 @ 08:24

One of the few remaining complaints against Qt applications using QGtkStyle on GNOME have been about the file dialog. So far it certainly looked like a GTK+ dialog, but it was not exactly the same dialog that other applications had been using. While I’m not really in a position to comment on which dialog is the better one, this is what it currently looks like with QGtkStyle:

Gtk dialog with Qt

However, the policy on other platforms such as Windows and Mac OS X has been to use the native dialogs if possible. I recently applied some patches to support this for GTK+ as well. This is what you will see if you open forms in Designer now:

Gtk dialog with Qt

Note that since the KDE file dialog provides somewhat different functionality from the Qt one, KDE applications will still use the KDE file dialog. Feel free to try it out directly from the svn on my labs page and report whatever issues you might find here.

Jens
Uncategorized
Qt
Styles
QGtkStyle
Posted by Jens
 in Uncategorized, Qt, Styles, QGtkStyle
 on Friday, September 05, 2008 @ 14:14

QGtkStyle made it’s way into the Qt snapshots this week, meaning it will become part of the Qt 4.5 release. Technical users can already compile and use it on their own desktop, but once Qt 4.5 is out it will simply replace Cleanlooks as the default application style Qt uses on GNOME desktops. While I haven’t blogged about it since the announcement back in May, a lot of fixes and improvements have gone into it since then and I’d like to thank everybody contributing bug reports, suggestions and patches to the project so far. Since the existing plugin based on Qt 4.4 seems rather popular and not everybody feel comfortable using an unstable version of Qt, I will continue to maintain it as a separate project and accept bug reports over at my google code page.

Clearlooks dialogglider theme

In other news, the nice folks over at the Qt4 Maemo garage have been adapting QGtkStyle to work nicely with the Maemo platform as was evidenced by lorn’s post last month. Samuel also blogged about using Freetype for subpixel filtering which should eventually take care of any differences in font rendering between Qt and GTK.

Jens
Uncategorized
Qt
Labs
Styles
Posted by Jens
 in Uncategorized, Qt, Labs, Styles
 on Tuesday, May 13, 2008 @ 20:28

textedit with gtkstyle

Now that 4.4 is out, I finally found the time to kick off some new development and one of my pet projects these days is QGtkStyle. We already have QCleanlooks, icon themes, standard shortcuts and dialog buttons to integrate with GNOME, but to achieve true perfection we need to use the Gtk theme engine directly just like we do on Mac and Windows. QGtkStyle does exactly this, and in addition extends and surpasses QCleanlooks in a lot of other areas as well. All group boxes are now flat style to blend better with GNOME dialogs. Icon theme support has improved, scrollbar buttons are disabled at edges and item view branches now support hover.

spreadsheet example

The style is already available right now as a Qt 4.4 plugin on Labs and given that you can accept the normal disclaimers about using unreleased and experimental code, you can start playing with it immediately.

This is how the Arora browser looks:

clearlooks style

All the above shots were taken using the “Clearlooks” engine. Here are a few alternatives:

Ubuntu Human:
mediaplayer

Mythbuntu:
mediaplayer

And of course the unforgettable Raleigh engine:
mediaplayer

kamlie
Styles
Posted by kamlie
 in Styles
 on Friday, January 11, 2008 @ 14:52

“You look at your stylesheet in awe, amazed at your own artistic power. You have just styled your widget to perfection, and it is so beautiful one could cry. Now, just to finish off with that one-pixel adjustment to the left, and…. what!? Why does it suddenly look different?”

I am sure many of you have been there when stylesheets do unexpected things. This stems from the fact that the styles were not originally meant to support stylesheets and all the adjustment capabilities that come with them. So whenever a stylesheet tries to do something that the underlying style cannot offer, it falls back onto a different style.

For this reason, we are currently aiming at trying to make stylesheets a little more consistent and predictable, and there are several approaches that can be followed. I hereby invite the readers to post some comments about what they think is important with stylesheets.

You are free to write whatever you feel, but here are some guiding questions:

  • What is your typical use of stylesheets? Giving widgets a brand new look, or just changing a color here and there?
  • Is your program used on more than one platform?


© 2008 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners.