Merge Extras' styling system into Controls'.

- Removes the duplicated style settings functionality in Extras and
  simplifies the installed styles directory structure.

- Extras' Base style is now part of Controls' Base style, eliminating
  the need for a separate QtQuick.Extras.Styles import. The cost of
  doing this should be negligible: a few QML files and two images.

  If we didn't merge Extras' Baste style into Controls', we'd need
  extras-specific code in qquickcontrolssettings, as the default style
  search path is:

  qml/QtQuick/Controls/Styles/

  Whereas the Extras Base style would be in:

  qml/QtQuick/Extras/Styles/

  The Extras Base style can't go into Controls' Base style directory,
  either, because otherwise we'd have two qmldir files there.

  The Flat style doesn't have this problem because it is all contained
  in one plugin and gets installed into its own Flat/ folder.

- Documentation now lists the Extras controls as \since QtQuick.Extras
  1.4.

- Adds the customcontrolsstyle auto test to ensure that custom styling
  is tested.

Change-Id: I19ca7a8b7e1c1daa85b272f4ccf9a2f05c76e0d9
Reviewed-by: Caroline Chao <caroline.chao@theqtcompany.com>
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

27 files changed, 619 insertions, 3 deletions

diff --git a/src/controls/doc/images/circulargauge-angles.png b/src/controls/doc/images/circulargauge-angles.png
new file mode 100644
index 00000000..fb93bcaa
--- /dev/null
+++ b/src/controls/doc/images/circulargauge-angles.png
diff --git a/src/controls/doc/images/circulargauge-needle-example-2.png b/src/controls/doc/images/circulargauge-needle-example-2.png
new file mode 100644
index 00000000..a2b5f322
--- /dev/null
+++ b/src/controls/doc/images/circulargauge-needle-example-2.png
diff --git a/src/controls/doc/images/circulargauge-needle.png b/src/controls/doc/images/circulargauge-needle.png
new file mode 100644
index 00000000..b2780b41
--- /dev/null
+++ b/src/controls/doc/images/circulargauge-needle.png
diff --git a/src/controls/doc/images/circulargauge-reversed.png b/src/controls/doc/images/circulargauge-reversed.png
new file mode 100644
index 00000000..aeadfbcc
--- /dev/null
+++ b/src/controls/doc/images/circulargauge-reversed.png
diff --git a/src/controls/doc/images/circulargauge-tickmark-indices-values.png b/src/controls/doc/images/circulargauge-tickmark-indices-values.png
new file mode 100644
index 00000000..d117f483
--- /dev/null
+++ b/src/controls/doc/images/circulargauge-tickmark-indices-values.png
diff --git a/src/controls/doc/images/gauge-minorTickmark-example.png b/src/controls/doc/images/gauge-minorTickmark-example.png
new file mode 100644
index 00000000..591120d6
--- /dev/null
+++ b/src/controls/doc/images/gauge-minorTickmark-example.png
diff --git a/src/controls/doc/images/gauge-temperature.png b/src/controls/doc/images/gauge-temperature.png
new file mode 100644
index 00000000..95fc1679
--- /dev/null
+++ b/src/controls/doc/images/gauge-temperature.png
diff --git a/src/controls/doc/images/gauge-tickmark-example.png b/src/controls/doc/images/gauge-tickmark-example.png
new file mode 100644
index 00000000..c46fb8a5
--- /dev/null
+++ b/src/controls/doc/images/gauge-tickmark-example.png
diff --git a/src/controls/doc/images/piemenu-menuitem-example.png b/src/controls/doc/images/piemenu-menuitem-example.png
new file mode 100644
index 00000000..57a2f956
--- /dev/null
+++ b/src/controls/doc/images/piemenu-menuitem-example.png
diff --git a/src/controls/doc/images/styling-circulargauge-background-example.png b/src/controls/doc/images/styling-circulargauge-background-example.png
new file mode 100644
index 00000000..e816c6f6
--- /dev/null
+++ b/src/controls/doc/images/styling-circulargauge-background-example.png
diff --git a/src/controls/doc/images/styling-circulargauge-knob-example.png b/src/controls/doc/images/styling-circulargauge-knob-example.png
new file mode 100644
index 00000000..793a36c2
--- /dev/null
+++ b/src/controls/doc/images/styling-circulargauge-knob-example.png
diff --git a/src/controls/doc/images/styling-circulargauge-minorTickmark-example.png b/src/controls/doc/images/styling-circulargauge-minorTickmark-example.png
new file mode 100644
index 00000000..f3f2d8d7
--- /dev/null
+++ b/src/controls/doc/images/styling-circulargauge-minorTickmark-example.png
diff --git a/src/controls/doc/images/styling-circulargauge-needle-example.png b/src/controls/doc/images/styling-circulargauge-needle-example.png
new file mode 100644
index 00000000..08049fc9
--- /dev/null
+++ b/src/controls/doc/images/styling-circulargauge-needle-example.png
diff --git a/src/controls/doc/images/styling-circulargauge-tickmark-example.png b/src/controls/doc/images/styling-circulargauge-tickmark-example.png
new file mode 100644
index 00000000..01c71cd1
--- /dev/null
+++ b/src/controls/doc/images/styling-circulargauge-tickmark-example.png
diff --git a/src/controls/doc/images/styling-circulargauge-tickmarkLabel-example.png b/src/controls/doc/images/styling-circulargauge-tickmarkLabel-example.png
new file mode 100644
index 00000000..7520827e
--- /dev/null
+++ b/src/controls/doc/images/styling-circulargauge-tickmarkLabel-example.png
diff --git a/src/controls/doc/images/styling-gauge-font-size.png b/src/controls/doc/images/styling-gauge-font-size.png
new file mode 100644
index 00000000..97d7ebb2
--- /dev/null
+++ b/src/controls/doc/images/styling-gauge-font-size.png
diff --git a/src/controls/doc/images/styling-gauge-foreground.png b/src/controls/doc/images/styling-gauge-foreground.png
new file mode 100644
index 00000000..5a4f65b9
--- /dev/null
+++ b/src/controls/doc/images/styling-gauge-foreground.png
diff --git a/src/controls/doc/images/styling-gauge-minorTickmark.png b/src/controls/doc/images/styling-gauge-minorTickmark.png
new file mode 100644
index 00000000..34e36192
--- /dev/null
+++ b/src/controls/doc/images/styling-gauge-minorTickmark.png
diff --git a/src/controls/doc/images/styling-gauge-tickmark.png b/src/controls/doc/images/styling-gauge-tickmark.png
new file mode 100644
index 00000000..1cd4fb8b
--- /dev/null
+++ b/src/controls/doc/images/styling-gauge-tickmark.png
diff --git a/src/controls/doc/images/styling-gauge-valueBar.png b/src/controls/doc/images/styling-gauge-valueBar.png
new file mode 100644
index 00000000..581b8240
--- /dev/null
+++ b/src/controls/doc/images/styling-gauge-valueBar.png
diff --git a/src/controls/doc/qtquickcontrols.qdocconf b/src/controls/doc/qtquickcontrols.qdocconf
index 6b4b14c7..8d41247e 100644
--- a/src/controls/doc/qtquickcontrols.qdocconf
+++ b/src/controls/doc/qtquickcontrols.qdocconf
@@ -28,12 +28,13 @@ qhp.QtQuickControls.subprojects.qtquickcontrolsstyles.title      = Qt Quick Cont
 qhp.QtQuickControls.subprojects.qtquickcontrolsstyles.indexTitle = Qt Quick Controls Styles Structure
 qhp.QtQuickControls.subprojects.qtquickcontrolsstyles.type       = manual
 
