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>

31 files changed, 990 insertions, 125 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 \
diff --git a/src/imports/templates/qtquicktemplatesplugin.cpp b/src/imports/templates/qtquicktemplatesplugin.cpp
index 7959bc34..2329cb0f 100644
--- a/src/imports/templates/qtquicktemplatesplugin.cpp
+++ b/src/imports/templates/qtquicktemplatesplugin.cpp
@@ -70,6 +70,7 @@
 #include <QtQuickTemplates/private/qquickswipedelegate_p.h>
 #include <QtQuickTemplates/private/qquickswipeview_p.h>
 #include <QtQuickTemplates/private/qquickswitch_p.h>
+#include <QtQuickTemplates/private/qquickswitchdelegate_p.h>
 #include <QtQuickTemplates/private/qquicktabbar_p.h>
 #include <QtQuickTemplates/private/qquicktabbutton_p.h>
 #include <QtQuickTemplates/private/qquicktextarea_p.h>
@@ -144,6 +145,7 @@ void QtQuickTemplatesPlugin::registerTypes(const char *uri)
     qmlRegisterType<QQuickSwipeViewAttached>();
     qmlRegisterType<QQuickSwipeView>(uri, 1, 0, "SwipeView");
     qmlRegisterType<QQuickSwitch>(uri, 1, 0, "Switch");
+    qmlRegisterType<QQuickSwitchDelegate>(uri, 1, 0, "SwitchDelegate");
     qmlRegisterType<QQuickTabBar>(uri, 1, 0, "TabBar");
     qmlRegisterType<QQuickTabButton>(uri, 1, 0, "TabButton");
     qmlRegisterType<QQuickTextArea>(uri, 1, 0, "TextArea");
diff --git a/src/templates/qquickswitch.cpp b/src/templates/qquickswitch.cpp
index 8685f617..04281a9e 100644
--- a/src/templates/qquickswitch.cpp
+++ b/src/templates/qquickswitch.cpp
@@ -179,14 +179,7 @@ QQuickSwitch::QQuickSwitch(QQuickItem *parent) :
     \qmlproperty real Qt.labs.controls::Switch::position
     \readonly
 
