diff --git a/.gitignore b/.gitignore
index 33c5634de0372f9d6c155367b404b73d39d1a611..1c265ad3125125b91201dd852fd10f276d74d27e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
/examples/quick/controls/calendar/calendar
/examples/quick/controls/gallery/gallery
/examples/quick/controls/splitview/splitview
+/examples/quick/controls/styles/styles
/examples/quick/controls/tableview/tableview
/examples/quick/controls/touch/touch
/examples/quick/controls/texteditor/texteditor
diff --git a/examples/quick/controls/controls.pro b/examples/quick/controls/controls.pro
index 2913e2984644b780937fd56f7c7498019da01756..134a25e357cdbe4dcb2d67d0585e807652d1a163 100644
--- a/examples/quick/controls/controls.pro
+++ b/examples/quick/controls/controls.pro
@@ -5,7 +5,8 @@ SUBDIRS += \
splitview \
tableview \
touch \
- basiclayouts
+ basiclayouts \
+ styles
qtHaveModule(widgets) {
SUBDIRS += texteditor
diff --git a/examples/quick/controls/styles/images/bubble.png b/examples/quick/controls/styles/images/bubble.png
new file mode 100644
index 0000000000000000000000000000000000000000..62aa1efe54c76991fdaea3a103d362bcc635e5c6
Binary files /dev/null and b/examples/quick/controls/styles/images/bubble.png differ
diff --git a/examples/quick/controls/styles/images/button-pressed.png b/examples/quick/controls/styles/images/button-pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..d64cdaa7876296e8ff5fe0953c5f364a0a6be118
Binary files /dev/null and b/examples/quick/controls/styles/images/button-pressed.png differ
diff --git a/examples/quick/controls/styles/images/button.png b/examples/quick/controls/styles/images/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ab41cc804991d9da9d2c0dd2140579b8a405cf7
Binary files /dev/null and b/examples/quick/controls/styles/images/button.png differ
diff --git a/examples/quick/controls/styles/images/progress-background.png b/examples/quick/controls/styles/images/progress-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..55a069dfce0cba716f426a78c04346cadb60cfad
Binary files /dev/null and b/examples/quick/controls/styles/images/progress-background.png differ
diff --git a/examples/quick/controls/styles/images/progress-fill.png b/examples/quick/controls/styles/images/progress-fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..b588c9586d9c9ba0d07966f448c19e23320bf6e3
Binary files /dev/null and b/examples/quick/controls/styles/images/progress-fill.png differ
diff --git a/examples/quick/controls/styles/images/slider-handle.png b/examples/quick/controls/styles/images/slider-handle.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac4d4a0d981cf7257756d5ecd7951154b70b87d5
Binary files /dev/null and b/examples/quick/controls/styles/images/slider-handle.png differ
diff --git a/examples/quick/controls/styles/images/tab.png b/examples/quick/controls/styles/images/tab.png
new file mode 100644
index 0000000000000000000000000000000000000000..74fefab78a719e4883756d2bcc1b968835dd4fa0
Binary files /dev/null and b/examples/quick/controls/styles/images/tab.png differ
diff --git a/examples/quick/controls/styles/images/tab_selected.png b/examples/quick/controls/styles/images/tab_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..665400ccfd2da9264fa4cf0e653e2573a8f7daf7
Binary files /dev/null and b/examples/quick/controls/styles/images/tab_selected.png differ
diff --git a/examples/quick/controls/styles/images/textfield.png b/examples/quick/controls/styles/images/textfield.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d4a38ab38bea53d34f71c84e4f88669b99f3447
Binary files /dev/null and b/examples/quick/controls/styles/images/textfield.png differ
diff --git a/examples/quick/controls/styles/main.cpp b/examples/quick/controls/styles/main.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..0193c4f9338c9250e2028b58c4288489dde2756e
--- /dev/null
+++ b/examples/quick/controls/styles/main.cpp
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+ QGuiApplication app(argc, argv);
+
+ QQmlApplicationEngine engine;
+ engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+ return app.exec();
+}
diff --git a/examples/quick/controls/styles/main.qml b/examples/quick/controls/styles/main.qml
new file mode 100644
index 0000000000000000000000000000000000000000..e804b4a8b2420012d980d2ba1aa319ca1cc81a06
--- /dev/null
+++ b/examples/quick/controls/styles/main.qml
@@ -0,0 +1,378 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Window 2.2
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+import QtQuick.Particles 2.0
+
+Window {
+ id: window
+ width: 640
+ height: 480
+ visible: true
+ title: qsTr("Styles Example")
+
+ property int columnWidth: window.width / 5
+
+ GridLayout {
+ rowSpacing: 12
+ columnSpacing: 30
+ anchors.top: parent.top
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.margins: 30
+
+ Button {
+ text: "Button"
+ implicitWidth: columnWidth
+ }
+ Button {
+ text: "Button"
+ style: ButtonStyle {
+ background: BorderImage {
+ source: control.pressed ? "images/button-pressed.png" : "images/button.png"
+ border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+ }
+ }
+ implicitWidth: columnWidth
+ }
+ Button {
+ text: "Button"
+ style: buttonStyle
+ implicitWidth: columnWidth
+ }
+
+ TextField {
+ Layout.row: 1
+ implicitWidth: columnWidth
+ }
+ TextField {
+ style: TextFieldStyle {
+ background: BorderImage {
+ source: "images/textfield.png"
+ border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+ }
+ }
+ implicitWidth: columnWidth
+ }
+ TextField {
+ style: textFieldStyle
+ implicitWidth: columnWidth
+ }
+
+ Slider {
+ id: slider1
+ Layout.row: 2
+ value: 0.5
+ implicitWidth: columnWidth
+ }
+ Slider {
+ id: slider2
+ value: 0.5
+ implicitWidth: columnWidth
+ style: SliderStyle {
+ groove: BorderImage {
+ height: 6
+ border.top: 1
+ border.bottom: 1
+ source: "images/progress-background.png"
+ border.left: 6
+ border.right: 6
+ BorderImage {
+ anchors.verticalCenter: parent.verticalCenter
+ source: "images/progress-fill.png"
+ border.left: 5 ; border.top: 1
+ border.right: 5 ; border.bottom: 1
+ width: styleData.handlePosition
+ height: parent.height
+ }
+ }
+ handle: Item {
+ width: 13
+ height: 13
+ Image {
+ anchors.centerIn: parent
+ source: "images/slider-handle.png"
+ }
+ }
+ }
+ }
+ Slider {
+ id: slider3
+ value: 0.5
+ implicitWidth: columnWidth
+ style: sliderStyle
+ }
+
+ ProgressBar {
+ Layout.row: 3
+ value: slider1.value
+ implicitWidth: columnWidth
+ }
+ ProgressBar {
+ value: slider2.value
+ implicitWidth: columnWidth
+ style: progressBarStyle
+ }
+ ProgressBar {
+ value: slider3.value
+ implicitWidth: columnWidth
+ style: progressBarStyle2
+ }
+
+ CheckBox {
+ text: "CheckBox"
+ Layout.row: 4
+ implicitWidth: columnWidth
+ }
+
+ RadioButton {
+ text: "RadioButton"
+ implicitWidth: columnWidth
+ }
+
+ ComboBox {
+ model: ["Paris", "Oslo", "New York"]
+ implicitWidth: columnWidth
+ }
+
+ TabView {
+ Layout.row: 5
+ Layout.columnSpan: 3
+ Layout.fillWidth: true
+ implicitHeight: 30
+ Tab { title: "One" ; Item {} }
+ Tab { title: "Two" ; Item {} }
+ Tab { title: "Three" ; Item {} }
+ Tab { title: "Four" ; Item {} }
+ }
+
+ TabView {
+ Layout.row: 6
+ Layout.columnSpan: 3
+ Layout.fillWidth: true
+ implicitHeight: 30
+ Tab { title: "One" ; Item {}}
+ Tab { title: "Two" ; Item {}}
+ Tab { title: "Three" ; Item {}}
+ Tab { title: "Four" ; Item {}}
+ style: tabViewStyle
+ }
+ }
+
+ // Style delegates:
+
+ property Component buttonStyle: ButtonStyle {
+ background: Rectangle {
+ implicitHeight: 22
+ implicitWidth: columnWidth
+ color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
+ antialiasing: true
+ border.color: "gray"
+ radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ visible: !control.pressed
+ border.color: "#aaffffff"
+ radius: height/2
+ }
+ }
+ }
+
+ property Component textFieldStyle: TextFieldStyle {
+ background: Rectangle {
+ implicitWidth: columnWidth
+ color: "#f0f0f0"
+ antialiasing: true
+ border.color: "gray"
+ radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ border.color: "#aaffffff"
+ radius: height/2
+ }
+ }
+ }
+
+ property Component sliderStyle: SliderStyle {
+ handle: Rectangle {
+ width: 18
+ height: 18
+ color: control.pressed ? "darkGray" : "lightGray"
+ border.color: "gray"
+ antialiasing: true
+ radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ border.color: "#eee"
+ radius: height/2
+ }
+ }
+
+ groove: Rectangle {
+ height: 8
+ implicitWidth: columnWidth
+ implicitHeight: 22
+
+ antialiasing: true
+ color: "#ccc"
+ border.color: "#777"
+ radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ border.color: "#66ffffff"
+ radius: height/2
+ }
+ }
+ }
+
+ property Component progressBarStyle: ProgressBarStyle {
+ background: BorderImage {
+ source: "images/progress-background.png"
+ border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
+ }
+ progress: Item {
+ clip: true
+ BorderImage {
+ anchors.fill: parent
+ anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
+ source: "images/progress-fill.png"
+ border.left: 10 ; border.right: 10
+ Rectangle {
+ width: 1
+ color: "#a70"
+ opacity: 0.8
+ anchors.top: parent.top
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 1
+ anchors.right: parent.right
+ visible: control.value < control.maximumValue
+ anchors.rightMargin: -parent.anchors.rightMargin
+ }
+ }
+ ParticleSystem { id: bubbles; running: visible }
+ ImageParticle {
+ id: fireball
+ system: bubbles
+ source: "images/bubble.png"
+ opacity: 0.7
+ }
+ Emitter {
+ system: bubbles
+ anchors.bottom: parent.bottom
+ anchors.margins: 4
+ anchors.bottomMargin: -4
+ anchors.left: parent.left
+ anchors.right: parent.right
+ size: 4
+ sizeVariation: 4
+ acceleration: PointDirection { y: -6; xVariation: 3 }
+ emitRate: 6 * control.value
+ lifeSpan: 3000
+ }
+ }
+ }
+
+ property Component progressBarStyle2: ProgressBarStyle {
+ background: Rectangle {
+ implicitWidth: columnWidth
+ implicitHeight: 24
+ color: "#f0f0f0"
+ border.color: "gray"
+ }
+ progress: Rectangle {
+ color: "#ccc"
+ border.color: "gray"
+ Rectangle {
+ color: "transparent"
+ border.color: "#44ffffff"
+ anchors.fill: parent
+ anchors.margins: 1
+ }
+ }
+ }
+
+ property Component tabViewStyle: TabViewStyle {
+ tabOverlap: 16
+ frameOverlap: 4
+ tabsMovable: true
+
+ frame: Rectangle {
+ gradient: Gradient {
+ GradientStop { color: "#e5e5e5" ; position: 0 }
+ GradientStop { color: "#e0e0e0" ; position: 1 }
+ }
+ border.color: "#898989"
+ Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
+ }
+ tab: Item {
+ property int totalOverlap: tabOverlap * (control.count - 1)
+ implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
+ implicitHeight: image.sourceSize.height
+ BorderImage {
+ id: image
+ anchors.fill: parent
+ source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
+ border.left: 30
+ smooth: false
+ border.right: 30
+ }
+ Text {
+ text: styleData.title
+ anchors.centerIn: parent
+ }
+ }
+ leftCorner: Item { implicitWidth: 12 }
+ }
+}
diff --git a/examples/quick/controls/styles/styles.pro b/examples/quick/controls/styles/styles.pro
new file mode 100644
index 0000000000000000000000000000000000000000..03648f4cc1e858cede20f312fc89a67126bf949c
--- /dev/null
+++ b/examples/quick/controls/styles/styles.pro
@@ -0,0 +1,10 @@
+TEMPLATE = app
+TARGET = styles
+QT += qml quick
+
+SOURCES += \
+ main.cpp
+RESOURCES += \
+ styles.qrc
+OTHER_FILES += \
+ main.qml
diff --git a/examples/quick/controls/styles/styles.qrc b/examples/quick/controls/styles/styles.qrc
new file mode 100644
index 0000000000000000000000000000000000000000..d2300c6fab5bd12a2a87a5c80233cecd85b30451
--- /dev/null
+++ b/examples/quick/controls/styles/styles.qrc
@@ -0,0 +1,14 @@
+<RCC>
+ <qresource prefix="/">
+ <file>main.qml</file>
+ <file>images/bubble.png</file>
+ <file>images/button.png</file>
+ <file>images/button-pressed.png</file>
+ <file>images/progress-background.png</file>
+ <file>images/progress-fill.png</file>
+ <file>images/slider-handle.png</file>
+ <file>images/tab.png</file>
+ <file>images/tab_selected.png</file>
+ <file>images/textfield.png</file>
+ </qresource>
+</RCC>
diff --git a/src/controls/doc/images/qtquickcontrols-example-styles.png b/src/controls/doc/images/qtquickcontrols-example-styles.png
new file mode 100644
index 0000000000000000000000000000000000000000..901ff75c4e80babf8aea39470d6a547553518c1e
Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols-example-styles.png differ
diff --git a/src/controls/doc/src/qtquickcontrols-examples.qdoc b/src/controls/doc/src/qtquickcontrols-examples.qdoc
index 4f1ab21942473962a39507f5f5b4cc02afccf1b9..8b8c14699f516da1e6585a0e5de69d1b6811de43 100644
--- a/src/controls/doc/src/qtquickcontrols-examples.qdoc
+++ b/src/controls/doc/src/qtquickcontrols-examples.qdoc
@@ -465,3 +465,15 @@
\endcode
\include examples-run.qdocinc
*/
+
+/*!
+ \example styles
+ \title Qt Quick Controls - Styles Example
+ \ingroup qtquickcontrols_examples
+ \brief Demonstrates custom styles
+ \image qtquickcontrols-example-styles.png
+
+ This example shows how to create custom styles for \l{Qt Quick Controls}.
+
+ \include examples-run.qdocinc
+*/