Add SwitchDelegate

SwitchDelegate is an item delegate that is used in lists, and can be
checked and unchecked. It derives from QQuickItemDelegate and hence has
background press effects. The order of the indicator and text is
reversed (compared to Switch) to reflect what is most commonly
seen on mobile.

Change-Id: I6f8fca8d1a8c91f2cb9d8bbbb685ad163712dfa1
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

26 files changed, 740 insertions, 107 deletions

diff --git a/src/imports/controls/Switch.qml b/src/imports/controls/Switch.qml
index cf9c0361..3c831fd5 100644
--- a/src/imports/controls/Switch.qml
+++ b/src/imports/controls/Switch.qml
@@ -36,6 +36,7 @@
 
 import QtQuick 2.6
 import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.impl 1.0
 
 T.Switch {
     id: control
@@ -51,37 +52,10 @@ T.Switch {
     spacing: 6
 
     //! [indicator]
-    indicator: Item {
+    indicator: SwitchIndicator {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-        implicitWidth: 56
-        implicitHeight: 28
-
-        Rectangle {
-            y: parent.height / 2 - height / 2
-            width: 56
-            height: 16
-            radius: 8
-            color: control.checked ? (control.activeKeyFocus ? "#0066ff" : "#353637") : "transparent"
-            border.width: control.activeKeyFocus ? 2 : 1
-            border.color: control.checked ? "transparent" : (control.activeKeyFocus ? "#0066ff" : "#353637")
-        }
-
-        Rectangle {
-            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
-            y: (parent.height - height) / 2
-            width: 28
-            height: 28
-            radius: 16
-            color: control.pressed ? (control.activeKeyFocus ? "#cce0ff" : "#e4e4e4") : (control.activeKeyFocus ? "#f0f6ff" : "#f6f6f6")
-            border.width: control.activeKeyFocus ? 2 : 1
-            border.color: control.activeKeyFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")
-
-            Behavior on x {
-                enabled: !control.pressed
-                SmoothedAnimation { velocity: 200 }
-            }
-        }
+        control: control
     }
     //! [indicator]
 
diff --git a/src/imports/controls/SwitchDelegate.qml b/src/imports/controls/SwitchDelegate.qml
new file mode 100644
index 00000000..b378dbce
--- /dev/null
+++ b/src/imports/controls/SwitchDelegate.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.impl 1.0
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             Math.max(contentItem.implicitHeight,
+                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    padding: 12
+    spacing: 12
+
+    //! [indicator]
+    indicator: SwitchIndicator {
+        x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+    //! [indicator]
+
+    //! [contentItem]
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.indicator && control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? "#26282a" : "#bdbebf"
+        elide: Text.ElideRight
+        visible: control.text
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.pressed || control.highlighted
+        color: control.pressed ? "#bdbebf" : "#eeeeee"
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/SwitchIndicator.qml b/src/imports/controls/SwitchIndicator.qml
new file mode 100644
index 00000000..a5521258
--- /dev/null
+++ b/src/imports/controls/SwitchIndicator.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+
+Item {
+    implicitWidth: 56
+    implicitHeight: 28
+
+    property Item control
+
+    Rectangle {
+        y: parent.height / 2 - height / 2
+        width: 56
+        height: 16
+        radius: 8
+        color: control.checked ? (control.activeFocus ? "#0066ff" : "#353637") : "#ffffff"
+        border.width: control.activeFocus ? 2 : 1
+        border.color: control.checked ? "transparent" : (control.activeFocus ? "#0066ff" : "#353637")
+    }
+
+    Rectangle {
+        x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
+        y: (parent.height - height) / 2
+        width: 28
+        height: 28
+        radius: 16
+        color: control.pressed ? (control.activeFocus ? "#cce0ff" : "#e4e4e4") : (control.activeFocus ? "#f0f6ff" : "#f6f6f6")
+        border.width: control.activeFocus ? 2 : 1
+        border.color: control.activeFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")
+
+        Behavior on x {
+            enabled: !control.pressed
+            SmoothedAnimation { velocity: 200 }
+        }
+    }
+}
diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri
index e71c7106..5c32824b 100644
--- a/src/imports/controls/controls.pri
+++ b/src/imports/controls/controls.pri
@@ -38,6 +38,8 @@ QML_CONTROLS = \
     StackView.qml \
     SwipeDelegate.qml \
     Switch.qml \
+    SwitchIndicator.qml \
+    SwitchDelegate.qml \
     SwipeView.qml \
     TabBar.qml \
     TabButton.qml \
diff --git a/src/imports/controls/designer/SwitchDelegateSpecifics.qml b/src/imports/controls/designer/SwitchDelegateSpecifics.qml
new file mode 100644
index 00000000..d5178a6f
--- /dev/null
+++ b/src/imports/controls/designer/SwitchDelegateSpecifics.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+Column {
+    width: parent.width
+
+    ButtonSection {
+        caption: qsTr("Switch Delegate")
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-background.png b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-background.png
new file mode 100644
index 00000000..e53141ac
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-background.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-contentItem.png b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-contentItem.png
new file mode 100644
index 00000000..e12be69a
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-contentItem.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-indicator.png b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-indicator.png
new file mode 100644
index 00000000..33c15cdf
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate-indicator.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols-switchdelegate.gif b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate.gif
new file mode 100644
index 00000000..950b1073
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-switchdelegate.gif
diff --git a/src/imports/controls/doc/qtquickcontrols2.qdocconf b/src/imports/controls/doc/qtquickcontrols2.qdocconf
index 64985392..3466d457 100644
--- a/src/imports/controls/doc/qtquickcontrols2.qdocconf
+++ b/src/imports/controls/doc/qtquickcontrols2.qdocconf
@@ -43,7 +43,8 @@ headerdirs += ../../../templates \
 
 sourcedirs += ../../../templates \
               ../../calendar \
-              ../../../controls
+              ../../../controls \
+              src
 
 imagedirs += images
 
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-background.qml b/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-background.qml
new file mode 100644
index 00000000..65342e74
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-background.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.controls 1.0
+
+SwitchDelegate {
+    text: "SwitchDelegate"
+    checked: true
+    background: Rectangle {
+        color: 'transparent'
+        border.color: 'red'
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-contentItem.qml b/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-contentItem.qml
new file mode 100644
index 00000000..2aeb9082
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-contentItem.qml
@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.controls 1.0
+
+SwitchDelegate {
+    text: "SwitchDelegate"
+    checked: true
+    Rectangle {
+        anchors.fill: contentItem
+        color: "transparent"
+        border.color: "red"
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-indicator.qml b/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-indicator.qml
new file mode 100644
index 00000000..258a011a
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-switchdelegate-indicator.qml
@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.controls 1.0
+
+SwitchDelegate {
+    text: "SwitchDelegate"
+    checked: true
+    Rectangle {
+        anchors.fill: indicator
+        color: "transparent"
+        border.color: "red"
+    }
+}
diff --git a/src/imports/controls/doc/src/includes/qquickswitch.qdocinc b/src/imports/controls/doc/src/includes/qquickswitch.qdocinc
new file mode 100644
index 00000000..aee93a26
--- /dev/null
+++ b/src/imports/controls/doc/src/includes/qquickswitch.qdocinc
@@ -0,0 +1,28 @@
+//! [position]
+
+This property holds the logical position of the thumb indicator.
+
+The position is defined as a percentage of the indicator's size, scaled to
+\c 0.0 - \c 1.0. The position can be used for example to determine whether
+the thumb has been dragged past the halfway. For visualizing a thumb
+indicator, the right-to-left aware \l visualPosition should be used instead.
+
+\sa visualPosition
+
+//! [position]
+
+
+//! [visualPosition]
+
+This property holds the visual position of the thumb indicator.
+
+The position is defined as a percentage of the indicator's size, scaled to
+\c 0.0 - \c 1.0. When the control is \l {Control::mirrored}{mirrored}, the
+value is equal to \c {1.0 - position}. This makes the value suitable for
+visualizing the thumb indicator taking right-to-left support into account.
+In order to for example determine whether the thumb has been dragged past
+the halfway, the logical \l position should be used instead.
+
+\sa position
+
+//! [visualPosition]
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
index 4975ac24..4204de4b 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
@@ -566,6 +566,29 @@
 
             \snippet Switch.qml indicator
 
+    \section1 Customizing SwitchDelegate
+
+        SwitchDelegate consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
+
+        \section3 Background
+
+            \image qtquickcontrols-switchdelegate-background.png
+
+            \snippet SwitchDelegate.qml background
+
+        \section3 Content item
+
+            \image qtquickcontrols-switchdelegate-contentItem.png
+
+            \snippet SwitchDelegate.qml contentItem
+
+        \section3 Indicator
+
+            \image qtquickcontrols-switchdelegate-indicator.png
+
+            \snippet SwitchDelegate.qml indicator
+
     \section1 Customizing TabBar
 
         TODO
diff --git a/src/imports/controls/material/Switch.qml b/src/imports/controls/material/Switch.qml
index 2ff71644..d130a9ce 100644
--- a/src/imports/controls/material/Switch.qml
+++ b/src/imports/controls/material/Switch.qml
@@ -38,7 +38,6 @@ import QtQuick 2.6
 import Qt.labs.controls.material 1.0
 import Qt.labs.controls.material.impl 1.0
 import Qt.labs.templates 1.0 as T
-import QtGraphicalEffects 1.0
 
 T.Switch {
     id: control
@@ -54,55 +53,10 @@ T.Switch {
     spacing: 8
 
     //! [indicator]
-    indicator: Item {
+    indicator: SwitchIndicator {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-        implicitWidth: 38
-        implicitHeight: 32
-
-        Ripple {
-            x: handle.x + handle.width / 2 - width / 2
-            y: handle.y + handle.height / 2 - height / 2
-            width: handle.width
-            height: width
-            control: control
-            colored: control.checked
-            opacity: control.pressed || control.activeKeyFocus ? 1 : 0
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 14
-            radius: height / 2
-            y: parent.height / 2 - height / 2
-            color: control.enabled ? (control.checked ? control.Material.switchCheckedTrackColor : control.Material.switchUncheckedTrackColor)
-                                   : control.Material.switchDisabledTrackColor
-        }
-
-        Rectangle {
-            id: handle
-            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
-            y: (parent.height - height) / 2
-            width: 20
-            height: 20
-            radius: width / 2
-            color: control.enabled ? (control.checked ? control.Material.switchCheckedHandleColor : control.Material.switchUncheckedHandleColor)
-                                   : control.Material.switchDisabledHandleColor
-
-            Behavior on x {
-                enabled: !control.pressed
-                SmoothedAnimation {
-                    duration: 300
-                }
-            }
-
-            layer.enabled: true
-            layer.effect: DropShadow {
-                verticalOffset: 1
-                color: control.Material.dropShadowColor
-                spread: 0.3
-            }
-        }
+        control: control
     }
     //! [indicator]
 
diff --git a/src/imports/controls/material/SwitchDelegate.qml b/src/imports/controls/material/SwitchDelegate.qml
new file mode 100644
index 00000000..e989ab9c
--- /dev/null
+++ b/src/imports/controls/material/SwitchDelegate.qml
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.material 1.0
+import Qt.labs.controls.material.impl 1.0
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             Math.max(contentItem.implicitHeight,
+                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    padding: 16
+    spacing: 16
+
+    //! [indicator]
+    indicator: SwitchIndicator {
+        x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+    //! [indicator]
+
+    //! [contentItem]
+    contentItem: Text {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.primaryTextColor : control.Material.hintTextColor
+        elide: Text.ElideRight
+        visible: control.text
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        visible: control.pressed || control.highlighted
+        color: control.pressed ? control.Material.flatButtonPressColor : control.Material.listHighlightColor
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/material/SwitchIndicator.qml b/src/imports/controls/material/SwitchIndicator.qml
new file mode 100644
index 00000000..cc026d74
--- /dev/null
+++ b/src/imports/controls/material/SwitchIndicator.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import QtGraphicalEffects 1.0
+import Qt.labs.controls.material 1.0
+import Qt.labs.controls.material.impl 1.0
+
+Item {
+    implicitWidth: 38
+    implicitHeight: 32
+
+    property alias control: ripple.control
+
+    Ripple {
+        id: ripple
+        x: handle.x + handle.width / 2 - width / 2
+        y: handle.y + handle.height / 2 - height / 2
+        width: handle.width
+        height: width
+        colored: control.checked
+        opacity: control.pressed || control.activeKeyFocus ? 1 : 0
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 14
+        radius: height / 2
+        y: parent.height / 2 - height / 2
+        color: control.enabled ? (control.checked ? control.Material.switchCheckedTrackColor : control.Material.switchUncheckedTrackColor)
+                               : control.Material.switchDisabledTrackColor
+    }
+
+    Rectangle {
+        id: handle
+        x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
+        y: (parent.height - height) / 2
+        width: 20
+        height: 20
+        radius: width / 2
+        color: control.enabled ? (control.checked ? control.Material.switchCheckedHandleColor : control.Material.switchUncheckedHandleColor)
+                               : control.Material.switchDisabledHandleColor
+
+        Behavior on x {
+            enabled: !control.pressed
+            SmoothedAnimation {
+                duration: 300
+            }
+        }
+
+        layer.enabled: true
+        layer.effect: DropShadow {
+            verticalOffset: 1
+            color: control.Material.dropShadowColor
+            spread: 0.3
+        }
+    }
+}
diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri
index 6ab08d31..c1d6b66b 100644
--- a/src/imports/controls/material/material.pri
+++ b/src/imports/controls/material/material.pri
@@ -45,6 +45,8 @@ QML_FILES += \
     $$PWD/SwipeDelegate.qml \
     $$PWD/SwipeView.qml \
     $$PWD/Switch.qml \
+    $$PWD/SwitchDelegate.qml \
+    $$PWD/SwitchIndicator.qml \
     $$PWD/TabBar.qml \
     $$PWD/TabButton.qml \
     $$PWD/TextArea.qml \
diff --git a/src/imports/controls/material/qtquickmaterialstyleplugin.cpp b/src/imports/controls/material/qtquickmaterialstyleplugin.cpp
index f56b6885..8dca71fd 100644
--- a/src/imports/controls/material/qtquickmaterialstyleplugin.cpp
+++ b/src/imports/controls/material/qtquickmaterialstyleplugin.cpp
@@ -93,6 +93,7 @@ void QtQuickMaterialStylePlugin::initializeEngine(QQmlEngine *engine, const char
     qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/CheckIndicator.qml")), import, 1, 0, "CheckIndicator");
     qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/Ripple.qml")), import, 1, 0, "Ripple");
     qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/SliderHandle.qml")), import, 1, 0, "SliderHandle");
+    qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/SwitchIndicator.qml")), import, 1, 0, "SwitchIndicator");
 }
 
 QString QtQuickMaterialStylePlugin::name() const
diff --git a/src/imports/controls/qtquickcontrolsplugin.cpp b/src/imports/controls/qtquickcontrolsplugin.cpp
index 1d611c79..e8b1e386 100644
--- a/src/imports/controls/qtquickcontrolsplugin.cpp
+++ b/src/imports/controls/qtquickcontrolsplugin.cpp
@@ -123,6 +123,7 @@ void QtQuickControlsPlugin::registerTypes(const char *uri)
     qmlRegisterType(selector.select(QStringLiteral("SwipeDelegate.qml")), uri, 1, 0, "SwipeDelegate");
     qmlRegisterType(selector.select(QStringLiteral("SwipeView.qml")), uri, 1, 0, "SwipeView");
     qmlRegisterType(selector.select(QStringLiteral("Switch.qml")), uri, 1, 0, "Switch");
+    qmlRegisterType(selector.select(QStringLiteral("SwitchDelegate.qml")), uri, 1, 0, "SwitchDelegate");
     qmlRegisterType(selector.select(QStringLiteral("TabBar.qml")), uri, 1, 0, "TabBar");
     qmlRegisterType(selector.select(QStringLiteral("TabButton.qml")), uri, 1, 0, "TabButton");
     qmlRegisterType(selector.select(QStringLiteral("TextArea.qml")), uri, 1, 0, "TextArea");
@@ -147,6 +148,7 @@ void QtQuickControlsPlugin::initializeEngine(QQmlEngine *engine, const char *uri
     const QString pluginBasePath = QQuickPluginUtils::pluginBasePath(*this);
     qmlRegisterType(pluginBasePath + QStringLiteral("/CheckIndicator.qml"), import, 1, 0, "CheckIndicator");
     qmlRegisterType(pluginBasePath + QStringLiteral("/RadioIndicator.qml"), import, 1, 0, "RadioIndicator");
+    qmlRegisterType(pluginBasePath + QStringLiteral("/SwitchIndicator.qml"), import, 1, 0, "SwitchIndicator");
 }
 
 QT_END_NAMESPACE
diff --git a/src/imports/controls/universal/Switch.qml b/src/imports/controls/universal/Switch.qml
index dbbb3112..9dfbbc43 100644
--- a/src/imports/controls/universal/Switch.qml
+++ b/src/imports/controls/universal/Switch.qml
@@ -54,37 +54,10 @@ T.Switch {
     property bool useSystemFocusVisuals: true
 
     //! [indicator]
-    indicator: Rectangle {
-        implicitWidth: 44
-        implicitHeight: 20
+    indicator: SwitchIndicator {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-
-        radius: 10
-        color: !control.enabled ? "transparent" :
-                control.pressed ? control.Universal.baseMediumColor :
-                control.checked ? control.Universal.accent : "transparent"
-        border.color: !control.enabled ? control.Universal.baseLowColor :
-                       control.checked && !control.pressed ? control.Universal.accent : control.Universal.baseMediumColor
-        border.width: 2
-
-        Rectangle {
-            width: 10
-            height: 10
-            radius: 5
-
-            color: !control.enabled ? control.Universal.baseLowColor :
-                    control.pressed || control.checked ? control.Universal.chromeWhiteColor : control.Universal.baseMediumHighColor
-
-            x: Math.max(5, Math.min(parent.width - width - 5,
-                                    control.visualPosition * parent.width - (width / 2)))
-            y: (parent.height - height) / 2
-
-            Behavior on x {
-                enabled: !control.pressed
-                SmoothedAnimation { velocity: 200 }
-            }
-        }
+        control: control
     }
     //! [indicator]
 
diff --git a/src/imports/controls/universal/SwitchDelegate.qml b/src/imports/controls/universal/SwitchDelegate.qml
new file mode 100644
index 00000000..37567baa
--- /dev/null
+++ b/src/imports/controls/universal/SwitchDelegate.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.universal 1.0
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             Math.max(contentItem.implicitHeight,
+                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    spacing: 12
+
+    topPadding: 11
+    leftPadding: 12
+    rightPadding: 12
+    bottomPadding: 13
+
+    //! [indicator]
+    indicator: SwitchIndicator {
+        x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+    //! [indicator]
+
+    //! [contentItem]
+    contentItem: Text {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        visible: control.text
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+
+        color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        visible: control.pressed || control.highlighted || control.activeFocus
+        color: control.pressed ? control.Universal.listMediumColor : control.Universal.altMediumLowColor
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.activeFocus || control.highlighted
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/universal/SwitchIndicator.qml b/src/imports/controls/universal/SwitchIndicator.qml
new file mode 100644
index 00000000..73ccc0d5
--- /dev/null
+++ b/src/imports/controls/universal/SwitchIndicator.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.universal 1.0
+
+Rectangle {
+    implicitWidth: 44
+    implicitHeight: 20
+
+    radius: 10
+    color: !control.enabled ? "transparent" :
+            control.pressed ? control.Universal.baseMediumColor :
+            control.checked ? control.Universal.accent : "transparent"
+    border.color: !control.enabled ? control.Universal.baseLowColor :
+                   control.checked && !control.pressed ? control.Universal.accent : control.Universal.baseMediumColor
+    border.width: 2
+
+    property Item control
+
+    Rectangle {
+        width: 10
+        height: 10
+        radius: 5
+
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.pressed || control.checked ? control.Universal.chromeWhiteColor : control.Universal.baseMediumHighColor
+
+        x: Math.max(5, Math.min(parent.width - width - 5,
+                                control.visualPosition * parent.width - (width / 2)))
+        y: (parent.height - height) / 2
+
+        Behavior on x {
+            enabled: !control.pressed
+            SmoothedAnimation { velocity: 200 }
+        }
+    }
+}
diff --git a/src/imports/controls/universal/qtquickuniversalstyleplugin.cpp b/src/imports/controls/universal/qtquickuniversalstyleplugin.cpp
index 31aaa7d4..addd65f4 100644
--- a/src/imports/controls/universal/qtquickuniversalstyleplugin.cpp
+++ b/src/imports/controls/universal/qtquickuniversalstyleplugin.cpp
@@ -95,6 +95,7 @@ void QtQuickUniversalStylePlugin::initializeEngine(QQmlEngine *engine, const cha
 
     const QString pluginBasePath = QQuickPluginUtils::pluginBasePath(*this);
     qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/RadioIndicator.qml")), import, 1, 0, "RadioIndicator");
+    qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/SwitchIndicator.qml")), import, 1, 0, "SwitchIndicator");
 }
 
 QString QtQuickUniversalStylePlugin::name() const
diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri
index ea4f5d43..61b6912a 100644
--- a/src/imports/controls/universal/universal.pri
+++ b/src/imports/controls/universal/universal.pri
@@ -29,6 +29,8 @@ QML_FILES += \
     $$PWD/SpinBox.qml \
     $$PWD/StackView.qml \
     $$PWD/SwipeDelegate.qml \
+    $$PWD/SwitchDelegate.qml \
+    $$PWD/SwitchIndicator.qml \
     $$PWD/Switch.qml \
     $$PWD/TabBar.qml \
     $$PWD/TabButton.qml \