-depends = qtqml qtquick qtgui qtwidgets qtdoc qtquicklayouts qtquickdialogs qtcore
+depends = qtcore qtdoc qtgui qtwidgets qtqml qtquick qtquicklayouts qtquickdialogs qtquickextras
 
 # Specify the install path under QT_INSTALL_EXAMPLES
 # Examples will be installed under quick/controls - 'controls' subdirectory
 # is given as part of \example commands
-exampledirs += ../../../examples/quick/controls
+exampledirs += ../../../examples/quick/controls \
+    snippets
 examplesinstallpath = quick/controls
 
 headerdirs += ../ \
@@ -54,7 +55,8 @@ sources += ../Private/AbstractCheckable.qml \
            ../Private/qquickabstractstyle.h \
            ../Private/qquickabstractstyle.cpp
 
-imagedirs += images
+imagedirs += images \
+    ../../extras/doc/images
 
 navigation.landingpage = "Qt Quick Controls"
 navigation.qmltypespage = "Qt Quick Controls QML Types"
diff --git a/src/controls/doc/snippets/circulargauge-background-range.qml b/src/controls/doc/snippets/circulargauge-background-range.qml
new file mode 100644
index 00000000..f218e916
--- /dev/null
+++ b/src/controls/doc/snippets/circulargauge-background-range.qml
@@ -0,0 +1,121 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+//! [range]
+import QtQuick 2.0
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+import QtQuick.Extras.Private 1.0
+
+Rectangle {
+    width: 300
+    height: 300
+    color: "#494d53"
+
+    CircularGauge {
+        id: gauge
+        anchors.centerIn: parent
+        style: CircularGaugeStyle {
+            id: style
+
+            //! [background]
+            function degreesToRadians(degrees) {
+                return degrees * (Math.PI / 180);
+            }
+
+
+            background: Canvas {
+                onPaint: {
+                    var ctx = getContext("2d");
+                    ctx.reset();
+
+                    ctx.beginPath();
+                    ctx.strokeStyle = "#e34c22";
+                    ctx.lineWidth = outerRadius * 0.02;
+
+                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
+                        degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90));
+                    ctx.stroke();
+                }
+            }
+            //! [background]
+
+            //! [tickmark]
+            tickmark: Rectangle {
+                visible: styleData.value < 80 || styleData.value % 10 == 0
+                implicitWidth: outerRadius * 0.02
+                antialiasing: true
+                implicitHeight: outerRadius * 0.06
+                color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
+            }
+            //! [tickmark]
+
+            //! [minorTickmark]
+            minorTickmark: Rectangle {
+                visible: styleData.value < 80
+                implicitWidth: outerRadius * 0.01
+                antialiasing: true
+                implicitHeight: outerRadius * 0.03
+                color: "#e5e5e5"
+            }
+            //! [minorTickmark]
+
+            //! [tickmarkLabel]
+            tickmarkLabel:  Text {
+                font.pixelSize: Math.max(6, outerRadius * 0.1)
+                text: styleData.value
+                color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
+                antialiasing: true
+            }
+            //! [tickmarkLabel]
+
+            //! [needle]
+            needle: Rectangle {
+                y: outerRadius * 0.15
+                implicitWidth: outerRadius * 0.03
+                implicitHeight: outerRadius * 0.9
+                antialiasing: true
+                color: "#e5e5e5"
+            }
+            //! [needle]
+
+            //! [foreground]
+            foreground: Item {
+                Rectangle {
+                    width: outerRadius * 0.2
+                    height: width
+                    radius: width / 2
+                    color: "#e5e5e5"
+                    anchors.centerIn: parent
+                }
+            }
+            //! [foreground]
+        }
+    }
+}
+//! [range]
diff --git a/src/controls/doc/snippets/circulargauge-tickmark-indices-values.qml b/src/controls/doc/snippets/circulargauge-tickmark-indices-values.qml
new file mode 100644
index 00000000..d3afd6f4
--- /dev/null
+++ b/src/controls/doc/snippets/circulargauge-tickmark-indices-values.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+//! [tickmarks]
+import QtQuick 2.0
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+
+Rectangle {
+    width: 400
+    height: 400
+
+    CircularGauge {
+        id: gauge
+        anchors.fill: parent
+        style: CircularGaugeStyle {
+            labelInset: outerRadius * 0.2
+
+            tickmarkLabel: null
+
+            tickmark: Text {
+                text: styleData.value
+
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: parent.bottom
+                    text: styleData.index
+                    color: "blue"
+                }
+            }
+
+            minorTickmark: Text {
+                text: styleData.value
+                font.pixelSize: 8
+
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: parent.bottom
+                    text: styleData.index
+                    font.pixelSize: 8
+                    color: "blue"
+                }
+            }
+        }
+
+        Text {
+            id: indexText
+            text: "Major and minor indices"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: valueText.top
+            color: "blue"
+        }
+        Text {
+            id: valueText
+            text: "Major and minor values"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+        }
+    }
+}
+//! [tickmarks]
diff --git a/src/controls/doc/snippets/styling-gauge.qml b/src/controls/doc/snippets/styling-gauge.qml
new file mode 100644
index 00000000..e999832b
--- /dev/null
+++ b/src/controls/doc/snippets/styling-gauge.qml
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+//! [all]
+import QtQuick 2.2
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+
+Rectangle {
+    width: 100
+    height: 220
+    color: "#494d53"
+
+    Gauge {
+        value: 50
+        tickmarkStepSize: 20
+        minorTickmarkCount: 1
+        //! [font-size]
+        font.pixelSize: 15
+        //! [font-size]
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: -4
+
+        style: GaugeStyle {
+            //! [valueBar]
+            valueBar: Rectangle {
+                color: "#e34c22"
+                implicitWidth: 28
+            }
+            //! [valueBar]
+
+            //! [foreground]
+            foreground: null
+            //! [foreground]
+
+            //! [tickmark]
+            tickmark: Item {
+                implicitWidth: 8
+                implicitHeight: 4
+
+                Rectangle {
+                    x: control.tickmarkAlignment === Qt.AlignLeft
+                        || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28
+                    width: 28
+                    height: parent.height
+                    color: "#ffffff"
+                }
+            }
+            //! [tickmark]
+
+            //! [minorTickmark]
+            minorTickmark: Item {
+                implicitWidth: 8
+                implicitHeight: 2
+
+                Rectangle {
+                    x: control.tickmarkAlignment === Qt.AlignLeft
+                        || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28
+                    width: 28
+                    height: parent.height
+                    color: "#ffffff"
+                }
+            }
+            //! [minorTickmark]
+        }
+    }
+}
+//! [all]
diff --git a/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc b/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc
index d9c813e4..59951190 100644
--- a/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc
+++ b/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc
@@ -48,6 +48,11 @@
     \internal
 */
 
