Qt Quick Controls 2: Imagine Style

November 23, 2017 Mitch Curtis

Back in April we wrote about image-based styling for Qt Quick Controls 2. Since then, we have made good progress and nailed down some aspects that were still under consideration. We call the new style “Imagine”.

The style works by scanning a directory of images and applying those images to the controls. For example, when a Button is created, the style will look for button-background.9.png (or button-background.png for non-resizable buttons). As an example of what that image could look like, here’s button-background.9.png from the default assets:

Imagine Style Button background image.

When the user presses the button, the style then looks for button-background-pressed.9.png (or button-background-pressed.png). In the case of the default assets, that would look like this:

Imagine Style pressed Button background image.

The .9.png extension represents 9-Patch images. Using this format, we’re able to encode information about how the control should look when it is resized into the image itself. Combine this with the pre-defined file naming convention and you’ve got a style that can be customized without ever touching QML, giving designers complete control over what they do best, and allowing developers to focus on writing applications, not styles.

To provide a starting point for creating your own style, we’ve created a complete asset template in Sketch:

Default Imagine style Sketch template

Default Imagine style Sketch template (Sketch)

For those who prefer Illustrator or Photoshop, we’ve provided smaller templates, each with their own example that uses the assets:

Qt Quick Controls 2 - Imagine Style Example: Automotive

Qt Quick Controls 2 – Imagine Style Example: Automotive (AI)

Qt Quick Controls 2 - Imagine Style Example: Music Player

Qt Quick Controls 2 – Imagine Style Example: Music Player (PSD)

The Imagine style is available with Qt 5.10. For more information, see the documentation.

The post Qt Quick Controls 2: Imagine Style appeared first on Qt Blog.

Previous
Are you ready for Qt Quick Controls 2.3?
Are you ready for Qt Quick Controls 2.3?

This blog post takes a brief look at some of the new features in Qt Quick Controls 2.3 released as part of ...

Next Article
Qt Creator 4.5 RC released
Qt Creator 4.5 RC released

We are happy to announce the release of Qt Creator 4.5 RC! We think that we are pretty close to what we wan...