Merge remote-tracking branch 'origin/5.7' into 5.8

Conflicts:
	examples/quickcontrols2/gallery/gallery.qrc
	src/imports/calendar/doc/snippets/qtlabscalendar-calendarmodel.qml
	src/imports/calendar/doc/snippets/qtlabscalendar-dayofweekrow-layout.qml
	src/imports/calendar/doc/snippets/qtlabscalendar-dayofweekrow.qml
	src/imports/calendar/doc/snippets/qtlabscalendar-monthgrid-layout.qml
	src/imports/calendar/doc/snippets/qtlabscalendar-monthgrid.qml
	src/imports/calendar/doc/snippets/qtlabscalendar-weeknumbercolumn-layout.qml
	src/imports/calendar/doc/snippets/qtlabscalendar-weeknumbercolumn.qml
	src/imports/controls/doc/qtquickcontrols2.qdocconf
	src/imports/controls/doc/snippets/qtlabscalendar-calendarmodel.qml
	src/imports/controls/doc/snippets/qtlabscalendar-dayofweekrow-layout.qml
	src/imports/controls/doc/snippets/qtlabscalendar-dayofweekrow.qml
	src/imports/controls/doc/snippets/qtlabscalendar-monthgrid-layout.qml
	src/imports/controls/doc/snippets/qtlabscalendar-monthgrid.qml
	src/imports/controls/doc/snippets/qtlabscalendar-weeknumbercolumn-layout.qml
	src/imports/controls/doc/snippets/qtlabscalendar-weeknumbercolumn.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-calendarmodel.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-dayofweekrow-layout.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-dayofweekrow.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-monthgrid-layout.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-monthgrid.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-weeknumbercolumn-layout.qml
	src/imports/controls/doc/snippets/screenshots/qtlabscalendar-weeknumbercolumn.qml
	src/imports/controls/qtquickcontrols2plugin.cpp
	src/quicktemplates2/qquicktooltip.cpp
	src/quicktemplates2/qquicktooltip_p.h
	src/quicktemplates2/qquicktumbler.cpp
	tests/auto/controls/data/tst_spinbox.qml
	tests/auto/controls/data/tst_tumbler.qml
	tests/auto/qquickmaterialstyle/data/tst_material.qml

Change-Id: I25b7473b47739043b6f768603bece30b18021318

22 files changed, 245 insertions, 228 deletions

diff --git a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
index 2450d495..5c80587d 100644
--- a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
+++ b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
@@ -187,7 +187,7 @@ This line determines where the example will be copied to when running
 
 Now we can build and run the application:
 
-\image qtquickcontrols2-chattutorial-chapter1.png
+\borderedimage qtquickcontrols2-chattutorial-chapter1.png
 
 \section1 Chapter 2: Lists
 
@@ -261,7 +261,7 @@ The image will be \c 40 pixels wide and \c 40 pixels high. We'll base the
 height of the delegate on the image's height, so that we don't have any empty
 vertical space.
 
-\image qtquickcontrols2-chattutorial-chapter2.png
+\borderedimage qtquickcontrols2-chattutorial-chapter2.png
 
 \section1 Chapter 3: Navigation
 
@@ -312,7 +312,7 @@ In chapter 2, we added a ListView below the header. If you run the application
 for that chapter, you'll see that the contents of the view can be scrolled over
 the top of the header:
 
-\image qtquickcontrols2-chattutorial-chapter2-listview-header.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter2-listview-header.gif
 
 This is not that nice, especially if the text in the
 delegates is long enough that it reaches the text in the header. What we
@@ -332,7 +332,7 @@ usual, comes from the application style. Here it is in action:
 \printuntil }
 \printuntil }
 
-\image qtquickcontrols2-chattutorial-chapter3-listview-header.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter3-listview-header.gif
 
 It has no layout of its own, so we center the label within it ourselves.
 
@@ -433,7 +433,7 @@ After filling the width and height of its parent, we also set some margins on
 the view. This gives us a nice alignment with the placeholder text in the
 "compose message" field:
 
-\image qtquickcontrols2-chattutorial-chapter3-view-margins.png
+\borderedimage qtquickcontrols2-chattutorial-chapter3-view-margins.png
 
 Next, we set \l {ListView::}{displayMarginBeginning} and \l
 {ListView::}{displayMarginEnd}. These properties ensure that the delegates
@@ -485,7 +485,7 @@ does not go outside of the screen.
 
 Finally, the button is only enabled when there is actually a message to send.
 