+/*!
+    \group stylingtutorials
+    \title Styling Tutorials
+*/
+
 
 /*!
     \page qtquickcontrolsstyles-index.html
@@ -66,12 +71,48 @@
     import QtQuick.Controls.Styles 1.4
     \endcode
 
+    \section1 Styles
+
+    \section2 Base Style
+
+    The Base Style is the default style used when none is specified. It is also
+    used as a fallback when the specified style cannot be found.
+
+    \image tumbler.png
+    \caption The Base Style Tumbler.
+
+    \section2 Flat Style
+
+    The Flat Style is designed for touch devices.
+
+    \image tumbler-flat-style.png
+    \caption The Flat Style Tumbler.
+
+    \section2 Selecting Styles
+
+    You can apply a different style to the controls by setting the
+    \e QT_QUICK_CONTROLS_STYLE environment variable to the name of the style.
+    For example, to use the Flat style, you can do the following:
+
+    \code
+    QT_QUICK_CONTROLS_STYLE=Flat ./app
+    \endcode
+
+    This can also be done in C++, using qputenv():
+
+    \code
+    qputenv("QT_QUICK_CONTROLS_STYLE", "Flat");
+    \endcode
+
     \section1 Styling Views
     \annotatedlist viewsstyling
 
     \section1 Styling Controls
     \annotatedlist controlsstyling
 
+    \section1 Styling Tutorials
+    \annotatedlist stylingtutorials
+
     \section1 Related information
 
      \list
diff --git a/src/controls/doc/src/styling-circulargauge.qdoc b/src/controls/doc/src/styling-circulargauge.qdoc
new file mode 100644
index 00000000..e0260db4
--- /dev/null
+++ b/src/controls/doc/src/styling-circulargauge.qdoc
@@ -0,0 +1,145 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+    \page styling-circulargauge.html
+    \title Styling CircularGauge
+    \brief Tutorial for styling CircularGauge.
+    \ingroup stylingtutorials
+
+    \target styling-circulargauge-needle
+    \section2 The Needle Component
+
+    The \l {QtQuick.Controls.Styles::CircularGaugeStyle::}{needle}
+    component is rotated around the gauge to represent the current value.
+
+    Starting from the default style, we'll add a very basic white needle:
+
+    \snippet circulargauge-background-range.qml needle
+
+    \image styling-circulargauge-needle-example.png
+
+    As mentioned in the documentation for \l {QtQuick.Controls.Styles::}
+    {CircularGaugeStyle}, \c implicitWidth
+    and \c implicitHeight properties need to be set. This is so that the needle
+    can be positioned properly. We always scale items by the
+    \l {QtQuick.Controls.Styles::CircularGaugeStyle::}{outerRadius}
+    property of the style, ensuring the control resizes gracefully.
+
+    We offset the needle vertically so that its back sits beyond the knob.
+
+    \target styling-circulargauge-foreground
+    \section2 The Foreground Component
+
+    We've now changed the needle, but the default knob is still there; let's
+    replace it. The \l {QtQuick.Controls.Styles::CircularGaugeStyle::}
+    {foreground} component defines the default knob, so we can specify our own by
+    overriding it (note that we could also set it to \c null if we didn't want a
+    foreground):
+
+    \snippet circulargauge-background-range.qml foreground
+
+    \image styling-circulargauge-knob-example.png
+
+    Firstly, we create a circle from the Rectangle item by setting the radius to
+    be half the width (either width or height will work here; they are always
+    equal in this case). We make it a child of the Item, because the foreground
+    fills the gauge. We then center it within the Item.
+
+    We set the color of the knob to the same white that we used before.
+
+    \target styling-circulargauge-tickmarkLabel
+    \section2 The Tickmark Label Component
+
+    Suppose we want to caution the user if the value displayed by the gauge goes
+    above or below a certain range. We could present this range to the user in
+    several ways:
+
+    \list A
+        \li Change the color of the tickmarks depending on \c styleData.value
+        \li Add an image to the background
+        \li Draw it with \l {QtQuick::}{Canvas}
+    \endlist
+
+    We'll choose options 1 and 3, as they are more flexible than using an
+    image.
+
+    Firstly, let's change the color of the three highest tickmark labels:
+
+    \snippet circulargauge-background-range.qml tickmarkLabel
+
+    \image styling-circulargauge-tickmarkLabel-example.png tickmarkLabel
+
+    We also change the color of the rest of the labels to the same white that
+    we used for the needle and knob.
+
+    \target styling-circulargauge-tickmark
+    \section2 The Tickmark Component
+
+    Now let's do the same for the three highest tickmarks:
+
+    \snippet circulargauge-background-range.qml tickmark
+
+    \image styling-circulargauge-tickmark-example.png tickmark
+
+    \target styling-circulargauge-minorTickmark
+    \section2 The Minor Tickmark Component
+
+    For the minor tickmarks, we'll only show those which are not higher than
+    \c 80:
+
+    \snippet circulargauge-background-range.qml minorTickmark
+
+    \image styling-circulargauge-minorTickmark-example.png minorTickmark
+
+    This is because we'll draw something between that range in the next section.
+
+    \target styling-circulargauge-background
+    \section2 The Background Component
+
+    We'll display the range that indicates caution with an orange arc:
+
+    \snippet circulargauge-background-range.qml background
+
+    We define a function to convert degrees to radians, which are the
+    units used by \l {QtQuick::}{Canvas}.
+
+    Next, we do the drawing of the range using Canvas. We draw an arc between
+    \c 80 and \c 100, using the
+    \l {QtQuick.Controls.Styles::CircularGaugeStyle::}{valueToAngle()}
+    function provided by CircularGaugeStyle. Note that we subtract \c 90 degrees
+    before converting to radians, as our origin is north and Canvas' is east.
+
+    The finished product:
+
+    \image styling-circulargauge-background-example.png background
+
+    The complete code for this example is as follows:
+
+    \snippet circulargauge-background-range.qml range
+*/
+
diff --git a/src/controls/doc/src/styling-gauge.qdoc b/src/controls/doc/src/styling-gauge.qdoc
new file mode 100644
index 00000000..195cc4c8
--- /dev/null
+++ b/src/controls/doc/src/styling-gauge.qdoc
@@ -0,0 +1,129 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+    \page styling-gauge.html
+    \title Styling Gauge
+    \brief Tutorial for styling the Gauge control.
+    \ingroup stylingtutorials
+
+    As GaugeStyle's documentation adequately covers common use cases, this
+    tutorial will cover a different scenario: one where the gauge's tickmarks
+    cover the value bar, instead of being aligned to the left or right of it.
+
+    \target styling-gauge-valueBar
+    \section2 The Value Bar Component
+
+    The \l {QtQuick.Controls.Styles::GaugeStyle::}{valueBar}
+    component is resized according to the gauge's value; if the value is low,
+    the bar will be small, and vice versa.
+
+    Starting from the default style, we'll change the color of the value bar to
+    orange, and increase its width slightly:
+
+    \snippet styling-gauge.qml valueBar
+
+    \image styling-gauge-valueBar.png
+
+    As mentioned in the documentation for GaugeStyle, \c implicitWidth needs to
+    be set when defining your own value bar.
+
+    \target styling-gauge-foreground
+    \section2 The Foreground Component
+
+    The \l {QtQuick.Controls.Styles::GaugeStyle::}{foreground}
+    component covers the full width and height of the value bar, even when the
+    value bar is not at its highest. By default, the foreground component
+    provides a "sheen". We'll choose to discard this, and leave it empty
+    instead:
+
+    \snippet styling-gauge.qml foreground
+
+    \image styling-gauge-foreground.png
+
+    \target styling-gauge-tickmark
+    \section2 The Tickmark Component
+
+    The \l {QtQuick.Controls.Styles::GaugeStyle::}{tickmark}
+    component sits to the left or right of the value bar, depending on the
+    control's \l {Gauge::tickmarkAlignment}{tickmarkAlignment}. In order to
+    have the tickmarks cover the width of the value bar instead, we need to do
+    two things:
+    \list 1
+        \li Remove the space the tickmarks previously assumed so that there is
+            just enough space for margins between the tickmarks and value bar.
+        \li Position the tickmarks according to the control's orientation and
+            tickmark alignment.
+    \endlist
+
+    \snippet styling-gauge.qml tickmark
+
+    In this case we chose \c 8 pixel margins, so we set the \c implicitWidth of
+    the tickmarks to that.
+
+    We account for every possible orientation and tickmark alignment, something
+    that is not necessary if the gauge will only ever have one orientation and
+    alignment. For example, if the gauge will always be of a vertical
+    orientation and the tickmarks left-aligned, then it is enough to set the
+    \c x property of the \c Rectangle to the following:
+
+    \code
+    x: parent.implicitWidth
+    \endcode
+
+    The value bar is \c 28 pixels wide, so we give the same width to our
+    tickmarks so that they cover the width of it.
+
+    \image styling-gauge-tickmark.png
+
+    \target styling-gauge-minorTickmark
+    \section2 The Minor Tickmark Component
+
+    The \l {QtQuick.Controls.Styles::GaugeStyle::}{minorTickmark}
+    component is almost identical to its larger counterpart, except that its
+    width does not affect the layout of the gauge's components. We'll do
+    similar adjustments to the ones in the previous section - the only
+    difference being the height:
+
+    \snippet styling-gauge.qml minorTickmark
+
+    \image styling-gauge-minorTickmark.png
+
+    \target styling-gauge-font-size
+    \section2 Adjusting Font Size
+
+    Finally, we increase the \l {Gauge::font}{font} size to \c 15 pixels:
+
+    \snippet styling-gauge.qml font-size
+    \image styling-gauge-font-size.png
+
+    \target styling-gauge-complete
+    \section2 Complete Source Code
+
+    \snippet styling-gauge.qml all
+*/
+