Add ComboBox

Change-Id: I4cfc2367db92786097a1ce66bd4b5a2f71322a2e
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>

37 files changed, 713 insertions, 0 deletions

diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
new file mode 100644
index 00000000..7f2adcb0
--- /dev/null
+++ b/src/imports/controls/ComboBox.qml
@@ -0,0 +1,133 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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 QtQuick.Window 2.2
+import Qt.labs.templates 1.0 as T
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    spacing: 8
+    padding: 6
+    leftPadding: 8
+    rightPadding: 8
+
+    //! [delegate]
+    delegate: ItemDelegate {
+        width: control.width
+        text: control.textRole ? model[control.textRole] : modelData
+        checkable: true
+        autoExclusive: true
+        checked: control.currentIndex === index
+        highlighted: control.highlightedIndex === index
+        pressed: highlighted && control.pressed
+    }
+    //! [delegate]
+
+    //! [contentItem]
+    contentItem: Text {
+        text: control.displayText
+        font: control.font
+        color: "#ffffff"
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+        rightPadding: 18 + control.spacing
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Item {
+        implicitWidth: 120
+        implicitHeight: 40
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            opacity: control.enabled ? 1.0 : 0.2
+            color: control.pressed || panel.visible ? "#585A5C" : "#353637"
+        }
+
+        Image {
+            x: parent.width - width - control.rightPadding
+            y: (parent.height - height) / 2
+            source: "qrc:/images/drop-indicator.png"
+        }
+    }
+    //! [background]
+
+    //! [panel]
+    panel: T.Panel {
+        id: popup
+        contentItem: Rectangle {
+            // TODO: Panel::anchors
+            readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0)
+            readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0)
+
+            x: below.x
+            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
+            width: control.width
+            height: listview.height
+
+            ListView {
+                id: listview
+                width: control.width
+                height: Math.min(200, contentHeight)
+
+                clip: true
+                model: control.delegateModel
+                currentIndex: control.highlightedIndex
+
+//                ScrollIndicator.vertical: ScrollIndicator { }
+            }
+
+            Rectangle {
+                width: parent.width
+                height: parent.height
+                color: "transparent"
+                border.color: "#353637"
+            }
+        }
+    }
+    //! [panel]
+}
diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri
index 78c9a1d0..63e3373e 100644
--- a/src/imports/controls/controls.pri
+++ b/src/imports/controls/controls.pri
@@ -3,6 +3,7 @@ QML_FILES = \
     BusyIndicator.qml \
     Button.qml \
     CheckBox.qml \
+    ComboBox.qml \
     Dial.qml \
     Drawer.qml \
     Frame.qml \
diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-background.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-background.png
new file mode 100644
index 00000000..fa296270
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-combobox-background.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png
new file mode 100644
index 00000000..9b8e8175
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png
new file mode 100644
index 00000000..88462185
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png
new file mode 100644
index 00000000..0e9eacbf
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox.png b/src/imports/controls/doc/images/qtlabscontrols-combobox.png
new file mode 100644
index 00000000..69fc9c95
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-combobox.png
diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml
new file mode 100644
index 00000000..d6715f07
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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
+
+ComboBox {
+    model: ["ComboBox"]
+    Rectangle {
+        anchors.fill: background
+        color: 'transparent'
+        border.color: 'red'
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml
new file mode 100644
index 00000000..08523088
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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
+
+ComboBox {
+    model: ["ComboBox"]
+    Rectangle {
+        anchors.fill: contentItem
+        color: 'transparent'
+        border.color: 'red'
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml
new file mode 100644
index 00000000..47c4f606
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml
@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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
+
+Item {
+    id: root
+    width: combo.width
+    height: combo.height + combo.panel.contentItem.height
+    ComboBox {
+        id: combo
+        model: ["First", "Second", "Third"]
+        panel.contentItem.parent: root
+        panel.contentItem.y: combo.height
+        delegate: ItemDelegate {
+            width: combo.width
+            text: modelData
+            checkable: true
+            autoExclusive: true
+            checked: combo.currentIndex === index
+            Rectangle {
+                visible: index === 0
+                anchors.fill: parent
+                color: 'transparent'
+                border.color: 'red'
+            }
+        }
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml
new file mode 100644
index 00000000..d1788d55
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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
+
+Item {
+    id: root
+    width: combo.width
+    height: combo.height + combo.panel.contentItem.height
+    ComboBox {
+        id: combo
+        model: ["First", "Second", "Third"]
+        panel.contentItem.parent: root
+        panel.contentItem.y: combo.height
+    }
+    Rectangle {
+        parent: combo.panel.contentItem
+        anchors.fill: parent
+        color: 'transparent'
+        border.color: 'red'
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml
new file mode 100644
index 00000000..bac6136d
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml
@@ -0,0 +1,43 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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
+
+Item {
+    id: root
+    width: combo.width
+    height: combo.height + combo.panel.contentItem.height
+    //! [1]
+    ComboBox {
+        id: combo
+        model: ["First", "Second", "Third"]
+        panel.contentItem.parent: root
+        panel.contentItem.y: combo.height
+    }
+    //! [1]
+}
diff --git a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
index a7bd7d8b..eb1dc71d 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
@@ -95,6 +95,38 @@
 
             \snippet CheckBox.qml indicator
 
+
+    \section1 Customizing ComboBox
+
+        ComboBox consists of \l {Control::background}{background},
+        \l {Control::contentItem}{content item}, \l {ComboBox::panel}{panel},
+        and \l {ComboBox::delegate}{delegate}.
+
+        \section3 Background
+
+            \image qtlabscontrols-combobox-background.png
+
+            \snippet ComboBox.qml background
+
+        \section3 Content item
+
+            \image qtlabscontrols-combobox-contentItem.png
+
+            \snippet ComboBox.qml contentItem
+
+        \section3 Panel
+
+            \image qtlabscontrols-combobox-panel.png
+
+            \snippet ComboBox.qml panel
+
+        \section3 Delegate
+
+            \image qtlabscontrols-combobox-delegate.png
+
+            \snippet ComboBox.qml delegate
+
+
     \section1 Customizing Dial
 
         Dial consists of two visual items: \l {Control::background}{background}
diff --git a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
index 936e65e8..6e486ff0 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
@@ -219,6 +219,9 @@
         \li \l [QtQuickControls] {CheckBox}
         \li \l [QtLabsControls] {CheckBox}
     \row
+        \li \l [QtQuickControls] {ComboBox}
+        \li \l [QtLabsControls] {ComboBox}
+    \row
         \li \l [QtQuickControls] {ExclusiveGroup}
         \li \l [QtLabsControls] {ButtonGroup}
     \row
diff --git a/src/imports/controls/doc/src/qtlabscontrols-input.qdoc b/src/imports/controls/doc/src/qtlabscontrols-input.qdoc
index 130ca83d..06c0b40d 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-input.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-input.qdoc
@@ -38,6 +38,12 @@
     following sections offer guidelines for choosing the appropriate type
     of input control, depending on the use case.
 
+    \section1 ComboBox Control
+
+    \image qtlabscontrols-combobox.png
+
+    \l ComboBox is used to select a value from a drop-down list.
+
     \section1 Dial Control
 
     \image qtlabscontrols-dial.png
diff --git a/src/imports/controls/images/drop-indicator.png b/src/imports/controls/images/drop-indicator.png
new file mode 100644
index 00000000..77359311
--- /dev/null
+++ b/src/imports/controls/images/drop-indicator.png
diff --git a/src/imports/controls/images/drop-indicator@2x.png b/src/imports/controls/images/drop-indicator@2x.png
new file mode 100644
index 00000000..54d23b4b
--- /dev/null
+++ b/src/imports/controls/images/drop-indicator@2x.png
diff --git a/src/imports/controls/images/drop-indicator@3x.png b/src/imports/controls/images/drop-indicator@3x.png
new file mode 100644
index 00000000..22c6d010
--- /dev/null
+++ b/src/imports/controls/images/drop-indicator@3x.png
diff --git a/src/imports/controls/images/drop-indicator@4x.png b/src/imports/controls/images/drop-indicator@4x.png
new file mode 100644
index 00000000..7ab1eb86
--- /dev/null
+++ b/src/imports/controls/images/drop-indicator@4x.png
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
new file mode 100644
index 00000000..035863f6
--- /dev/null
+++ b/src/imports/controls/material/ComboBox.qml
@@ -0,0 +1,154 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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 QtQuick.Window 2.2
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.material 1.0
+import QtGraphicalEffects 1.0
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    spacing: 6
+    padding: 12
+
+    //! [delegate]
+    delegate: ItemDelegate {
+        width: control.width
+        text: control.textRole ? model[control.textRole] : modelData
+        highlighted: control.highlightedIndex === index
+        pressed: highlighted && control.pressed
+    }
+    //! [delegate]
+
+    //! [contentItem]
+    contentItem: Text {
+        text: control.displayText
+        font: control.font
+        color: control.enabled ? control.Material.primaryTextColor : control.Material.hintTextColor
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+        rightPadding: 14 + control.spacing
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 32
+
+        radius: 2
+        color: control.Material.comboBoxColor
+
+        Behavior on color {
+            ColorAnimation {
+                duration: 400
+            }
+        }
+
+        layer.enabled: control.enabled
+        layer.effect: DropShadow {
+            verticalOffset: 1
+            color: control.Material.dropShadowColor
+            samples: control.pressed ? 15 : 9
+            spread: 0.5
+
+            // TODO: Doesn't work because of QTBUG-49072
+            Behavior on radius {
+                NumberAnimation { duration: 1000 }
+            }
+        }
+
+        Image {
+            x: parent.width - width - control.rightPadding
+            y: (parent.height - height) / 2
+            opacity: !control.enabled ? 0.5 : 1.0
+            source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/drop-indicator.png"
+        }
+    }
+    //! [background]
+
+    //! [panel]
+    panel: T.Panel {
+        id: popup
+        contentItem: Rectangle {
+            // TODO: Panel::anchors
+            readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0)
+            readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0)
+
+            x: below.x
+            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
+            width: control.width
+            height: listview.height
+
+            color: control.Material.comboBoxColor
+
+            layer.enabled: control.enabled
+            layer.effect: DropShadow {
+                verticalOffset: 1
+                color: control.Material.dropShadowColor
+                samples: 15
+                spread: 0.5
+
+                // TODO: Doesn't work because of QTBUG-49072
+                Behavior on radius {
+                    NumberAnimation { duration: 1000 }
+                }
+            }
+
+            ListView {
+                id: listview
+                width: control.width
+                height: Math.min(200, contentHeight) // TODO: 396
+
+                clip: true
+                model: control.delegateModel
+                currentIndex: control.highlightedIndex
+
+//                ScrollIndicator.vertical: ScrollIndicator { }
+            }
+        }
+    }
+    //! [panel]
+}
diff --git a/src/imports/controls/material/images/drop-indicator.png b/src/imports/controls/material/images/drop-indicator.png
new file mode 100644
index 00000000..b4396ec6
--- /dev/null
+++ b/src/imports/controls/material/images/drop-indicator.png
diff --git a/src/imports/controls/material/images/drop-indicator@2x.png b/src/imports/controls/material/images/drop-indicator@2x.png
new file mode 100644
index 00000000..1c711bc2
--- /dev/null
+++ b/src/imports/controls/material/images/drop-indicator@2x.png
diff --git a/src/imports/controls/material/images/drop-indicator@3x.png b/src/imports/controls/material/images/drop-indicator@3x.png
new file mode 100644
index 00000000..06dd8bd2
--- /dev/null
+++ b/src/imports/controls/material/images/drop-indicator@3x.png
diff --git a/src/imports/controls/material/images/drop-indicator@4x.png b/src/imports/controls/material/images/drop-indicator@4x.png
new file mode 100644
index 00000000..b2157c30
--- /dev/null
+++ b/src/imports/controls/material/images/drop-indicator@4x.png
diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri
index a238dcfe..1c71b9fa 100644
--- a/src/imports/controls/material/material.pri
+++ b/src/imports/controls/material/material.pri
@@ -13,6 +13,7 @@ QML_FILES += \
     $$PWD/BusyIndicator.qml \
     $$PWD/Button.qml \
     $$PWD/CheckBox.qml \
+    $$PWD/ComboBox.qml \
     $$PWD/Dial.qml \
     $$PWD/Drawer.qml \
     $$PWD/Frame.qml \
diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp
index a3d2329a..bce5db21 100644
--- a/src/imports/controls/material/qquickmaterialstyle.cpp
+++ b/src/imports/controls/material/qquickmaterialstyle.cpp
@@ -724,6 +724,11 @@ QColor QQuickMaterialStyle::drawerBackgroundColor() const
     return dividerTextColorLight;
 }
 
+QColor QQuickMaterialStyle::comboBoxColor() const
+{
+    return m_theme == Light ? "#ffffff" : backgroundColorDark;
+}
+
 QColor QQuickMaterialStyle::color(QQuickMaterialStyle::Color color, QQuickMaterialStyle::Shade shade) const
 {
     int count = sizeof(colors) / sizeof(colors[0]);
diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h
index 69891b9c..e657fd57 100644
--- a/src/imports/controls/material/qquickmaterialstyle_p.h
+++ b/src/imports/controls/material/qquickmaterialstyle_p.h
@@ -92,6 +92,7 @@ class QQuickMaterialStyle : public QQuickStyle
     Q_PROPERTY(QColor scrollBarColor READ scrollBarColor NOTIFY paletteChanged FINAL)
     Q_PROPERTY(QColor scrollBarPressedColor READ scrollBarPressedColor NOTIFY paletteChanged FINAL)
     Q_PROPERTY(QColor drawerBackgroundColor READ drawerBackgroundColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor comboBoxColor READ comboBoxColor NOTIFY paletteChanged FINAL)
 
 public:
     enum Theme {
@@ -199,6 +200,7 @@ public:
     QColor scrollBarColor() const;
     QColor scrollBarPressedColor() const;
     QColor drawerBackgroundColor() const;
+    QColor comboBoxColor() const;
 
     Q_INVOKABLE QColor color(Color color, Shade shade) const;
 
diff --git a/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc b/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc
index 6c7b65f1..8398d505 100644
--- a/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc
+++ b/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc
@@ -4,5 +4,9 @@
         <file>images/check@2x.png</file>
         <file>images/check@3x.png</file>
         <file>images/check@4x.png</file>
+        <file>images/drop-indicator.png</file>
+        <file>images/drop-indicator@2x.png</file>
+        <file>images/drop-indicator@3x.png</file>
+        <file>images/drop-indicator@4x.png</file>
     </qresource>
 </RCC>
diff --git a/src/imports/controls/qtlabscontrolsplugin.cpp b/src/imports/controls/qtlabscontrolsplugin.cpp
index 079d843d..2d71284e 100644
--- a/src/imports/controls/qtlabscontrolsplugin.cpp
+++ b/src/imports/controls/qtlabscontrolsplugin.cpp
@@ -71,6 +71,7 @@ void QtLabsControlsPlugin::registerTypes(const char *uri)
     qmlRegisterType(selector->select(QStringLiteral("/BusyIndicator.qml")), uri, 1, 0, "BusyIndicator");
     qmlRegisterType(selector->select(QStringLiteral("/Button.qml")), uri, 1, 0, "Button");
     qmlRegisterType(selector->select(QStringLiteral("/CheckBox.qml")), uri, 1, 0, "CheckBox");
+    qmlRegisterType(selector->select(QStringLiteral("/ComboBox.qml")), uri, 1, 0, "ComboBox");
     qmlRegisterType(selector->select(QStringLiteral("/Dial.qml")), uri, 1, 0, "Dial");
     qmlRegisterType(selector->select(QStringLiteral("/Drawer.qml")), uri, 1, 0, "Drawer");
     qmlRegisterType(selector->select(QStringLiteral("/Frame.qml")), uri, 1, 0, "Frame");
diff --git a/src/imports/controls/qtlabscontrolsplugin.qrc b/src/imports/controls/qtlabscontrolsplugin.qrc
index c54083ed..bebbe570 100644
--- a/src/imports/controls/qtlabscontrolsplugin.qrc
+++ b/src/imports/controls/qtlabscontrolsplugin.qrc
@@ -11,5 +11,9 @@
         <file>images/dial-indicator@2x.png</file>
         <file>images/dial-indicator@3x.png</file>
         <file>images/dial-indicator@4x.png</file>
+        <file>images/drop-indicator.png</file>
+        <file>images/drop-indicator@2x.png</file>
+        <file>images/drop-indicator@3x.png</file>
+        <file>images/drop-indicator@4x.png</file>
     </qresource>
 </RCC>
diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml
new file mode 100644
index 00000000..0fdcb894
--- /dev/null
+++ b/src/imports/controls/universal/ComboBox.qml
@@ -0,0 +1,142 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 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 QtQuick.Window 2.2
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.universal 1.0
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    spacing: 10
+    topPadding: 5
+    leftPadding: 12
+    rightPadding: 10
+    bottomPadding: 7
+
+    font.pixelSize: Universal.fontSize
+    font.family: Universal.fontFamily
+
+    //! [delegate]
+    delegate: ItemDelegate {
+        width: control.width
+        text: control.textRole ? model[control.textRole] : modelData
+        highlighted: control.highlightedIndex === index
+        pressed: highlighted && control.pressed
+    }
+    //! [delegate]
+
+    //! [contentItem]
+    contentItem: Text {
+        text: control.displayText
+        font: control.font
+        color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        renderType: Text.NativeRendering
+        elide: Text.ElideRight
+        rightPadding: 12 + control.spacing
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 32
+
+        border.width: 2 // ComboBoxBorderThemeThickness
+        border.color: !control.enabled ? control.Universal.baseLowColor :
+                       control.pressed || panel.visible ? control.Universal.baseMediumLowColor : control.Universal.baseMediumLowColor
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.pressed || panel.visible ? control.Universal.listMediumColor : control.Universal.altMediumLowColor
+
+        Rectangle {
+            x: 2
+            y: 2
+            width: parent.width - 4
+            height: parent.height - 4
+
+            visible: control.activeFocus
+            color: control.Universal.accentColor
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+        Image {
+            id: checkmark
+            x: parent.width - width - control.rightPadding
+            y: (parent.height - height) / 2
+            source: "image://universal/downarrow/" + (!control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumHighColor)
+        }
+    }
+    //! [background]
+
+    //! [panel]
+    panel: T.Panel {
+        id: popup
+        contentItem: Rectangle {
+            // TODO: Panel::anchors
+            readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0)
+            readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0)
+
+            x: below.x
+            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
+            width: control.width
+            height: listview.height
+
+            color: control.Universal.chromeMediumLowColor
+
+            ListView {
+                id: listview
+                width: control.width
+                height: Math.min(200, contentHeight) // TODO: 396
+
+                clip: true
+                model: control.delegateModel
+                currentIndex: control.highlightedIndex
+
+//                ScrollIndicator.vertical: ScrollIndicator { }
+            }
+        }
+    }
+    //! [panel]
+}
diff --git a/src/imports/controls/universal/images/downarrow.png b/src/imports/controls/universal/images/downarrow.png
new file mode 100644
index 00000000..fef7b0f2
--- /dev/null
+++ b/src/imports/controls/universal/images/downarrow.png
diff --git a/src/imports/controls/universal/images/downarrow@2x.png b/src/imports/controls/universal/images/downarrow@2x.png
new file mode 100644
index 00000000..eabf658a
--- /dev/null
+++ b/src/imports/controls/universal/images/downarrow@2x.png
diff --git a/src/imports/controls/universal/images/downarrow@3x.png b/src/imports/controls/universal/images/downarrow@3x.png
new file mode 100644
index 00000000..f9d39a2c
--- /dev/null
+++ b/src/imports/controls/universal/images/downarrow@3x.png
diff --git a/src/imports/controls/universal/images/downarrow@4x.png b/src/imports/controls/universal/images/downarrow@4x.png
new file mode 100644
index 00000000..b252b588
--- /dev/null
+++ b/src/imports/controls/universal/images/downarrow@4x.png
diff --git a/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc b/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc
index 6cd57f89..5edda119 100644
--- a/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc
+++ b/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc
@@ -4,6 +4,10 @@
     <file>images/checkmark@2x.png</file>
     <file>images/checkmark@3x.png</file>
     <file>images/checkmark@4x.png</file>
+    <file>images/downarrow.png</file>
+    <file>images/downarrow@2x.png</file>
+    <file>images/downarrow@3x.png</file>
+    <file>images/downarrow@4x.png</file>
     <file>images/leftarrow.png</file>
     <file>images/leftarrow@2x.png</file>
     <file>images/leftarrow@3x.png</file>
diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri
index 4865e499..7348ac84 100644
--- a/src/imports/controls/universal/universal.pri
+++ b/src/imports/controls/universal/universal.pri
@@ -3,6 +3,7 @@ QML_FILES += \
     $$PWD/BusyIndicator.qml \
     $$PWD/Button.qml \
     $$PWD/CheckBox.qml \
+    $$PWD/ComboBox.qml \
     $$PWD/Dial.qml \
     $$PWD/Frame.qml \
     $$PWD/GroupBox.qml \