The Imagine Style

    The imagine style is based on 9-patch images (opens new window). This allows the images to carry information on how they are stretched and what parts are to be considered as a part of the element and what is outside; e.g. a shadow. For each control, the style supports several elements, and for each element a large number of states are available. By providing assets for certain combinations of these elements and states, you can control the appearance of each control in detail.

    The details of 9-patch images, and how each control can be styled is covered in great detail in the . Here, we will create a custom style for an imaginary device interface to demonstrate how the style is used.

    The application’s style customizes the and Button controls. For the buttons, the normal state, as well as the pressed and checked states are handled. The demonstration application is shown below.

    The code for this uses a Column for the clickable buttons, and a Grid for the checkable ones. The clickable buttons also stretch with the window width.

    In the qtquickcontrols2.conf file shown below, you can see how we set the Style to Imagine, and then setup a Path for the style where it can look for the assets. Finally we set some palette properties as well. The available palette properties can be found on the palette QML Basic TypeThe Imagine Style - 图4 (opens new window) page.

    1. [Controls]
    4. [Imagine]
    5. Path=:images/imagine
    7. Text=#ffffff
    8. ButtonText=#ffffff
    9. BrightText=#ffffff

    The assets for the Button control are button-background.9.png, button-background-pressed.9.png and . These follow the control-element-state pattern. The stateless file, button-background.9.png is used for all states without a specific asset. According to the , a button can have the following states:

    • disabled
    • pressed
    • checked
    • focused
    • highlighted
    • flat
    • mirrored
    • hovered

    The states that are needed depend on your user interface. For instance, the hovered style is never used for touch-based interfaces.

    The Imagine Style - 图6

    Looking at an enlarged version of button-background-checked.9.png above, you can see the 9-patch guide lines along the sides. The purple background has been added for visibility reasons. This area is actually transparent in the asset used in the example.

    • Black lines along the left and top sides of the asset mark the stretchable parts of the image. This means that the rounded corners and the white marker in the example are not affected when the button is stretched.

    • Red lines along the right and bottom sides of the asset mark inset areas. These areas are a part of the image, but not considered a part of the control. For the checked image above, this is used for a soft halo extending outside the button.

    A demonstration of the usage of an inset area is shown in (below) and button-background-checked.9.png (above): the image seems to light up, but not move.