-\image qtquickcontrols2-chattutorial-chapter3.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter3.gif
 
 \section1 Chapter 4: Models
 
@@ -663,7 +663,7 @@ timestamp that we want to display below every message:
 \printuntil }
 \printuntil }
 
-\image qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
+\borderedimage qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
 
 Now that we have a proper model, we can use its \c recipient role in the
 expression for the \c sentByMe property.
@@ -685,7 +685,7 @@ smaller value. However, in the image below, the message text is quite long, so
 the smaller value (the width of the view) is chosen, ensuring that the text
 stops at the opposite edge of the screen:
 
-\image qtquickcontrols2-chattutorial-chapter4-long-message.png
+\borderedimage qtquickcontrols2-chattutorial-chapter4-long-message.png
 
 In order to display the timestamp for each message that we discussed earlier,
 we use a Label. The date and time are formatted with
@@ -701,7 +701,7 @@ First, we call the invokable \c sendMessage() function of the model, which
 inserts a new row into the Conversations database table. Then, we clear the
 text field to make way for future input.
 
-\image qtquickcontrols2-chattutorial-chapter4.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter4.gif
 
 \section1 Chapter 5: Styling
 
@@ -714,12 +714,12 @@ So far, we've just been testing the application with the Default style. If we
 run it with the \l {Material Style}, for example, we'll immediately see some issues.
 Here is the Contacts page:
 
-\image qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
 
 The header text is black on a dark blue background, which is very difficult to
 read. The same thing occurs with the Conversations page:
 
-\image qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
 
 The solution is to tell the toolbar that it should use the \e "Dark" theme, so
 that this information is propagated to its children, allowing them to switch
@@ -789,13 +789,13 @@ We'll make the same changes to \c ConversationPage.qml:
 
 Now both pages look correct:
 
-\image qtquickcontrols2-chattutorial-chapter5-contacts-material.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-material.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-material.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-material.png
 
 Let's try out the Universal style:
 
-\image qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
 
 No issues there. For a relatively simple application such as this one, there
 should be very few adjustments necessary when switching styles.
@@ -814,8 +814,8 @@ Theme=Dark
 
 Once this is done, build and run the application. This is what you should see:
 
-\image qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
 
 Both pages look fine. Now add an entry for the Universal style:
 
@@ -826,8 +826,8 @@ Theme=Dark
 
 After building and running the application, you should see these results:
 
-\image qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
 
 \section1 Summary
 