-    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
+    \input includes/qquickswitch.qdocinc position
 */
 qreal QQuickSwitch::position() const
 {
@@ -210,16 +203,7 @@ void QQuickSwitch::setPosition(qreal position)
     \qmlproperty real Qt.labs.controls::Switch::visualPosition
     \readonly
 
-    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
+    \input includes/qquickswitch.qdocinc visualPosition
 */
 qreal QQuickSwitch::visualPosition() const
 {
diff --git a/src/templates/qquickswitchdelegate.cpp b/src/templates/qquickswitchdelegate.cpp
new file mode 100644
index 00000000..05cee244
--- /dev/null
+++ b/src/templates/qquickswitchdelegate.cpp
@@ -0,0 +1,157 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Templates 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$
+**
+****************************************************************************/
+
+#include "qquickswitchdelegate_p.h"
+
+#include "qquickabstractbutton_p_p.h"
+
+QT_BEGIN_NAMESPACE
+
+/*!
+    \qmltype SwitchDelegate
+    \inherits ItemDelegate
+    \instantiates QQuickSwitchDelegate
+    \inqmlmodule Qt.labs.controls
+    \ingroup qtlabscontrols-delegates
+    \brief An item delegate that can be toggled on or off.
+
+    \image qtquickcontrols-switchdelegate.gif
+
+    SwitchDelegate presents an item delegate that can be toggled on (checked) or
+    off (unchecked). Switch delegates are typically used to select one or more
+    options from a set of options.
+
+    The state of the check delegate can be set with the
+    \l {AbstractButton::}{checked} property.
+
+    \code
+    ListView {
+        model: ["Option 1", "Option 2", "Option 3"]
+        delegate: SwitchDelegate {
+            text: modelData
+        }
+    }
+    \endcode
+
+    \labs
+
+    \sa {Customizing SwitchDelegate}, {Delegate Controls}
+*/
+
+class QQuickSwitchDelegatePrivate : public QQuickAbstractButtonPrivate
+{
+    Q_DECLARE_PUBLIC(QQuickSwitchDelegate)
+
+public:
+    QQuickSwitchDelegatePrivate() :
+        position(0)
+    {
+    }
+
+    void updatePosition();
+    qreal positionAt(const QPoint &point) const;
+
+    qreal position;
+};
+
+void QQuickSwitchDelegatePrivate::updatePosition()
+{
+    Q_Q(QQuickSwitchDelegate);
+    q->setPosition(checked ? 1.0 : 0.0);
+}
+
+qreal QQuickSwitchDelegatePrivate::positionAt(const QPoint &point) const
+{
+    Q_Q(const QQuickSwitchDelegate);
+    qreal pos = point.x() / indicator->width();
+    if (q->isMirrored())
+        return 1.0 - pos;
+    return pos;
+}
+
+QQuickSwitchDelegate::QQuickSwitchDelegate(QQuickItem *parent) :
+    QQuickItemDelegate(*(new QQuickSwitchDelegatePrivate), parent)
+{
+    setCheckable(true);
+
+    QObjectPrivate::connect(this, &QQuickAbstractButton::checkedChanged, d_func(), &QQuickSwitchDelegatePrivate::updatePosition);
+}
+
+/*!
+    \qmlproperty real Qt.labs.controls::SwitchDelegate::position
+    \readonly
+
+    \input includes/qquickswitch.qdocinc position
+*/
+qreal QQuickSwitchDelegate::position() const
+{
+    Q_D(const QQuickSwitchDelegate);
+    return d->position;
+}
+
+void QQuickSwitchDelegate::setPosition(qreal position)
+{
+    Q_D(QQuickSwitchDelegate);
+    position = qBound<qreal>(0.0, position, 1.0);
+    if (qFuzzyCompare(d->position, position))
+        return;
+
+    d->position = position;
+    emit positionChanged();
+    emit visualPositionChanged();
+}
+
+/*!
+    \qmlproperty real Qt.labs.controls::SwitchDelegate::visualPosition
+    \readonly
+
+    \input includes/qquickswitch.qdocinc visualPosition
+*/
+qreal QQuickSwitchDelegate::visualPosition() const
+{
+    Q_D(const QQuickSwitchDelegate);
+    if (isMirrored())
+        return 1.0 - d->position;
+    return d->position;
+}
+
+void QQuickSwitchDelegate::mirrorChange()
+{
+    QQuickItemDelegate::mirrorChange();
+    emit visualPositionChanged();
+}
+
+QT_END_NAMESPACE
diff --git a/src/templates/qquickswitchdelegate_p.h b/src/templates/qquickswitchdelegate_p.h
new file mode 100644
index 00000000..5ea17a1f
--- /dev/null
+++ b/src/templates/qquickswitchdelegate_p.h
@@ -0,0 +1,87 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Templates 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$
+**
+****************************************************************************/
+
+#ifndef QQUICKSWITCHDELEGATE_P_H
+#define QQUICKSWITCHDELEGATE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuickTemplates/private/qquickitemdelegate_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickSwitchDelegatePrivate;
+
+class Q_QUICKTEMPLATES_EXPORT QQuickSwitchDelegate : public QQuickItemDelegate
+{
+    Q_OBJECT
+    Q_PROPERTY(qreal position READ position WRITE setPosition NOTIFY positionChanged FINAL)
+    Q_PROPERTY(qreal visualPosition READ visualPosition NOTIFY visualPositionChanged FINAL)
+
+public:
+    explicit QQuickSwitchDelegate(QQuickItem *parent = nullptr);
+
+    qreal position() const;
+    void setPosition(qreal position);
+
+    qreal visualPosition() const;
+
+Q_SIGNALS:
+    void positionChanged();
+    void visualPositionChanged();
+
+protected:
+    void mirrorChange() override;
+
+private:
+    Q_DISABLE_COPY(QQuickSwitchDelegate)
+    Q_DECLARE_PRIVATE(QQuickSwitchDelegate)
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickSwitchDelegate)
+
+#endif // QQUICKSWITCHDELEGATE_P_H
diff --git a/src/templates/templates.pri b/src/templates/templates.pri
index f98832ae..e16d8b69 100644
--- a/src/templates/templates.pri
+++ b/src/templates/templates.pri
@@ -46,6 +46,7 @@ HEADERS += \
     $$PWD/qquickswipedelegate_p.h \
     $$PWD/qquickswipeview_p.h \
     $$PWD/qquickswitch_p.h \
+    $$PWD/qquickswitchdelegate_p.h \
     $$PWD/qquicktabbar_p.h \
     $$PWD/qquicktabbutton_p.h \
     $$PWD/qquicktextarea_p.h \
@@ -96,6 +97,7 @@ SOURCES += \
     $$PWD/qquickswipedelegate.cpp \
     $$PWD/qquickswipeview.cpp \
     $$PWD/qquickswitch.cpp \
+    $$PWD/qquickswitchdelegate.cpp \
     $$PWD/qquicktabbar.cpp \
     $$PWD/qquicktabbutton.cpp \
     $$PWD/qquicktextarea.cpp \