Imagine: use background insets

All others have been updated, except GroupBox that has some strange
special handling for positioning the background.

Change-Id: Ief5a68cbeedbdc3c66b85e8d03198f70e35aac61
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

45 files changed, 226 insertions, 189 deletions

diff --git a/src/imports/controls/imagine/BusyIndicator.qml b/src/imports/controls/imagine/BusyIndicator.qml
index 51b50554..bd90d21a 100644
--- a/src/imports/controls/imagine/BusyIndicator.qml
+++ b/src/imports/controls/imagine/BusyIndicator.qml
@@ -52,6 +52,11 @@ T.BusyIndicator {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: AnimatedImage {
         opacity: control.running ? 1 : 0
         playing: control.running || opacity > 0
@@ -70,10 +75,6 @@ T.BusyIndicator {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "busyindicator-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Button.qml b/src/imports/controls/imagine/Button.qml
index c9f134c1..c8962a6b 100644
--- a/src/imports/controls/imagine/Button.qml
+++ b/src/imports/controls/imagine/Button.qml
@@ -56,6 +56,11 @@ T.Button {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.enabled && control.flat && control.highlighted ? control.palette.highlight
@@ -76,10 +81,6 @@ T.Button {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "button-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/CheckBox.qml b/src/imports/controls/imagine/CheckBox.qml
index b7d950c7..3f0b7684 100644
--- a/src/imports/controls/imagine/CheckBox.qml
+++ b/src/imports/controls/imagine/CheckBox.qml
@@ -55,6 +55,11 @@ T.CheckBox {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     indicator: Image {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
@@ -85,10 +90,6 @@ T.CheckBox {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "checkbox-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/CheckDelegate.qml b/src/imports/controls/imagine/CheckDelegate.qml
index 324dfd29..2336131f 100644
--- a/src/imports/controls/imagine/CheckDelegate.qml
+++ b/src/imports/controls/imagine/CheckDelegate.qml
@@ -57,6 +57,11 @@ T.CheckDelegate {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.text
@@ -96,10 +101,6 @@ T.CheckDelegate {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "checkdelegate-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ComboBox.qml b/src/imports/controls/imagine/ComboBox.qml
index a75993fd..530fa378 100644
--- a/src/imports/controls/imagine/ComboBox.qml
+++ b/src/imports/controls/imagine/ComboBox.qml
@@ -53,6 +53,11 @@ T.ComboBox {
     leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
     rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     delegate: ItemDelegate {
         width: parent.width
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
@@ -101,10 +106,6 @@ T.ComboBox {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "combobox-background"
         NinePatchImageSelector on source {
             states: [
@@ -132,6 +133,11 @@ T.ComboBox {
         rightPadding: background.rightPadding
         bottomPadding: background.bottomPadding
 
+        topInset: background ? -background.topInset || 0 : 0
+        leftInset: background ? -background.leftInset || 0 : 0
+        rightInset: background ? -background.rightInset || 0 : 0
+        bottomInset: background ? -background.bottomInset || 0 : 0
+
         palette.text: control.palette.text
         palette.highlight: control.palette.highlight
         palette.highlightedText: control.palette.highlightedText
@@ -149,10 +155,6 @@ T.ComboBox {
         }
 
         background: NinePatchImage {
-            x: -leftInset; y: -topInset
-            width: control.popup.width + leftInset + rightInset
-            height: control.popup.height + topInset + bottomInset
-
             source: Imagine.url + "combobox-popup"
             NinePatchImageSelector on source {
                 states: [
diff --git a/src/imports/controls/imagine/DelayButton.qml b/src/imports/controls/imagine/DelayButton.qml
index 6d99c6ce..ef1f6511 100644
--- a/src/imports/controls/imagine/DelayButton.qml
+++ b/src/imports/controls/imagine/DelayButton.qml
@@ -53,6 +53,11 @@ T.DelayButton {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     transition: Transition {
         NumberAnimation {
             duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress)
@@ -69,10 +74,6 @@ T.DelayButton {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "delaybutton-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Dial.qml b/src/imports/controls/imagine/Dial.qml
index b0f4e5ff..ac7a4645 100644
--- a/src/imports/controls/imagine/Dial.qml
+++ b/src/imports/controls/imagine/Dial.qml
@@ -52,6 +52,11 @@ T.Dial {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     handle: Image {
         x: background.x + background.width / 2 - handle.width / 2
         y: background.y + background.height / 2 - handle.height / 2
diff --git a/src/imports/controls/imagine/Dialog.qml b/src/imports/controls/imagine/Dialog.qml
index 78deeb7a..968f70ab 100644
--- a/src/imports/controls/imagine/Dialog.qml
+++ b/src/imports/controls/imagine/Dialog.qml
@@ -57,11 +57,12 @@ T.Dialog {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
-    background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
 
+    background: NinePatchImage {
         source: Imagine.url + "dialog-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/DialogButtonBox.qml b/src/imports/controls/imagine/DialogButtonBox.qml
index fa217baa..ec1cbde8 100644
--- a/src/imports/controls/imagine/DialogButtonBox.qml
+++ b/src/imports/controls/imagine/DialogButtonBox.qml
@@ -52,6 +52,12 @@ T.DialogButtonBox {
     leftPadding: background ? background.leftPadding : 0
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     spacing: 6
 
     delegate: Button {
@@ -68,10 +74,6 @@ T.DialogButtonBox {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "dialogbuttonbox-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Drawer.qml b/src/imports/controls/imagine/Drawer.qml
index 79408276..ea4f7337 100644
--- a/src/imports/controls/imagine/Drawer.qml
+++ b/src/imports/controls/imagine/Drawer.qml
@@ -54,14 +54,15 @@ T.Drawer {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     enter: Transition { SmoothedAnimation { velocity: 5 } }
     exit: Transition { SmoothedAnimation { velocity: 5 } }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "drawer-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Frame.qml b/src/imports/controls/imagine/Frame.qml
index cedeae8f..b049715b 100644
--- a/src/imports/controls/imagine/Frame.qml
+++ b/src/imports/controls/imagine/Frame.qml
@@ -52,11 +52,12 @@ T.Frame {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
-    background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
 
+    background: NinePatchImage {
         source: Imagine.url + "frame-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ItemDelegate.qml b/src/imports/controls/imagine/ItemDelegate.qml
index ef779bf6..7ec07f55 100644
--- a/src/imports/controls/imagine/ItemDelegate.qml
+++ b/src/imports/controls/imagine/ItemDelegate.qml
@@ -57,6 +57,11 @@ T.ItemDelegate {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.text
@@ -74,10 +79,6 @@ T.ItemDelegate {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "itemdelegate-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Label.qml b/src/imports/controls/imagine/Label.qml
index 84e2a914..f9a5bdb6 100644
--- a/src/imports/controls/imagine/Label.qml
+++ b/src/imports/controls/imagine/Label.qml
@@ -42,14 +42,15 @@ import QtQuick.Controls.Imagine.impl 2.5
 T.Label {
     id: control
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     color: control.palette.windowText
     linkColor: control.palette.link
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "label-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Menu.qml b/src/imports/controls/imagine/Menu.qml
index 54b3afb9..40f71b53 100644
--- a/src/imports/controls/imagine/Menu.qml
+++ b/src/imports/controls/imagine/Menu.qml
@@ -58,6 +58,11 @@ T.Menu {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     delegate: MenuItem { }
 
     contentItem: ListView {
@@ -72,10 +77,6 @@ T.Menu {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "menu-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/MenuItem.qml b/src/imports/controls/imagine/MenuItem.qml
index 5f5caeda..58dc344a 100644
--- a/src/imports/controls/imagine/MenuItem.qml
+++ b/src/imports/controls/imagine/MenuItem.qml
@@ -57,6 +57,11 @@ T.MenuItem {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.windowText
@@ -117,10 +122,6 @@ T.MenuItem {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "menuitem-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/MenuSeparator.qml b/src/imports/controls/imagine/MenuSeparator.qml
index 5904eb1f..3821a15a 100644
--- a/src/imports/controls/imagine/MenuSeparator.qml
+++ b/src/imports/controls/imagine/MenuSeparator.qml
@@ -52,6 +52,11 @@ T.MenuSeparator {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: NinePatchImage {
         source: Imagine.url + "menuseparator-separator"
         NinePatchImageSelector on source {
@@ -63,10 +68,6 @@ T.MenuSeparator {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "menuseparator-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Page.qml b/src/imports/controls/imagine/Page.qml
index 40a7050e..2fe6a01d 100644
--- a/src/imports/controls/imagine/Page.qml
+++ b/src/imports/controls/imagine/Page.qml
@@ -56,11 +56,12 @@ T.Page {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
-    background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
 
+    background: NinePatchImage {
         source: Imagine.url + "page-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/PageIndicator.qml b/src/imports/controls/imagine/PageIndicator.qml
index faeaebc6..7e9f43fe 100644
--- a/src/imports/controls/imagine/PageIndicator.qml
+++ b/src/imports/controls/imagine/PageIndicator.qml
@@ -52,6 +52,11 @@ T.PageIndicator {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     delegate: Image {
         source: Imagine.url + "pageindicator-delegate"
         ImageSelector on source {
@@ -75,10 +80,6 @@ T.PageIndicator {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "pageindicator-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Pane.qml b/src/imports/controls/imagine/Pane.qml
index 4012bd69..f794666e 100644
--- a/src/imports/controls/imagine/Pane.qml
+++ b/src/imports/controls/imagine/Pane.qml
@@ -52,11 +52,12 @@ T.Pane {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
-    background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
 
+    background: NinePatchImage {
         source: Imagine.url + "pane-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Popup.qml b/src/imports/controls/imagine/Popup.qml
index ea6ddfa4..12b8300b 100644
--- a/src/imports/controls/imagine/Popup.qml
+++ b/src/imports/controls/imagine/Popup.qml
@@ -52,11 +52,12 @@ T.Popup {
     rightPadding: background ? background.rightPadding : undefined
     bottomPadding: background ? background.bottomPadding : undefined
 
-    background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
 
+    background: NinePatchImage {
         source: Imagine.url + "popup-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ProgressBar.qml b/src/imports/controls/imagine/ProgressBar.qml
index 3e8609d4..c809f308 100644
--- a/src/imports/controls/imagine/ProgressBar.qml
+++ b/src/imports/controls/imagine/ProgressBar.qml
@@ -53,6 +53,11 @@ T.ProgressBar {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: Item {
         implicitWidth: control.indeterminate ? animation.implicitWidth || progress.implicitWidth : progress.implicitWidth
         implicitHeight: control.indeterminate ? animation.implicitHeight || progress.implicitHeight : progress.implicitHeight
@@ -124,10 +129,6 @@ T.ProgressBar {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "progressbar-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/RadioButton.qml b/src/imports/controls/imagine/RadioButton.qml
index ca867637..6ba36d8a 100644
--- a/src/imports/controls/imagine/RadioButton.qml
+++ b/src/imports/controls/imagine/RadioButton.qml
@@ -55,6 +55,11 @@ T.RadioButton {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     indicator: Image {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
@@ -84,10 +89,6 @@ T.RadioButton {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "radiobutton-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/RadioDelegate.qml b/src/imports/controls/imagine/RadioDelegate.qml
index fc51a571..c3febde2 100644
--- a/src/imports/controls/imagine/RadioDelegate.qml
+++ b/src/imports/controls/imagine/RadioDelegate.qml
@@ -57,6 +57,11 @@ T.RadioDelegate {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.text
@@ -95,10 +100,6 @@ T.RadioDelegate {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "radiodelegate-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/RangeSlider.qml b/src/imports/controls/imagine/RangeSlider.qml
index fa7fdda0..5461cf01 100644
--- a/src/imports/controls/imagine/RangeSlider.qml
+++ b/src/imports/controls/imagine/RangeSlider.qml
@@ -54,6 +54,11 @@ T.RangeSlider {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     first.handle: Image {
         x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
@@ -93,9 +98,6 @@ T.RangeSlider {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
         scale: control.horizontal && control.mirrored ? -1 : 1
 
         source: Imagine.url + "rangeslider-background"
diff --git a/src/imports/controls/imagine/RoundButton.qml b/src/imports/controls/imagine/RoundButton.qml
index e696a504..718faad4 100644
--- a/src/imports/controls/imagine/RoundButton.qml
+++ b/src/imports/controls/imagine/RoundButton.qml
@@ -54,6 +54,11 @@ T.RoundButton {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.enabled && control.flat && control.highlighted ? control.palette.highlight
@@ -74,10 +79,6 @@ T.RoundButton {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         // ### TODO: radius?
         source: Imagine.url + "roundbutton-background"
         NinePatchImageSelector on source {
diff --git a/src/imports/controls/imagine/ScrollBar.qml b/src/imports/controls/imagine/ScrollBar.qml
index 8301063f..b7acf416 100644
--- a/src/imports/controls/imagine/ScrollBar.qml
+++ b/src/imports/controls/imagine/ScrollBar.qml
@@ -54,6 +54,11 @@ T.ScrollBar {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: NinePatchImage {
         width: control.availableWidth
         height: control.availableHeight
@@ -74,10 +79,6 @@ T.ScrollBar {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "scrollbar-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ScrollIndicator.qml b/src/imports/controls/imagine/ScrollIndicator.qml
index 7b90cfc1..fd1effa3 100644
--- a/src/imports/controls/imagine/ScrollIndicator.qml
+++ b/src/imports/controls/imagine/ScrollIndicator.qml
@@ -52,6 +52,11 @@ T.ScrollIndicator {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: NinePatchImage {
         width: control.availableWidth
         height: control.availableHeight
@@ -70,10 +75,6 @@ T.ScrollIndicator {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "scrollindicator-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ScrollView.qml b/src/imports/controls/imagine/ScrollView.qml
index be1da69b..64fd3ac5 100644
--- a/src/imports/controls/imagine/ScrollView.qml
+++ b/src/imports/controls/imagine/ScrollView.qml
@@ -53,6 +53,11 @@ T.ScrollView {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     T.ScrollBar.vertical: ScrollBar {
         parent: control
         x: control.mirrored ? 0 : control.width - width
@@ -70,10 +75,6 @@ T.ScrollView {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.path + "scrollview-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Slider.qml b/src/imports/controls/imagine/Slider.qml
index 75a7aaf0..f39bab70 100644
--- a/src/imports/controls/imagine/Slider.qml
+++ b/src/imports/controls/imagine/Slider.qml
@@ -52,6 +52,11 @@ T.Slider {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     handle: Image {
         x: Math.round(control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2))
         y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)))
@@ -71,9 +76,6 @@ T.Slider {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
         scale: control.horizontal && control.mirrored ? -1 : 1
 
         source: Imagine.url + "slider-background"
diff --git a/src/imports/controls/imagine/SpinBox.qml b/src/imports/controls/imagine/SpinBox.qml
index b7aed75d..866db7fc 100644
--- a/src/imports/controls/imagine/SpinBox.qml
+++ b/src/imports/controls/imagine/SpinBox.qml
@@ -56,6 +56,11 @@ T.SpinBox {
     rightPadding: (background ? background.rightPadding : 0) + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     validator: IntValidator {
         locale: control.locale.name
         bottom: Math.min(control.from, control.to)
@@ -133,10 +138,6 @@ T.SpinBox {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "spinbox-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/StackView.qml b/src/imports/controls/imagine/StackView.qml
index 563a84af..302816d7 100644
--- a/src/imports/controls/imagine/StackView.qml
+++ b/src/imports/controls/imagine/StackView.qml
@@ -50,6 +50,11 @@ T.StackView {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     popEnter: Transition {
         XAnimator { from: (control.mirrored ? -1 : 1) * -control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
     }
@@ -75,10 +80,6 @@ T.StackView {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "stackview-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/SwipeDelegate.qml b/src/imports/controls/imagine/SwipeDelegate.qml
index f8006075..be1a378e 100644
--- a/src/imports/controls/imagine/SwipeDelegate.qml
+++ b/src/imports/controls/imagine/SwipeDelegate.qml
@@ -57,6 +57,11 @@ T.SwipeDelegate {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.text
@@ -76,10 +81,6 @@ T.SwipeDelegate {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "swipedelegate-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/SwipeView.qml b/src/imports/controls/imagine/SwipeView.qml
index 5b1a0ae6..6c946715 100644
--- a/src/imports/controls/imagine/SwipeView.qml
+++ b/src/imports/controls/imagine/SwipeView.qml
@@ -52,6 +52,11 @@ T.SwipeView {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: ListView {
         model: control.contentModel
         interactive: control.interactive
@@ -69,10 +74,6 @@ T.SwipeView {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "swipeview-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Switch.qml b/src/imports/controls/imagine/Switch.qml
index 3d1d30a0..2a144c85 100644
--- a/src/imports/controls/imagine/Switch.qml
+++ b/src/imports/controls/imagine/Switch.qml
@@ -55,6 +55,11 @@ T.Switch {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     indicator: NinePatchImage {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
@@ -114,10 +119,6 @@ T.Switch {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "switch-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/SwitchDelegate.qml b/src/imports/controls/imagine/SwitchDelegate.qml
index 066fae58..a4f7e93e 100644
--- a/src/imports/controls/imagine/SwitchDelegate.qml
+++ b/src/imports/controls/imagine/SwitchDelegate.qml
@@ -57,6 +57,11 @@ T.SwitchDelegate {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.text
@@ -126,10 +131,6 @@ T.SwitchDelegate {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "switchdelegate-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/TabBar.qml b/src/imports/controls/imagine/TabBar.qml
index 50e18c5b..20802da0 100644
--- a/src/imports/controls/imagine/TabBar.qml
+++ b/src/imports/controls/imagine/TabBar.qml
@@ -52,6 +52,11 @@ T.TabBar {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: ListView {
         model: control.contentModel
         currentIndex: control.currentIndex
@@ -69,10 +74,6 @@ T.TabBar {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "tabbar-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/TabButton.qml b/src/imports/controls/imagine/TabButton.qml
index f719b545..71cd021f 100644
--- a/src/imports/controls/imagine/TabButton.qml
+++ b/src/imports/controls/imagine/TabButton.qml
@@ -56,6 +56,11 @@ T.TabButton {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.buttonText
@@ -72,10 +77,6 @@ T.TabButton {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "tabbutton-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/TextArea.qml b/src/imports/controls/imagine/TextArea.qml
index dbbc7c35..c50b2f18 100644
--- a/src/imports/controls/imagine/TextArea.qml
+++ b/src/imports/controls/imagine/TextArea.qml
@@ -56,6 +56,11 @@ T.TextArea {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     color: control.palette.text
     selectionColor: control.palette.highlight
     selectedTextColor: control.palette.highlightedText
@@ -78,10 +83,6 @@ T.TextArea {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "textarea-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/TextField.qml b/src/imports/controls/imagine/TextField.qml
index 362df105..94298fbc 100644
--- a/src/imports/controls/imagine/TextField.qml
+++ b/src/imports/controls/imagine/TextField.qml
@@ -55,6 +55,11 @@ T.TextField {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     color: control.palette.text
     selectionColor: control.palette.highlight
     selectedTextColor: control.palette.highlightedText
@@ -77,10 +82,6 @@ T.TextField {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "textfield-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ToolBar.qml b/src/imports/controls/imagine/ToolBar.qml
index 2b764c8f..f1cb3768 100644
--- a/src/imports/controls/imagine/ToolBar.qml
+++ b/src/imports/controls/imagine/ToolBar.qml
@@ -52,11 +52,12 @@ T.ToolBar {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
-    background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
 
+    background: NinePatchImage {
         source: Imagine.url + "toolbar-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ToolButton.qml b/src/imports/controls/imagine/ToolButton.qml
index 7a2e2235..e41c2cf8 100644
--- a/src/imports/controls/imagine/ToolButton.qml
+++ b/src/imports/controls/imagine/ToolButton.qml
@@ -56,6 +56,11 @@ T.ToolButton {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     icon.width: 24
     icon.height: 24
     icon.color: control.palette.buttonText
@@ -72,10 +77,6 @@ T.ToolButton {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "toolbutton-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ToolSeparator.qml b/src/imports/controls/imagine/ToolSeparator.qml
index e617c504..8961b259 100644
--- a/src/imports/controls/imagine/ToolSeparator.qml
+++ b/src/imports/controls/imagine/ToolSeparator.qml
@@ -52,6 +52,11 @@ T.ToolSeparator {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     contentItem: NinePatchImage {
         source: Imagine.url + "toolseparator-separator"
         NinePatchImageSelector on source {
@@ -65,10 +70,6 @@ T.ToolSeparator {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "toolseparator-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/ToolTip.qml b/src/imports/controls/imagine/ToolTip.qml
index ba33f400..2bcb4fa8 100644
--- a/src/imports/controls/imagine/ToolTip.qml
+++ b/src/imports/controls/imagine/ToolTip.qml
@@ -60,6 +60,11 @@ T.ToolTip {
     rightPadding: background ? background.rightPadding : 0
     bottomPadding: background ? background.bottomPadding : 0
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
 
     contentItem: Text {
@@ -70,10 +75,6 @@ T.ToolTip {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "tooltip-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/Tumbler.qml b/src/imports/controls/imagine/Tumbler.qml
index 792d5246..80e8eb1f 100644
--- a/src/imports/controls/imagine/Tumbler.qml
+++ b/src/imports/controls/imagine/Tumbler.qml
@@ -49,6 +49,11 @@ T.Tumbler {
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding) || 200 // ### remove 200 in Qt 6
 
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
     delegate: Text {
         text: modelData
         font: control.font
@@ -76,10 +81,6 @@ T.Tumbler {
     }
 
     background: NinePatchImage {
-        x: -leftInset; y: -topInset
-        width: control.width + leftInset + rightInset
-        height: control.height + topInset + bottomInset
-
         source: Imagine.url + "tumbler-background"
         NinePatchImageSelector on source {
             states: [
diff --git a/src/imports/controls/imagine/qquickninepatchimage.cpp b/src/imports/controls/imagine/qquickninepatchimage.cpp
index 9e1b82bf..c840c6f8 100644
--- a/src/imports/controls/imagine/qquickninepatchimage.cpp
+++ b/src/imports/controls/imagine/qquickninepatchimage.cpp
@@ -192,9 +192,6 @@ public:
     void updatePaddings(const QSizeF &size, const QVector<qreal> &horizontal, const QVector<qreal> &vertical);
     void updateInsets(const QVector<qreal> &horizontal, const QVector<qreal> &vertical);
 
-    qreal getImplicitWidth() const override;
-    qreal getImplicitHeight() const override;
-
     bool resetNode = false;
     qreal topPadding = 0;
     qreal leftPadding = 0;
@@ -332,18 +329,6 @@ void QQuickNinePatchImagePrivate::updateInsets(const QVector<qreal> &horizontal,
         emit q->rightInsetChanged();
 }
 
-qreal QQuickNinePatchImagePrivate::getImplicitWidth() const
-{
-    Q_Q(const QQuickNinePatchImage);
-    return implicitWidth - q->leftInset() - q->rightInset();
-}
-
-qreal QQuickNinePatchImagePrivate::getImplicitHeight() const
-{
-    Q_Q(const QQuickNinePatchImage);
-    return implicitHeight - q->topInset() - q->bottomInset();
-}
-
 QQuickNinePatchImage::QQuickNinePatchImage(QQuickItem *parent)
     : QQuickImage(*(new QQuickNinePatchImagePrivate), parent)
 {