diff --git a/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml
index 908d8f6d..d9e5f788 100644
--- a/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml
+++ b/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml
@@ -41,12 +41,12 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
@@ -57,7 +57,7 @@ Pane {
         }
 
         BusyIndicator {
-            readonly property int size: Math.min(pane.availableWidth, pane.availableHeight) / 5
+            readonly property int size: Math.min(page.availableWidth, page.availableHeight) / 5
             width: size
             height: size
             anchors.horizontalCenter: parent.horizontalCenter
diff --git a/examples/quickcontrols2/gallery/pages/ButtonPage.qml b/examples/quickcontrols2/gallery/pages/ButtonPage.qml
index 181cc2fc..7e945fa1 100644
--- a/examples/quickcontrols2/gallery/pages/ButtonPage.qml
+++ b/examples/quickcontrols2/gallery/pages/ButtonPage.qml
@@ -41,51 +41,42 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Flickable {
-    id: flickable
-    contentHeight: pane.height
+ScrollablePage {
+    id: page
 
-    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, page.availableWidth / 3))
 
-    Pane {
-        id: pane
+    Column {
+        spacing: 40
         width: parent.width
 
-        Column {
-            id: column
-            spacing: 40
+        Label {
             width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Button presents a push-button that can be pushed or clicked by the user. "
+                + "Buttons are normally used to perform an action, or to answer a question."
+        }
 
-            Label {
-                width: parent.width
-                wrapMode: Label.Wrap
-                horizontalAlignment: Qt.AlignHCenter
-                text: "Button presents a push-button that can be pushed or clicked by the user. "
-                    + "Buttons are normally used to perform an action, or to answer a question."
-            }
-
-            Column {
-                spacing: 20
-                anchors.horizontalCenter: parent.horizontalCenter
+        Column {
+            spacing: 20
+            anchors.horizontalCenter: parent.horizontalCenter
 
-                Button {
-                    text: "First"
-                    width: itemWidth
-                }
-                Button {
-                    id: button
-                    text: "Second"
-                    width: itemWidth
-                    highlighted: true
-                }
-                Button {
-                    text: "Third"
-                    enabled: false
-                    width: itemWidth
-                }
+            Button {
+                text: "First"
+                width: itemWidth
+            }
+            Button {
+                id: button
+                text: "Second"
+                width: itemWidth
+                highlighted: true
+            }
+            Button {
+                text: "Third"
+                enabled: false
+                width: itemWidth
             }
         }
     }
-
-    ScrollIndicator.vertical: ScrollIndicator { }
 }
diff --git a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
index 3793cc1f..8d48d32d 100644
--- a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
+++ b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
@@ -41,46 +41,37 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Flickable {
-    id: flickable
-    contentHeight: pane.height
+ScrollablePage {
+    id: page
 
-    Pane {
-        id: pane
+    Column {
+        spacing: 40
         width: parent.width
 
-        Column {
-            id: column
-            spacing: 40
+        Label {
             width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "CheckBox presents an option button that can be toggled on or off. "
+                + "Check boxes are typically used to select one or more options from a set of options."
+        }
 
-            Label {
-                width: parent.width
-                wrapMode: Label.Wrap
-                horizontalAlignment: Qt.AlignHCenter
-                text: "CheckBox presents an option button that can be toggled on or off. "
-                    + "Check boxes are typically used to select one or more options from a set of options."
-            }
-
-            Column {
-                spacing: 20
-                anchors.horizontalCenter: parent.horizontalCenter
+        Column {
+            spacing: 20
+            anchors.horizontalCenter: parent.horizontalCenter
 
-                CheckBox {
-                    text: "First"
-                    checked: true
-                }
-                CheckBox {
-                    text: "Second"
-                }
-                CheckBox {
-                    text: "Third"
-                    checked: true
-                    enabled: false
-                }
+            CheckBox {
+                text: "First"
+                checked: true
+            }
+            CheckBox {
+                text: "Second"
+            }
+            CheckBox {
+                text: "Third"
+                checked: true
+                enabled: false
             }
         }
     }
-
-    ScrollIndicator.vertical: ScrollIndicator { }
 }
diff --git a/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml b/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml
index bf2b70d8..c800ba73 100644
--- a/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml
+++ b/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml
@@ -41,8 +41,8 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
@@ -58,7 +58,7 @@ Pane {
 
         ComboBox {
             model: ["First", "Second", "Third"]
-            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, page.availableWidth / 3))
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }
diff --git a/examples/quickcontrols2/gallery/pages/DialPage.qml b/examples/quickcontrols2/gallery/pages/DialPage.qml
index 2901cb4d..b60fa032 100644
--- a/examples/quickcontrols2/gallery/pages/DialPage.qml
+++ b/examples/quickcontrols2/gallery/pages/DialPage.qml
@@ -41,8 +41,8 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
diff --git a/examples/quickcontrols2/gallery/pages/FramePage.qml b/examples/quickcontrols2/gallery/pages/FramePage.qml
index 579e7e2d..b2d24dff 100644
--- a/examples/quickcontrols2/gallery/pages/FramePage.qml
+++ b/examples/quickcontrols2/gallery/pages/FramePage.qml
@@ -41,14 +41,14 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
-    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2))
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
@@ -62,7 +62,7 @@ Pane {
 
             Column {
                 spacing: 20
-                width: pane.itemWidth
+                width: page.itemWidth
 
                 RadioButton {
                     text: "First"
diff --git a/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml b/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml
index 52676721..c4ceb45d 100644
--- a/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml
+++ b/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml
@@ -41,14 +41,14 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
-    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2))
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
@@ -63,7 +63,7 @@ Pane {
 
             Column {
                 spacing: 20
-                width: pane.itemWidth
+                width: page.itemWidth
 
                 RadioButton {
                     text: "First"
diff --git a/examples/quickcontrols2/gallery/pages/MenuPage.qml b/examples/quickcontrols2/gallery/pages/MenuPage.qml
index 18321038..49e6da07 100644
--- a/examples/quickcontrols2/gallery/pages/MenuPage.qml
+++ b/examples/quickcontrols2/gallery/pages/MenuPage.qml
@@ -41,12 +41,12 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
@@ -59,7 +59,7 @@ Pane {
             id: button
             text: "Open"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, page.availableWidth / 3))
 
             onClicked: optionsMenu.open()
         }
diff --git a/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml
index 8f17a302..43982b43 100644
--- a/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml
+++ b/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml
@@ -41,12 +41,12 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
diff --git a/examples/quickcontrols2/gallery/pages/PopupPage.qml b/examples/quickcontrols2/gallery/pages/PopupPage.qml
index 432ff8d8..ac3b02b7 100644
--- a/examples/quickcontrols2/gallery/pages/PopupPage.qml
+++ b/examples/quickcontrols2/gallery/pages/PopupPage.qml
@@ -41,12 +41,12 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
@@ -60,7 +60,7 @@ Pane {
             id: button
             text: "Open"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, page.availableWidth / 3))
 
             onClicked: settingsDialog.open()
         }
diff --git a/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml b/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml
index 85024c07..1548192f 100644
--- a/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml
+++ b/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml
@@ -41,14 +41,14 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
-    readonly property int itemWidth: Math.max(bar.implicitWidth, pane.availableWidth / 3)
+    readonly property int itemWidth: Math.max(bar.implicitWidth, page.availableWidth / 3)
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
diff --git a/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml b/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml
index e6f178a8..452d0425 100644
--- a/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml
+++ b/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml
@@ -41,45 +41,36 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Flickable {
-    id: flickable
-    contentHeight: pane.height
+ScrollablePage {
+    id: page
 
-    Pane {
-        id: pane
+    Column {
+        spacing: 40
         width: parent.width
 
-        Column {
-            id: column
-            spacing: 40
+        Label {
             width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "RadioButton presents an option button that can be toggled on or off. "
+                + "Radio buttons are typically used to select one option from a set of options."
+        }
 
-            Label {
-                width: parent.width
-                wrapMode: Label.Wrap
-                horizontalAlignment: Qt.AlignHCenter
-                text: "RadioButton presents an option button that can be toggled on or off. "
-                    + "Radio buttons are typically used to select one option from a set of options."
-            }
-
-            Column {
-                spacing: 20
-                anchors.horizontalCenter: parent.horizontalCenter
+        Column {
+            spacing: 20
+            anchors.horizontalCenter: parent.horizontalCenter
 
-                RadioButton {
-                    text: "First"
-                }
-                RadioButton {
-                    text: "Second"
-                    checked: true
-                }
-                RadioButton {
-                    text: "Third"
-                    enabled: false
-                }
+            RadioButton {
+                text: "First"
+            }
+            RadioButton {
+                text: "Second"
+                checked: true
+            }
+            RadioButton {
+                text: "Third"
+                enabled: false
             }
         }
     }
-
-    ScrollIndicator.vertical: ScrollIndicator { }
 }
diff --git a/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml b/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml
index df354fd4..6a74e348 100644
--- a/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml
+++ b/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml
@@ -41,14 +41,14 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
-    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3))
+    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, page.availableWidth / 3))
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
diff --git a/examples/quickcontrols2/gallery/pages/ScrollablePage.qml b/examples/quickcontrols2/gallery/pages/ScrollablePage.qml
new file mode 100644
index 00000000..2a0f1165
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ScrollablePage.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.6
+import QtQuick.Controls 2.0
+
+Page {
+    id: page
+
+    default property alias content: pane.contentItem
+
+    Flickable {
+        anchors.fill: parent
+        contentHeight: pane.implicitHeight
+        flickableDirection: Flickable.AutoFlickIfNeeded
+
+        Pane {
+            id: pane
+            width: parent.width
+        }
+
+        ScrollIndicator.vertical: ScrollIndicator { }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/SliderPage.qml b/examples/quickcontrols2/gallery/pages/SliderPage.qml
index 886af3df..03cb7696 100644
--- a/examples/quickcontrols2/gallery/pages/SliderPage.qml
+++ b/examples/quickcontrols2/gallery/pages/SliderPage.qml
@@ -41,14 +41,14 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
-    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3))
+    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, page.availableWidth / 3))
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
diff --git a/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml b/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml
index b8b42b49..c75982c2 100644
--- a/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml
+++ b/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml
@@ -41,14 +41,14 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     readonly property int itemWidth: Math.max(box.implicitWidth, Math.min(box.implicitWidth * 2, pane.availableWidth / 3))
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
diff --git a/examples/quickcontrols2/gallery/pages/SwitchPage.qml b/examples/quickcontrols2/gallery/pages/SwitchPage.qml
index 24fe5478..ccaa4e1e 100644
--- a/examples/quickcontrols2/gallery/pages/SwitchPage.qml
+++ b/examples/quickcontrols2/gallery/pages/SwitchPage.qml
@@ -41,45 +41,36 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Flickable {
-    id: flickable
-    contentHeight: pane.height
+ScrollablePage {
+    id: page
 
-    Pane {
-        id: pane
+    Column {
+        spacing: 40
         width: parent.width
 
-        Column {
-            id: column
-            spacing: 40
+        Label {
             width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Switch is an option button that can be dragged or toggled on or off. "
+                + "Switches are typically used to select between two states."
+        }
 
-            Label {
-                width: parent.width
-                wrapMode: Label.Wrap
-                horizontalAlignment: Qt.AlignHCenter
-                text: "Switch is an option button that can be dragged or toggled on or off. "
-                    + "Switches are typically used to select between two states."
-            }
-
-            Column {
-                spacing: 20
-                anchors.horizontalCenter: parent.horizontalCenter
+        Column {
+            spacing: 20
+            anchors.horizontalCenter: parent.horizontalCenter
 
-                Switch {
-                    text: "First"
-                }
-                Switch {
-                    text: "Second"
-                    checked: true
-                }
-                Switch {
-                    text: "Third"
-                    enabled: false
-                }
+            Switch {
+                text: "First"
+            }
+            Switch {
+                text: "Second"
+                checked: true
+            }
+            Switch {
+                text: "Third"
+                enabled: false
             }
         }
     }
-
-    ScrollIndicator.vertical: ScrollIndicator { }
 }
diff --git a/examples/quickcontrols2/gallery/pages/TextAreaPage.qml b/examples/quickcontrols2/gallery/pages/TextAreaPage.qml
index 696b1983..97669f2f 100644
--- a/examples/quickcontrols2/gallery/pages/TextAreaPage.qml
+++ b/examples/quickcontrols2/gallery/pages/TextAreaPage.qml
@@ -41,34 +41,26 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Flickable {
-    id: flickable
-    contentHeight: pane.height
+ScrollablePage {
+    id: page
 
-    Pane {
-        id: pane
+    Column {
+        spacing: 40
         width: parent.width
 
-        Column {
-            spacing: 40
-            anchors.fill: parent
-
-            Label {
-                width: parent.width
-                wrapMode: Label.Wrap
-                horizontalAlignment: Qt.AlignHCenter
-                text: "TextArea is a multi-line text editor."
-            }
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "TextArea is a multi-line text editor."
+        }
 
-            TextArea {
-                width: Math.max(implicitWidth, Math.min(implicitWidth * 3, pane.availableWidth / 3))
-                anchors.horizontalCenter: parent.horizontalCenter
+        TextArea {
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 3, pane.availableWidth / 3))
+            anchors.horizontalCenter: parent.horizontalCenter
 
-                wrapMode: TextArea.Wrap
-                text: "TextArea\n...\n...\n..."
-            }
+            wrapMode: TextArea.Wrap
+            text: "TextArea\n...\n...\n..."
         }
     }
-
-    ScrollIndicator.vertical: ScrollIndicator { }
 }
diff --git a/examples/quickcontrols2/gallery/pages/TextFieldPage.qml b/examples/quickcontrols2/gallery/pages/TextFieldPage.qml
index d41a17a1..9917da33 100644
--- a/examples/quickcontrols2/gallery/pages/TextFieldPage.qml
+++ b/examples/quickcontrols2/gallery/pages/TextFieldPage.qml
@@ -41,12 +41,12 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
-        anchors.fill: parent
+        width: parent.width
 
         Label {
             width: parent.width
diff --git a/examples/quickcontrols2/gallery/pages/ToolTipPage.qml b/examples/quickcontrols2/gallery/pages/ToolTipPage.qml
index f5df5623..98ecd92e 100644
--- a/examples/quickcontrols2/gallery/pages/ToolTipPage.qml
+++ b/examples/quickcontrols2/gallery/pages/ToolTipPage.qml
@@ -41,8 +41,8 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40
diff --git a/examples/quickcontrols2/gallery/pages/TumblerPage.qml b/examples/quickcontrols2/gallery/pages/TumblerPage.qml
index 2e248bfc..3b290dcb 100644
--- a/examples/quickcontrols2/gallery/pages/TumblerPage.qml
+++ b/examples/quickcontrols2/gallery/pages/TumblerPage.qml
@@ -41,8 +41,8 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 
-Pane {
-    id: pane
+ScrollablePage {
+    id: page
 
     Column {
         spacing: 40