qtquickcontrols-imagine.qdoc

Go to the documentation of this file.

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
/*!
    \page qtquickcontrols-imagine.html
    \title Imagine Style
 
    The Imagine Style is based on configurable image assets. \l{detailed-desc-imagine}{More...}
 
    \styleimport {QtQuick.Controls.Imagine} {Qt 5.10}
 
    \section1 Attached Properties
 
    \list
        \li \l {imagine-path-attached-prop}{\b path} : string
    \endlist
 
    \section1 Detailed Description
    \target detailed-desc-imagine
 
    The Imagine style is based on image assets. The style comes with a default
    set of images, but the images can be easily changed by providing a directory
    with images using a predefined naming convention.
 
    \image qtquickcontrols-imagine.png
           {Gallery of controls in Imagine style}
    \caption The Imagine style with the default images
 
    To run an application with the Imagine style, see
    \l {Using Styles in Qt Quick Controls}.
 
    \section2 File Names
 
    The image files are named using the following convention:
 
    \c <control>-<element>-<states>
 
    The \c <control> and \c <element> sections are mandatory, but the
    \c <states> section is optional. For example, if a single file named
    \c "button-background.9.png" is provided for \l {Button}, it will be used
    for every state that \c Button supports. It is up to the developer to
    decide the set of states that they will provide images for. However, it
    is recommended to provide images for the most common control states where
    possible, such as \c disabled, \c pressed, etc. This will ensure that
    interactive controls visually behave as the end user would expect them to.
 
    \section2 Element Reference
 
    The following table lists which elements are supported for each control,
    along with the possible states for that element, and the file extension
    that it expects. An element is an image that represents a certain visual
    part of the control. For example, \c {Button}'s \c "background" element
    represents its \l {Control::}{background}.
 
    \table
        \header
            \li Control
            \li Element
            \li States
            \li Extension
        \row
            \li \l ApplicationWindow
            \li background
            \li active
            \li .9.png (or .png)
        \row
            \li \l BusyIndicator
            \li animation
            \li disabled, running, mirrored, hovered
            \li .webp
        \row
            \li
            \li background
            \li same as above
            \li .webp
        \row
            \li \l Button
            \li background
            \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered
            \li .9.png
        \row
            \li \l CheckBox
            \li background
            \li disabled, pressed, checked, partially-checked, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .png
        \row
            \li \l CheckDelegate
            \li background
            \li disabled, pressed, checked, partially-checked, focused, highlighted, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .png
        \row
            \li \l ComboBox
            \li background
            \li disabled, pressed, editable, open, focused, mirrored, hovered, flat
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .png
        \row
            \li
            \li popup
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l DelayButton
            \li background
            \li disabled, pressed, checked, checkable, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li progress
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li mask
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l Dial
            \li background\sup{1}
            \li disabled, pressed, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l Dialog
            \li background
            \li modal, dim
            \li .9.png (or .png)
        \row
            \li
            \li title
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li overlay
            \li modal
            \li .9.png (or .png)
        \row
            \li \l DialogButtonBox
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li \l Drawer
            \li background
            \li modal, dim, top, left, right, bottom
            \li .9.png (or .png)
        \row
            \li
            \li overlay
            \li modal
            \li .9.png (or .png)
        \row
            \li \l Frame
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li \l GroupBox
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li
            \li title
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l ItemDelegate
            \li background
            \li disabled, pressed, focused, highlighted, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l Label
            \li background
            \li disabled, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l Menu
            \li background
            \li modal, dim
            \li .9.png (or .png)
        \row
            \li
            \li overlay
            \li modal
            \li .9.png (or .png)
        \row
            \li \l MenuItem
            \li arrow
            \li disabled, pressed, checked, focused, highlighted, mirrored, hovered
            \li .png
        \row
            \li
            \li background
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .png
        \row
            \li \l MenuSeparator
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li
            \li separator
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l Page
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li \l PageIndicator
            \li background
            \li disabled, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li delegate
            \li disabled, pressed, current, mirrored, hovered
            \li .png
        \row
            \li \l Pane
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li \l Popup
            \li background
            \li modal, dim
            \li .9.png (or .png)
        \row
            \li
            \li overlay
            \li modal
            \li .9.png (or .png)
        \row
            \li \l ProgressBar
            \li animation
            \li disabled, mirrored, hovered
            \li .png
        \row
            \li
            \li background
            \li disabled, indeterminate, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li mask
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li progress
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l RadioButton
            \li background
            \li disabled, pressed, checked, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .png
        \row
            \li \l RadioDelegate
            \li background
            \li disabled, pressed, checked, focused, highlighted, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .png
        \row
            \li \l RangeSlider
            \li background
            \li vertical, horizontal, disabled, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l RangeSlider
            \li progress
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li first, second, vertical, horizontal, disabled, pressed, focused, mirrored, hovered
            \li .png
        \row
            \li \l RoundButton
            \li background
            \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l ScrollBar
            \li background
            \li vertical, horizontal, disabled, interactive, pressed, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l ScrollIndicator
            \li background
            \li vertical, horizontal, disabled, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l ScrollView
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li \l Slider
            \li background
            \li vertical, horizontal, disabled, pressed, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li progress
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l SpinBox
            \li background
            \li disabled, editable, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li editor
            \li disabled, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li up, down, disabled, editable, pressed, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l StackView
            \li background
            \li disabled, mirrored
            \li .9.png (or .png)
        \row
            \li \l SwipeDelegate
            \li background
            \li disabled, pressed, focused, highlighted, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l SwipeView
            \li background
            \li vertical, horizontal, disabled, interactive, focused, mirrored
            \li .9.png (or .png)
        \row
            \li \l Switch
            \li background
            \li disabled, pressed, checked, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l SwitchDelegate
            \li background
            \li disabled, pressed, checked, focused, highlighted, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li
            \li handle
            \li same as above
            \li .9.png (or .png)
        \row
            \li
            \li indicator
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l TabBar
            \li background
            \li disabled, header, footer, mirrored
            \li .9.png (or .png)
        \row
            \li \l TabButton
            \li background
            \li disabled, pressed, checked, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l TextArea
            \li background
            \li disabled, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l TextField
            \li background
            \li disabled, focused, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l ToolBar
            \li background
            \li disabled, header, footer, mirrored
            \li .9.png (or .png)
        \row
            \li \l ToolButton
            \li background
            \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered
            \li .9.png (or .png)
        \row
            \li \l ToolSeparator
            \li background
            \li vertical, horizontal, disabled, mirrored
            \li .9.png (or .png)
        \row
            \li
            \li separator
            \li same as above
            \li .9.png (or .png)
        \row
            \li \l ToolTip
            \li background
            \li
            \li .9.png (or .png)
        \row
            \li \l Tumbler
            \li background
            \li disabled, focused, mirrored, hovered
            \li .9.png (or .png)
    \endtable
 
   \note \sup{1}) The Imagine style Dial does not yet support the
   \l {Dial::}{startAngle} and \l {Dial::}{endAngle} properties that were
   introduced in Qt 6.6, and instead uses a fixed background image.
 
    \section2 Asset Examples
 
    The following table lists examples of assets (taken from the
    \l {https://code.qt.io/cgit/qt/qtdeclarative.git/tree/src/quickcontrols/imagine/images}
    {default Imagine style assets}) for all controls. The list is not
    exhaustive, as not all elements need assets, but it can be used as a guide
    when creating your own assets.
 
    The template that these assets were \l {Exporting 9-Patch Images}
    {exported from} is available as a
    \l {https://code.qt.io/cgit/qt/qtdeclarative.git/plain/src/quickcontrols/imagine/design/imagine.sketch}
    {Sketch project}.
 
    \table
        \header
            \li Control
            \li Element
            \li States
            \li Asset
            \li Notes
        \row
            \li \l ApplicationWindow
            \li background
            \li
            \li \image imagine/images/applicationwindow-background.png
                       {ApplicationWindow background asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li
            \li overlay
            \li
            \li \image imagine/images/applicationwindow-overlay.png
                       {ApplicationWindow overlay asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li
            \li overlay
            \li modal
            \li \image imagine/images/applicationwindow-overlay-modal.png
                       {ApplicationWindow overlay modal asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li \l Button
            \li background
            \li
            \li \image imagine/images/button-background.9.png
                       {Button background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/button-background-disabled.9.png
                       {Button background disabled asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/button-background-focused.9.png
                       {Button background focused asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/button-background-pressed.9.png
                       {Button background pressed asset}
            \li
        \row
            \li
            \li background
            \li checked
            \li \image imagine/images/button-background-checked.9.png
                       {Button background checked asset}
            \li
        \row
            \li
            \li background
            \li checked, disabled
            \li \image imagine/images/button-background-checked-disabled.9.png
                       {Button background checked disabled asset}
            \li
        \row
            \li
            \li background
            \li checked, focused
            \li \image imagine/images/button-background-checked-focused.9.png
                       {Button background checked focused asset}
            \li
        \row
            \li
            \li background
            \li checked, hovered
            \li \image imagine/images/button-background-checked-hovered.9.png
                       {Button background checked hovered asset}
            \li
        \row
            \li
            \li background
            \li highlighted
            \li \image imagine/images/button-background-highlighted.9.png
                       {Button background highlighted asset}
            \li
        \row
            \li
            \li background
            \li highlighted, disabled
            \li \image imagine/images/button-background-highlighted-disabled.9.png
                       {Button background highlighted disabled asset}
            \li
        \row
            \li
            \li background
            \li highlighted, focused
            \li \image imagine/images/button-background-highlighted-focused.9.png
                       {Button background highlighted focused asset}
            \li
        \row
            \li
            \li background
            \li highlighted, hovered
            \li \image imagine/images/button-background-highlighted-hovered.9.png
                       {Button background highlighted hovered asset}
            \li
        \row
            \li
            \li background
            \li highlighted, pressed
            \li \image imagine/images/button-background-highlighted-pressed.9.png
                       {Button background highlighted pressed asset}
            \li
        \row
            \li
            \li background
            \li highlighted, checked
            \li \image imagine/images/button-background-highlighted-checked.9.png
                       {Button background highlighted checked asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/button-background-hovered.9.png
                       {Button background hovered asset}
            \li
        \row
            \li
            \li background
            \li flat
            \li \image imagine/images/button-background-flat.9.png
                       {Button background flat asset}
            \li
        \row
            \li
            \li background
            \li flat, disabled
            \li \image imagine/images/button-background-flat-disabled.9.png
                       {Button background flat disabled asset}
            \li
        \row
            \li
            \li background
            \li flat, hovered
            \li \image imagine/images/button-background-flat-hovered.9.png
                       {Button background flat hovered asset}
            \li
        \row
            \li
            \li background
            \li flat, pressed
            \li \image imagine/images/button-background-flat-pressed.9.png
                       {Button background flat pressed asset}
            \li
        \row
            \li
            \li background
            \li flat, checked
            \li \image imagine/images/button-background-flat-checked.9.png
                       {Button background flat checked asset}
            \li
        \row
            \li \l CheckBox
            \li indicator
            \li
            \li \image imagine/images/checkbox-indicator.png
                       {CheckBox indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/checkbox-indicator-disabled.png
                       {CheckBox indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/checkbox-indicator-pressed.png
                       {CheckBox indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/checkbox-indicator-checked.png
                       {CheckBox indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/checkbox-indicator-checked-pressed.png
                       {CheckBox indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/checkbox-indicator-checked-hovered.png
                       {CheckBox indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/checkbox-indicator-checked-focused.png
                       {CheckBox indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked
            \li \image imagine/images/checkbox-indicator-partially-checked.png
                       {CheckBox indicator partially checked asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked, pressed
            \li \image imagine/images/checkbox-indicator-partially-checked-pressed.png
                       {CheckBox indicator partially checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked, focused
            \li \image imagine/images/checkbox-indicator-partially-checked-focused.png
                       {CheckBox indicator partially checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked, hovered
            \li \image imagine/images/checkbox-indicator-partially-checked-hovered.png
                       {CheckBox indicator partially checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/checkbox-indicator-focused.png
                       {CheckBox indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/checkbox-indicator-hovered.png
                       {CheckBox indicator hovered asset}
            \li
        \row
            \li \l CheckDelegate
            \li background
            \li
            \li \image imagine/images/checkdelegate-background.9.png
                       {CheckDelegate background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/checkdelegate-background-disabled.9.png
                       {CheckDelegate background disabled asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/checkdelegate-background-pressed.9.png
                       {CheckDelegate background pressed asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/checkdelegate-background-focused.9.png
                       {CheckDelegate background focused asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/checkdelegate-background-hovered.9.png
                       {CheckDelegate background hovered asset}
            \li
        \row
            \li
            \li indicator
            \li
            \li \image imagine/images/checkdelegate-indicator.png
                       {CheckDelegate indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/checkdelegate-indicator-disabled.png
                       {CheckDelegate indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/checkdelegate-indicator-pressed.png
                       {CheckDelegate indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/checkdelegate-indicator-checked.png
                       {CheckDelegate indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/checkdelegate-indicator-checked-pressed.png
                       {CheckDelegate indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/checkdelegate-indicator-checked-focused.png
                       {CheckDelegate indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/checkdelegate-indicator-checked-hovered.png
                       {CheckDelegate indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/checkdelegate-indicator-focused.png
                       {CheckDelegate indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/checkdelegate-indicator-hovered.png
                       {CheckDelegate indicator hovered asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked
            \li \image imagine/images/checkdelegate-indicator-partially-checked.png
                       {CheckDelegate indicator partial checked asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked, pressed
            \li \image imagine/images/checkdelegate-indicator-partially-checked-pressed.png
                       {CheckDelegate indicator partial checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked, focused
            \li \image imagine/images/checkdelegate-indicator-partially-checked-focused.png
                       {CheckDelegate indicator partial checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li partially, checked, hovered
            \li \image imagine/images/checkdelegate-indicator-partially-checked-hovered.png
                       {CheckDelegate indicator partial checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/checkdelegate-indicator-hovered.png
                       {CheckDelegate indicator hovered asset}
            \li
        \row
            \li \l ComboBox
            \li background
            \li
            \li \image imagine/images/combobox-background.9.png
                       {ComboBox background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/combobox-background-disabled.9.png
                       {ComboBox background disabled asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/combobox-background-focused.9.png
                       {ComboBox background focused asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/combobox-background-hovered.9.png
                       {ComboBox background hovered asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/combobox-background-pressed.9.png
                       {ComboBox background pressed asset}
            \li
        \row
            \li
            \li background
            \li open
            \li \image imagine/images/combobox-background-open.9.png
                       {ComboBox background open asset}
            \li
        \row
            \li
            \li background
            \li editable
            \li \image imagine/images/combobox-background-editable.9.png
                       {ComboBox background editable asset}
            \li
        \row
            \li
            \li background
            \li editable, focused
            \li \image imagine/images/combobox-background-editable-focused.9.png
                       {ComboBox background editable focused asset}
            \li
        \row
            \li
            \li background
            \li editable, disabled
            \li \image imagine/images/combobox-background-editable-disabled.9.png
                       {ComboBox background editable disabled asset}
            \li
        \row
            \li
            \li indicator
            \li
            \li \image imagine/images/combobox-indicator.png
                       {ComboBox indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/combobox-indicator-disabled.png
                       {ComboBox indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li editable
            \li \image imagine/images/combobox-indicator-editable.png
                       {ComboBox indicator editable asset}
            \li
        \row
            \li
            \li indicator
            \li editable, disabled
            \li \image imagine/images/combobox-indicator-editable-disabled.png
                       {ComboBox indicator editable disabled asset}
            \li
        \row
            \li
            \li indicator
            \li editable, mirrored
            \li \image imagine/images/combobox-indicator-editable-mirrored.png
                       {ComboBox indicator editable mirrored asset}
            \li
        \row
            \li
            \li indicator
            \li editable, mirrored, disabled
            \li \image imagine/images/combobox-indicator-editable-mirrored-disabled.png
                       {ComboBox indicator editable mirrored disabled asset}
            \li
        \row
            \li
            \li popup
            \li
            \li \image imagine/images/combobox-popup.9.png
                       {ComboBox popup asset}
            \li
        \row
            \li \l DelayButton
            \li background
            \li
            \li \image imagine/images/delaybutton-background.9.png
                       {DelayButton background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/delaybutton-background-disabled.9.png
                       {DelayButton background disabled asset}
            \li
        \row
            \li
            \li background
            \li disabled, checked
            \li \image imagine/images/delaybutton-background-disabled-checked.9.png
                       {DelayButton background disabled checked asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/delaybutton-background-focused.9.png
                       {DelayButton background focused asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/delaybutton-background-pressed.9.png
                       {DelayButton background pressed asset}
            \li
        \row
            \li
            \li background
            \li checked
            \li \image imagine/images/delaybutton-background-checked.9.png
                       {DelayButton background checked asset}
            \li
        \row
            \li
            \li background
            \li checked, focused
            \li \image imagine/images/delaybutton-background-checked-focused.9.png
                       {DelayButton background checked focused asset}
            \li
        \row
            \li
            \li background
            \li checked, hovered
            \li \image imagine/images/delaybutton-background-checked-hovered.9.png
                       {DelayButton background checked hovered asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/delaybutton-background-hovered.9.png
                       {DelayButton background hovered asset}
            \li
        \row
            \li
            \li progress
            \li
            \li \image imagine/images/delaybutton-progress.9.png
                       {DelayButton progress asset}
            \li
        \row
            \li
            \li progress
            \li disabled
            \li \image imagine/images/delaybutton-progress-disabled.9.png
                       {DelayButton progress disabled asset}
            \li
        \row
            \li
            \li mask
            \li
            \li \image imagine/images/delaybutton-mask.9.png
                       {DelayButton mask asset}
            \li
        \row
            \li \l Dial
            \li background
            \li
            \li \image imagine/images/dial-background.png
                       {Dial background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/dial-background-disabled.png
                       {Dial background disabled asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/dial-background-focused.png
                       {Dial background focused asset}
            \li
        \row
            \li
            \li handle
            \li
            \li \image imagine/images/dial-handle.png
                       {Dial handle asset}
            \li
        \row
            \li
            \li handle
            \li disabled
            \li \image imagine/images/dial-handle-disabled.png
                       {Dial handle disabled asset}
            \li
        \row
            \li
            \li handle
            \li focused
            \li \image imagine/images/dial-handle-focused.png
                       {Dial handle focused asset}
            \li
        \row
            \li
            \li handle
            \li focused, pressed
            \li \image imagine/images/dial-handle-focused-pressed.png
                       {Dial handle focused pressed asset}
            \li
        \row
            \li
            \li handle
            \li focused, hovered
            \li \image imagine/images/dial-handle-focused-hovered.png
                       {Dial handle focused hovered asset}
            \li
        \row
            \li
            \li handle
            \li pressed
            \li \image imagine/images/dial-handle-pressed.png
                       {Dial handle pressed asset}
            \li
        \row
            \li
            \li handle
            \li hovered
            \li \image imagine/images/dial-handle-hovered.png
                       {Dial handle hovered asset}
            \li
        \row
            \li \l Dialog
            \li background
            \li
            \li \image imagine/images/dialog-background.9.png
                       {Dialog background asset}
            \li
        \row
            \li
            \li overlay
            \li
            \li \image imagine/images/dialog-overlay.png
                       {Dialog overlay asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li
            \li overlay
            \li modal
            \li \image imagine/images/dialog-overlay-modal.png
                       {Dialog overlay modal asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li \l DialogButtonBox
            \li background
            \li
            \li \image imagine/images/dialogbuttonbox-background.9.png
                       {DialogButtonBox background asset}
            \li
        \row
            \li \l Drawer
            \li background
            \li left
            \li \image imagine/images/drawer-background-left.9.png
                       {Drawer background left asset}
            \li
        \row
            \li
            \li background
            \li right
            \li \image imagine/images/drawer-background-right.9.png
                       {Drawer background right asset}
            \li
        \row
            \li
            \li background
            \li top
            \li \image imagine/images/drawer-background-top.9.png
                       {Drawer background top asset}
            \li
        \row
            \li
            \li background
            \li bottom
            \li \image imagine/images/drawer-background-bottom.9.png
                       {Drawer background bottom asset}
            \li
        \row
            \li
            \li overlay
            \li
            \li \image imagine/images/drawer-overlay.png
                       {Drawer overlay asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li
            \li overlay
            \li modal
            \li \image imagine/images/drawer-overlay-modal.png
                       {Drawer overlay modal asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li \l Frame
            \li background
            \li
            \li \image imagine/images/frame-background.9.png
                       {Frame background asset}
            \li
        \row
            \li \l GroupBox
            \li background
            \li
            \li \image imagine/images/groupbox-background.9.png
                       {GroupBox background asset}
            \li
        \row
            \li
            \li title
            \li
            \li \image imagine/images/groupbox-title.9.png
                       {GroupBox title asset}
            \li
        \row
            \li \l ItemDelegate
            \li background
            \li
            \li \image imagine/images/itemdelegate-background.9.png
                       {ItemDelegate background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/itemdelegate-background-disabled.9.png
                       {ItemDelegate background disabled asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/itemdelegate-background-pressed.9.png
                       {ItemDelegate background pressed asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/itemdelegate-background-focused.9.png
                       {ItemDelegate background focused asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/itemdelegate-background-hovered.9.png
                       {ItemDelegate background hovered asset}
            \li
        \row
            \li
            \li background
            \li highlighted
            \li \image imagine/images/itemdelegate-background-highlighted.9.png
                       {ItemDelegate background highlighted asset}
            \li
        \row
            \li \l Menu
            \li background
            \li
            \li \image imagine/images/menu-background.9.png
                       {Menu background asset}
            \li
        \row
            \li \l MenuItem
            \li background
            \li
            \li \image imagine/images/menuitem-background.9.png
                       {MenuItem background asset}
            \li
        \row
            \li
            \li background
            \li highlighted
            \li \image imagine/images/menuitem-background-highlighted.9.png
                       {MenuItem background highlighted asset}
            \li
        \row
            \li
            \li arrow
            \li
            \li \image imagine/images/menuitem-arrow.png
                       {MenuItem arrow asset}
            \li
        \row
            \li
            \li arrow
            \li mirrored
            \li \image imagine/images/menuitem-arrow-mirrored.png
                       {MenuItem arrow mirrored asset}
            \li
        \row
            \li
            \li arrow
            \li disabled
            \li \image imagine/images/menuitem-arrow-disabled.png
                       {MenuItem arrow disabled asset}
            \li
        \row
            \li
            \li arrow
            \li mirrored, disabled
            \li \image imagine/images/menuitem-arrow-mirrored-disabled.png
                       {MenuItem arrow mirrored disabled asset}
            \li
        \row
            \li
            \li indicator
            \li
            \li \image imagine/images/menuitem-indicator.png
                       {MenuItem indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/menuitem-indicator-disabled.png
                       {MenuItem indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/menuitem-indicator-pressed.png
                       {MenuItem indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/menuitem-indicator-checked.png
                       {MenuItem indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/menuitem-indicator-checked-pressed.png
                       {MenuItem indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/menuitem-indicator-checked-focused.png
                       {MenuItem indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/menuitem-indicator-checked-hovered.png
                       {MenuItem indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/menuitem-indicator-focused.png
                       {MenuItem indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/menuitem-indicator-hovered.png
                       {MenuItem indicator hovered asset}
            \li
        \row
            \li \l MenuSeparator
            \li separator
            \li
            \li \image imagine/images/menuseparator-separator.9.png
                       {MenuSeparator separator asset}
            \li
        \row
            \li \l Page
            \li background
            \li
            \li \image imagine/images/page-background.png
                       {Page background asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li \l PageIndicator
            \li delegate
            \li
            \li \image imagine/images/pageindicator-delegate.png
                       {PageIndicator delegate asset}
            \li
        \row
            \li
            \li delegate
            \li disabled
            \li \image imagine/images/pageindicator-delegate-disabled.png
                       {PageIndicator delegate disabled asset}
            \li
        \row
            \li
            \li delegate
            \li disabled, current
            \li \image imagine/images/pageindicator-delegate-disabled-current.png
                       {PageIndicator delegate disabled current asset}
            \li
        \row
            \li
            \li delegate
            \li pressed
            \li \image imagine/images/pageindicator-delegate-pressed.png
                       {PageIndicator delegate pressed asset}
            \li
        \row
            \li
            \li delegate
            \li current
            \li \image imagine/images/pageindicator-delegate-current.png
                       {PageIndicator delegate current asset}
            \li
        \row
            \li \l Pane
            \li background
            \li
            \li \image imagine/images/pane-background.9.png
                       {Pane background asset}
            \li
        \row
            \li \l Popup
            \li background
            \li
            \li \image imagine/images/popup-background.9.png
                       {Popup background asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li
            \li overlay
            \li
            \li \image imagine/images/popup-overlay.png
                       {Popup overlay asset}
            \li \l {sup1}{See footnote} \sup 1
        \row
            \li
            \li overlay
            \li modal
            \li \image imagine/images/popup-overlay-modal.png
                       {Popup overlay modal asset}
            \li
        \row
            \li \l ProgressBar
            \li background
            \li
            \li \image imagine/images/progressbar-background.9.png
                       {ProgressBar background asset}
            \li
        \row
            \li
            \li progress
            \li
            \li \image imagine/images/progressbar-progress.png
                       {ProgressBar progress asset}
            \li
        \row
            \li
            \li mask
            \li
            \li \image imagine/images/progressbar-mask.9.png
                       {ProgressBar mask asset}
            \li
        \row
            \li \l RadioButton
            \li indicator
            \li
            \li \image imagine/images/radiobutton-indicator.png
                       {RadioButton indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/radiobutton-indicator-disabled.png
                       {RadioButton indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/radiobutton-indicator-pressed.png
                       {RadioButton indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/radiobutton-indicator-checked.png
                       {RadioButton indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/radiobutton-indicator-checked-focused.png
                       {RadioButton indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/radiobutton-indicator-checked-hovered.png
                       {RadioButton indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/radiobutton-indicator-checked-pressed.png
                       {RadioButton indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/radiobutton-indicator-focused.png
                       {RadioButton indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/radiobutton-indicator-hovered.png
                       {RadioButton indicator hovered asset}
            \li
        \row
            \li \l RadioDelegate
            \li background
            \li
            \li \image imagine/images/radiodelegate-background.9.png
                       {RadioDelegate background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/radiodelegate-background-disabled.9.png
                       {RadioDelegate background disabled asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/radiodelegate-background-pressed.9.png
                       {RadioDelegate background pressed asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/radiodelegate-background-focused.9.png
                       {RadioDelegate background focused asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/radiodelegate-background-hovered.9.png
                       {RadioDelegate background hovered asset}
            \li
        \row
            \li
            \li indicator
            \li
            \li \image imagine/images/radiodelegate-indicator.png
                       {RadioDelegate indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/radiodelegate-indicator-disabled.png
                       {RadioDelegate indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/radiodelegate-indicator-pressed.png
                       {RadioDelegate indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/radiodelegate-indicator-checked.png
                       {RadioDelegate indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/radiodelegate-indicator-checked-focused.png
                       {RadioDelegate indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/radiodelegate-indicator-checked-hovered.png
                       {RadioDelegate indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/radiodelegate-indicator-checked-pressed.png
                       {RadioDelegate indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/radiodelegate-indicator-focused.png
                       {RadioDelegate indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/radiodelegate-indicator-hovered.png
                       {RadioDelegate indicator hovered asset}
            \li
        \row
            \li \l RangeSlider
            \li background
            \li vertical
            \li \image imagine/images/rangeslider-background-vertical.9.png
                       {RangeSlider background vertical asset}
            \li
        \row
            \li
            \li background
            \li horizontal
            \li \image imagine/images/rangeslider-background-horizontal.9.png
                       {RangeSlider background horizontal asset}
            \li
        \row
            \li
            \li progress
            \li vertical
            \li \image imagine/images/rangeslider-progress-vertical.9.png
                       {RangeSlider progress vertical asset}
            \li
        \row
            \li
            \li progress
            \li vertical, disabled
            \li \image imagine/images/rangeslider-progress-vertical-disabled.9.png
                       {RangeSlider progress vertical disabled asset}
            \li
        \row
            \li
            \li progress
            \li horizontal
            \li \image imagine/images/rangeslider-progress-horizontal.9.png
                       {RangeSlider progress horizontal asset}
            \li
        \row
            \li
            \li progress
            \li horizontal, disabled
            \li \image imagine/images/rangeslider-progress-horizontal-disabled.9.png
                       {RangeSlider progress horizontal disabled asset}
            \li
        \row
            \li
            \li handle
            \li
            \li \image imagine/images/rangeslider-handle.png
                       {RangeSlider handle asset}
            \li
        \row
            \li
            \li handle
            \li disabled
            \li \image imagine/images/rangeslider-handle-disabled.png
                       {RangeSlider handle disabled asset}
            \li
        \row
            \li
            \li handle
            \li focused
            \li \image imagine/images/rangeslider-handle-focused.png
                       {RangeSlider handle focused asset}
            \li
        \row
            \li
            \li handle
            \li focused, hovered
            \li \image imagine/images/rangeslider-handle-focused-hovered.png
                       {RangeSlider handle focused hovered asset}
            \li
        \row
            \li
            \li handle
            \li focused, pressed
            \li \image imagine/images/rangeslider-handle-focused-pressed.png
                       {RangeSlider handle focused pressed asset}
            \li
        \row
            \li
            \li handle
            \li hovered
            \li \image imagine/images/rangeslider-handle-hovered.png
                       {RangeSlider handle hovered asset}
            \li
        \row
            \li
            \li handle
            \li pressed
            \li \image imagine/images/rangeslider-handle-pressed.png
                       {RangeSlider handle pressed asset}
            \li
        \row
            \li \l RoundButton
            \li background
            \li
            \li \image imagine/images/roundbutton-background.png
                       {RoundButton background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/roundbutton-background-disabled.png
                       {RoundButton background disabled asset}
            \li
        \row
            \li
            \li background
            \li disabled, checked
            \li \image imagine/images/roundbutton-background-disabled-checked.png
                       {RoundButton background disabled checked asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/roundbutton-background-focused.png
                       {RoundButton background focused asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/roundbutton-background-pressed.png
                       {RoundButton background pressed asset}
            \li
        \row
            \li
            \li background
            \li checked
            \li \image imagine/images/roundbutton-background-checked.png
                       {RoundButton background checked asset}
            \li
        \row
            \li
            \li background
            \li checked, focused
            \li \image imagine/images/roundbutton-background-checked-focused.png
                       {RoundButton background checked focused asset}
            \li
        \row
            \li
            \li background
            \li checked, hovered
            \li \image imagine/images/roundbutton-background-checked-hovered.png
                       {RoundButton background checked hovered asset}
            \li
        \row
            \li
            \li background
            \li highlighted
            \li \image imagine/images/roundbutton-background-highlighted.png
                       {RoundButton background highlighted asset}
            \li
        \row
            \li
            \li background
            \li highlighted, pressed
            \li \image imagine/images/roundbutton-background-highlighted-pressed.png
                       {RoundButton background highlighted pressed asset}
            \li
        \row
            \li
            \li background
            \li highlighted, focused
            \li \image imagine/images/roundbutton-background-highlighted-focused.png
                       {RoundButton background highlighted focused asset}
            \li
        \row
            \li
            \li background
            \li highlighted, hovered
            \li \image imagine/images/roundbutton-background-highlighted-hovered.png
                       {RoundButton background highlighted hovered asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/roundbutton-background-hovered.png
                       {RoundButton background hovered asset}
            \li
        \row
            \li \l ScrollBar
            \li handle
            \li
            \li \image imagine/images/scrollbar-handle.png
                       {ScrollBar handle asset}
            \li
        \row
            \li
            \li handle
            \li disabled
            \li \image imagine/images/scrollbar-handle-disabled.png
                       {ScrollBar handle disabled asset}
            \li
        \row
            \li
            \li handle
            \li interactive
            \li \image imagine/images/scrollbar-handle-interactive.png
                       {ScrollBar handle interactive asset}
            \li
        \row
            \li
            \li handle
            \li interactive, disabled
            \li \image imagine/images/scrollbar-handle-interactive-disabled.png
                       {ScrollBar handle interactive disabled asset}
            \li
        \row
            \li
            \li handle
            \li interactive, pressed
            \li \image imagine/images/scrollbar-handle-interactive-pressed.png
                       {ScrollBar handle interactive pressed asset}
            \li
        \row
            \li
            \li handle
            \li interactive, hovered
            \li \image imagine/images/scrollbar-handle-interactive-hovered.png
                       {ScrollBar handle interactive hovered asset}
            \li
        \row
            \li \l ScrollIndicator
            \li handle
            \li
            \li \image imagine/images/scrollindicator-handle.png
                       {ScrollIndicator handle asset}
            \li
        \row
            \li \l Slider
            \li background
            \li vertical
            \li \image imagine/images/slider-background-vertical.9.png
                       {Slider background vertical asset}
            \li
        \row
            \li
            \li background
            \li horizontal
            \li \image imagine/images/slider-background-horizontal.9.png
                       {Slider background horizontal asset}
            \li
        \row
            \li
            \li progress
            \li vertical
            \li \image imagine/images/slider-progress-vertical.9.png
                       {Slider progress vertical asset}
            \li
        \row
            \li
            \li progress
            \li vertical, disabled
            \li \image imagine/images/slider-progress-vertical-disabled.9.png
                       {Slider progress vertical disabled asset}
            \li
        \row
            \li
            \li progress
            \li horizontal
            \li \image imagine/images/slider-progress-horizontal.9.png
                       {Slider progress horizontal asset}
            \li
        \row
            \li
            \li progress
            \li horizontal, disabled
            \li \image imagine/images/slider-progress-horizontal-disabled.9.png
                       {Slider progress horizontal disabled asset}
            \li
        \row
            \li
            \li handle
            \li
            \li \image imagine/images/slider-handle.png
                       {Slider handle asset}
            \li
        \row
            \li
            \li handle
            \li disabled
            \li \image imagine/images/slider-handle-disabled.png
                       {Slider handle disabled asset}
            \li
        \row
            \li
            \li handle
            \li focused
            \li \image imagine/images/slider-handle-focused.png
                       {Slider handle focused asset}
            \li
        \row
            \li
            \li handle
            \li focused, hovered
            \li \image imagine/images/slider-handle-focused-hovered.png
                       {Slider handle focused hovered asset}
            \li
        \row
            \li
            \li handle
            \li focused, pressed
            \li \image imagine/images/slider-handle-focused-pressed.png
                       {Slider handle focused pressed asset}
            \li
        \row
            \li
            \li handle
            \li hovered
            \li \image imagine/images/slider-handle-hovered.png
                       {Slider handle hovered asset}
            \li
        \row
            \li
            \li handle
            \li pressed
            \li \image imagine/images/slider-handle-pressed.png
                       {Slider handle pressed asset}
            \li
        \row
            \li \l SpinBox
            \li background
            \li
            \li \image imagine/images/spinbox-background.9.png
                       {SpinBox background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/spinbox-background-disabled.9.png
                       {SpinBox background disabled asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/spinbox-background-focused.9.png
                       {SpinBox background focused asset}
            \li
        \row
            \li
            \li background
            \li editable
            \li \image imagine/images/spinbox-background-editable.9.png
                       {SpinBox background editable asset}
            \li
        \row
            \li
            \li indicator
            \li up
            \li \image imagine/images/spinbox-indicator-up.9.png
                       {SpinBox indicator up asset}
            \li
        \row
            \li
            \li indicator
            \li up, disabled
            \li \image imagine/images/spinbox-indicator-up-disabled.9.png
                       {SpinBox indicator up disabled asset}
            \li
        \row
            \li
            \li indicator
            \li up, pressed
            \li \image imagine/images/spinbox-indicator-up-pressed.9.png
                       {SpinBox indicator up pressed asset}
            \li
        \row
            \li
            \li indicator
            \li up, focused
            \li \image imagine/images/spinbox-indicator-up-focused.9.png
                       {SpinBox indicator up focused asset}
            \li
        \row
            \li
            \li indicator
            \li up, mirrored
            \li \image imagine/images/spinbox-indicator-up-mirrored.9.png
                       {SpinBox indicator up mirrored asset}
            \li
        \row
            \li
            \li indicator
            \li up, hovered
            \li \image imagine/images/spinbox-indicator-up-hovered.9.png
                       {SpinBox indicator up hovered asset}
            \li
        \row
            \li
            \li indicator
            \li up, editable
            \li \image imagine/images/spinbox-indicator-up-editable.9.png
                       {SpinBox indicator up editable asset}
            \li
        \row
            \li
            \li indicator
            \li up, editable, pressed
            \li \image imagine/images/spinbox-indicator-up-editable-pressed.9.png
                       {SpinBox indicator up editable pressed asset}
            \li
        \row
            \li
            \li indicator
            \li up, editable, focused
            \li \image imagine/images/spinbox-indicator-up-editable-focused.9.png
                       {SpinBox indicator up editable focused asset}
            \li
        \row
            \li
            \li indicator
            \li up, editable, mirrored
            \li \image imagine/images/spinbox-indicator-up-editable-mirrored.9.png
                       {SpinBox indicator up editable mirrored asset}
            \li
        \row
            \li
            \li indicator
            \li up, editable, hovered
            \li \image imagine/images/spinbox-indicator-up-editable-hovered.9.png
                       {SpinBox indicator up editable hovered asset}
            \li
        \row
            \li
            \li indicator
            \li down
            \li \image imagine/images/spinbox-indicator-down.9.png
                       {SpinBox indicator down asset}
            \li
        \row
            \li
            \li indicator
            \li down, disabled
            \li \image imagine/images/spinbox-indicator-down-disabled.9.png
                       {SpinBox indicator down disabled asset}
            \li
        \row
            \li
            \li indicator
            \li down, pressed
            \li \image imagine/images/spinbox-indicator-down-pressed.9.png
                       {SpinBox indicator down pressed asset}
            \li
        \row
            \li
            \li indicator
            \li down, focused
            \li \image imagine/images/spinbox-indicator-down-focused.9.png
                       {SpinBox indicator down focused asset}
            \li
        \row
            \li
            \li indicator
            \li down, mirrored
            \li \image imagine/images/spinbox-indicator-down-mirrored.9.png
                       {SpinBox indicator down mirrored asset}
            \li
        \row
            \li
            \li indicator
            \li down, hovered
            \li \image imagine/images/spinbox-indicator-down-hovered.9.png
                       {SpinBox indicator down hovered asset}
            \li
        \row
            \li
            \li indicator
            \li down, editable
            \li \image imagine/images/spinbox-indicator-down-editable.9.png
                       {SpinBox indicator down editable asset}
            \li
        \row
            \li
            \li indicator
            \li down, editable, pressed
            \li \image imagine/images/spinbox-indicator-down-editable-pressed.9.png
                       {SpinBox indicator down editable pressed asset}
            \li
        \row
            \li
            \li indicator
            \li down, editable, focused
            \li \image imagine/images/spinbox-indicator-down-editable-focused.9.png
                       {SpinBox indicator down editable focused asset}
            \li
        \row
            \li
            \li indicator
            \li down, editable, mirrored
            \li \image imagine/images/spinbox-indicator-down-editable-mirrored.9.png
                       {SpinBox indicator down editable mirrored asset}
            \li
        \row
            \li
            \li indicator
            \li down, editable, hovered
            \li \image imagine/images/spinbox-indicator-down-editable-hovered.9.png
                       {SpinBox indicator down editable hovered asset}
            \li
        \row
            \li \l SwipeDelegate
            \li background
            \li
            \li \image imagine/images/swipedelegate-background.9.png
                       {SwipeDelegate background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/swipedelegate-background-disabled.9.png
                       {SwipeDelegate background disabled asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/swipedelegate-background-pressed.9.png
                       {SwipeDelegate background pressed asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/swipedelegate-background-focused.9.png
                       {SwipeDelegate background focused asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/swipedelegate-background-hovered.9.png
                       {SwipeDelegate background hovered asset}
            \li
        \row
            \li \l Switch
            \li indicator
            \li
            \li \image imagine/images/switch-indicator.png
                       {Switch indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/switch-indicator-disabled.png
                       {Switch indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/switch-indicator-pressed.png
                       {Switch indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/switch-indicator-checked.png
                       {Switch indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/switch-indicator-checked-focused.png
                       {Switch indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/switch-indicator-checked-hovered.png
                       {Switch indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/switch-indicator-checked-pressed.png
                       {Switch indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/switch-indicator-focused.png
                       {Switch indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/switch-indicator-hovered.png
                       {Switch indicator hovered asset}
            \li
        \row
            \li
            \li handle
            \li
            \li \image imagine/images/switch-handle.png
                       {Switch handle asset}
            \li
        \row
            \li
            \li handle
            \li disabled
            \li \image imagine/images/switch-handle-disabled.png
                       {Switch handle disabled asset}
            \li
        \row
            \li
            \li handle
            \li pressed
            \li \image imagine/images/switch-handle-pressed.png
                       {Switch handle pressed asset}
            \li
        \row
            \li \l SwitchDelegate
            \li background
            \li
            \li \image imagine/images/switchdelegate-background.9.png
                       {SwitchDelegate background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/switchdelegate-background-disabled.9.png
                       {SwitchDelegate background disabled asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/switchdelegate-background-pressed.9.png
                       {SwitchDelegate background pressed asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/switchdelegate-background-focused.9.png
                       {SwitchDelegate background focused asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/switchdelegate-background-hovered.9.png
                       {SwitchDelegate background hovered asset}
            \li
        \row
            \li
            \li indicator
            \li
            \li \image imagine/images/switchdelegate-indicator.png
                       {SwitchDelegate indicator asset}
            \li
        \row
            \li
            \li indicator
            \li disabled
            \li \image imagine/images/switchdelegate-indicator-disabled.png
                       {SwitchDelegate indicator disabled asset}
            \li
        \row
            \li
            \li indicator
            \li pressed
            \li \image imagine/images/switchdelegate-indicator-pressed.png
                       {SwitchDelegate indicator pressed asset}
            \li
        \row
            \li
            \li indicator
            \li checked
            \li \image imagine/images/switchdelegate-indicator-checked.png
                       {SwitchDelegate indicator checked asset}
            \li
        \row
            \li
            \li indicator
            \li checked, focused
            \li \image imagine/images/switchdelegate-indicator-checked-focused.png
                       {SwitchDelegate indicator checked focused asset}
            \li
        \row
            \li
            \li indicator
            \li checked, hovered
            \li \image imagine/images/switchdelegate-indicator-checked-hovered.png
                       {SwitchDelegate indicator checked hovered asset}
            \li
        \row
            \li
            \li indicator
            \li checked, pressed
            \li \image imagine/images/switchdelegate-indicator-checked-pressed.png
                       {SwitchDelegate indicator checked pressed asset}
            \li
        \row
            \li
            \li indicator
            \li focused
            \li \image imagine/images/switchdelegate-indicator-focused.png
                       {SwitchDelegate indicator focused asset}
            \li
        \row
            \li
            \li indicator
            \li hovered
            \li \image imagine/images/switchdelegate-indicator-hovered.png
                       {SwitchDelegate indicator hovered asset}
            \li
        \row
            \li
            \li handle
            \li
            \li \image imagine/images/switchdelegate-handle.png
                       {SwitchDelegate handle asset}
            \li
        \row
            \li
            \li handle
            \li disabled
            \li \image imagine/images/switchdelegate-handle-disabled.png
                       {SwitchDelegate handle disabled asset}
            \li
        \row
            \li \l TabBar
            \li background
            \li
            \li \image imagine/images/tabbar-background.png
                       {TabBar background asset}
            \li
        \row
            \li \l TabButton
            \li background
            \li
            \li \image imagine/images/tabbutton-background.9.png
                       {TabButton background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/tabbutton-background-disabled.9.png
                       {TabButton background disabled asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/tabbutton-background-pressed.9.png
                       {TabButton background pressed asset}
            \li
        \row
            \li
            \li background
            \li checked
            \li \image imagine/images/tabbutton-background-checked.9.png
                       {TabButton background checked asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/tabbutton-background-hovered.9.png
                       {TabButton background hovered asset}
            \li
        \row
            \li
            \li background
            \li disabled, checked
            \li \image imagine/images/tabbutton-background-disabled-checked.9.png
                       {TabButton background disabled checked asset}
            \li
        \row
            \li \l TextArea
            \li background
            \li
            \li \image imagine/images/textarea-background.9.png
                       {TextArea background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/textarea-background-disabled.9.png
                       {TextArea background disabled asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/textarea-background-focused.9.png
                       {TextArea background focused asset}
            \li
        \row
            \li \l TextField
            \li background
            \li
            \li \image imagine/images/textfield-background.9.png
                       {TextField background asset}
            \li
        \row
            \li
            \li background
            \li disabled
            \li \image imagine/images/textfield-background-disabled.9.png
                       {TextField background disabled asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/textfield-background-focused.9.png
                       {TextField background focused asset}
            \li
        \row
            \li \l ToolBar
            \li background
            \li
            \li \image imagine/images/toolbar-background.png
                       {ToolBar background asset}
            \li
        \row
            \li \l ToolButton
            \li background
            \li
            \li \image imagine/images/toolbutton-background.9.png
                       {ToolButton background asset}
            \li
        \row
            \li
            \li background
            \li disabled, checked
            \li \image imagine/images/toolbutton-background-disabled-checked.9.png
                       {ToolButton background disabled checked asset}
            \li
        \row
            \li
            \li background
            \li focused
            \li \image imagine/images/toolbutton-background-focused.9.png
                       {ToolButton background focused asset}
            \li
        \row
            \li
            \li background
            \li pressed
            \li \image imagine/images/toolbutton-background-pressed.9.png
                       {ToolButton background pressed asset}
            \li
        \row
            \li
            \li background
            \li checked
            \li \image imagine/images/toolbutton-background-checked.9.png
                       {ToolButton background checked asset}
            \li
        \row
            \li
            \li background
            \li checked, focused
            \li \image imagine/images/toolbutton-background-checked-focused.9.png
                       {ToolButton background checked focused asset}
            \li
        \row
            \li
            \li background
            \li checked, hovered
            \li \image imagine/images/toolbutton-background-checked-hovered.9.png
                       {ToolButton background checked hovered asset}
            \li
        \row
            \li
            \li background
            \li hovered
            \li \image imagine/images/toolbutton-background-hovered.9.png
                       {ToolButton background hovered asset}
            \li
        \row
            \li \l ToolSeparator
            \li separator
            \li horizontal
            \li \image imagine/images/toolseparator-separator-horizontal.9.png
                       {ToolSeparator separator horizontal asset}
            \li
        \row
            \li
            \li separator
            \li vertical
            \li \image imagine/images/toolseparator-separator-vertical.9.png
                       {ToolSeparator separator vertical asset}
            \li
        \row
            \li \l ToolTip
            \li background
            \li
            \li \image imagine/images/tooltip-background.9.png
                       {ToolTip background asset}
            \li
    \endtable
 
    \target sup1
    \sup 1 A 1x1 image containing one color, stretched to fill the control.
 
    \section2 9-Patch Images
 
    The Imagine style uses \l
    {https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch}{9-patch
    images} in order to give designers control over how a particular element
    responds to being resized. Here is an example of a 9-patch image that
    represents a \l {Button}'s \l {Control::}{background}, alongside a
    magnified version (to make it easier to see the 9-patch lines):
 
    \image qtquickcontrols-imagine-9-patch-4x.png
           {Button background 9-patch image showing stretch and padding lines}
 
    The content of the image is 44 pixels wide by 32 pixels high. Every 9-patch
    image needs a one pixel thick line (collectively referred to as
    "9-patch lines") around every side, so the actual size of the image becomes
    46 pixels wide by 34 pixels high. Note that the 9-patch lines must be one
    pixel thick regardless of the target DPI of the image. For example,
    the 9-patch lines for button-background.9.png and button-background@2x.9.png
    must both be one pixel thick.
 
    The 9-patch lines must be black, and the remaining areas must be transparent
    or white:
 
    \image qtquickcontrols-imagine-9-patch-size.png
           {Diagram showing 9-patch line color requirements}
 
    \section3 Stretchable Areas
 
    The 9-patch lines on the top and left edges determine which parts of the
    image are stretched when it is resized.
 
    Below are examples of the 9-patch image being resized to one and a half
    times its original size in various dimensions:
 
    \image qtquickcontrols-imagine-9-patch-resized-stretchable.png
           {Examples of 9-patch image resized showing stretchable areas}
 
    Notice how the the rounded corners keep their original size, as they are
    outside the range of the lines.
 
    \section3 Padding Areas
 
    The 9-patch lines on the right and bottom edges determine how much space
    is available for the control's \l {Control::}{contentItem}, which means it
    can also be thought of as controlling the \l {Control::}{padding}. For a
    diagram that illustrates padding, see \l {Control Layout}.
 
    Below are more examples of the 9-patch image being resized, but this time
    demonstrating how the padding 9-patch lines work.
 
    \image qtquickcontrols-imagine-9-patch-resized-padding.png
           {Examples of 9-patch image resized showing padding areas}
 
    The \c contentItem can take up as much space as it needs within the shaded
    areas. If the padding lines are left out, the \c contentItem will take as
    much space as it needs without exceeding the stretchable areas.
 
    \section3 Inset Areas
 
    In some cases it is necessary for a control to have a drop shadow, for
    example. However, if we were to add a drop shadow to the button above, it
    would affect its size, which presents problems for both layouting and
    mouse/touch input boundaries.
 
    Inset areas accounts for this by telling the control that a certain area of
    the 9-patch image should go outside of the control:
 
    \image qtquickcontrols-imagine-9-patch-inset.png
           {Diagram showing 9-patch inset lines for drop shadow}
 
    In the image below, the dashed line represents the button's clickable area,
    as well as the space that it will take up in a layout. The shadow is marked
    by the striped area behind it:
 
    \image qtquickcontrols-imagine-9-patch-inset-boundaries.png
           {Button with drop shadow showing clickable area and insets}
 
    \section3 Exporting 9-Patch Images
 
    Various vector and bitmap editors can be used to create 9-patch images
    suitable for use with the Imagine style. The following sections briefly
    explain the export process for each editor, and the last section explains
    how to ensure the exported images are 9-patch-conformant.
 
    \section4 Affinity Designer
 
    See Affinity's \l {https://affinity.help/publisher/en-US.lproj/pages/Publishing/exportSettings.html}
    {Export Settings} documentation.
 
    \section4 Adobe Illustrator
 
    See Adobe's
    \l {https://helpx.adobe.com/in/illustrator/using/collect-assets-export-for-screens.html#panel}
    {Asset Export panel} documentation.
 
    \section4 Adobe Photoshop
 
    See Adobe's
    \l {https://helpx.adobe.com/photoshop/using/generate-assets-layers.html}
    {Generate image assets from layers} documentation.
 
    \section4 Inkscape
 
    The \l {https://github.com/mitchcurtis/inkscape-9-patch-export}
    {Inkscape 9-Patch Export Extension} can be used to export assets with
    Inkscape.
 
    \section4 Sketch
 
    See Sketch's \l {https://sketchapp.com/docs/exporting/}{Exporting} documentation.
 
    Qt Quick Controls also provides a
    \l {http://code.qt.io/cgit/qt/qtdeclarative.git/tree/src/quickcontrols/imagine/design}
    {plugin} for Sketch that automatically fixes the thickness of the 9-patch lines
    after the assets are exported. To install this file, double-click on it.
    Once Sketch has confirmed that the 9-patch export plugin has been installed,
    the plugin will automatically process images when they are exported.
 
    \section4 Fixing 9-Patch Lines
 
    When exporting 9-patch images in several DPI variants (\c {@2x}, \c {@3x},
    etc.), the 9-patch lines will typically be scaled up along with the image.
    There are several ways to fix this, but perhaps the simplest approach is
    to use \l {https://www.imagemagick.org/script/mogrify.php}{ImageMagick's mogrify}
    tool. The tool has a \c -shave feature that can be used to crop the image
    to reduce the thickness of the 9-patch lines:
 
    \badcode
    mogrify -shave 1x1 -path path/to/images *@2x.9.png
    mogrify -shave 2x2 -path path/to/images *@3x.9.png
    mogrify -shave 3x3 -path path/to/images *@4x.9.png
    \endcode
 
    Regular DPI images (those without the \c @Nx prefix) are not affected, so it
    is only necessary to run the command on images intended for high DPI displays.
 
    \section2 Animated Images
 
    The \l {https://developers.google.com/speed/webp/}{WebP} and GIF animated
    image formats are supported by the Imagine style.
 
    \section2 Customization
 
    \section3 Path
 
    The Imagine style allows customizing the \l {imagine-path-attached-prop}{path}
    that is used to do the image asset selection. The path can be specified for any
    window or item, and it automatically propagates to children in the same manner as
    \l {Control::font}{fonts}. In the following example, the window and all three radio
    buttons appear with dark image assets (files that are located in "qrc:/themes/dark").
 
    \table
        \row
            \li
                \qml
                import QtQuick
                import QtQuick.Controls
                import QtQuick.Controls.Imagine
 
                ApplicationWindow {
                    visible: true
 
                    Imagine.path: "qrc:/themes/dark"
 
                    Column {
                        anchors.centerIn: parent
 
                        RadioButton { text: qsTr("Small") }
                        RadioButton { text: qsTr("Medium"); checked: true }
                        RadioButton { text: qsTr("Large") }
                    }
                }
                \endqml
            \li
                \image qtquickcontrols-imagine-customization-dark.png
                       {Small, Medium, Large radio buttons in Imagine dark
                        theme}
    \endtable
 
    In addition to specifying the path in QML, it is also possible to specify
    it via an \l {imagine-customization-environment-variable}{environment variable}
    or in a \l {imagine-customization-configuration-file}{configuration file}.
    Attributes specified in QML take precedence over all other methods.
 
    \section4 Configuration File
    \target imagine-customization-configuration-file
 
    \include qquickimaginestyle.qdocinc conf
 
    See \l {Qt Quick Controls Configuration File} for more details about the
    configuration file.
 
    \section4 Environment Variables
    \target imagine-customization-environment-variable
 
    \include qquickimaginestyle.qdocinc env
 
    See \l {Supported Environment Variables in Qt Quick Controls} for the full
    list of supported environment variables.
 
    \section3 Palette
 
    The Imagine style supports palette customization via the \l {Item::}{palette}
    property and the \l {Palette Configuration}{qtquickcontrols2.conf} file.
    As with other styles, the exact \l[QML]{Palette}{palette roles}
    that the Imagine style uses are style-dependent. However, as most of the visual
    appearance of controls (for example: backgrounds) are managed through image assets,
    only the roles that are typically used for text will have an effect.
 
    \section3 Font
 
    Custom fonts can be set via the \l {Control::}{font} property and the
    \l {Font Configuration}{configuration} file.
 
    \section2 Dependency
 
    The Imagine style must be separately imported to gain access to the
    attributes that are specific to the Imagine style. It should be noted
    that regardless of the references to the Imagine style, the same
    application code runs with any other style. Imagine-specific attributes
    only have an effect when the application is run with the Imagine style.
 
    If the Imagine style is imported in a QML file that is always loaded, the
    Imagine style must be deployed with the application in order to be able
    to run the application regardless of which style the application is run with.
    By using \l {Using File Selectors with Qt Quick Controls}{file selectors},
    style-specific tweaks can be applied without creating a hard dependency to
    a style.
 
    \b {See also} \l {Styling Qt Quick Controls}
 
    \section1 Attached Property Documentation
 
    \styleproperty {Imagine.path} {string}
    \target imagine-path-attached-prop
    This attached property holds the path to the image assets...
 
    \code
    Button {
        Imagine.path: "qrc:/themes/dark"
    }
    \endcode
 
    \endstyleproperty
 
    \section1 Related Information
 
    \list
      \li \l{Styling Qt Quick Controls}
      \li \l{Qt Quick Controls - Imagine Style Example: Automotive}{Automotive Example}
    \endlist
*/