Qt Quick Controls 2: Imagine Style

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".

[embed]https://youtu.be/WGmjObx6AkM[/embed]

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:

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:

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

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.