3 files changed, 54 insertions, 0 deletions
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
new file mode 100644
index 0000000..470a170
--- /dev/null
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -0,0 +1,26 @@
+<Item id="ScrollBar">
+    <!--
+    The properties that define the scrollbar's state.
+    position and pageSize are in the range 0.0 - 1.0.  They are relative to the
+    height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+    of the height of the view.
+    orientation can be either 'Vertical' or 'Horizontal'
+    -->
+    <properties>
+        <Property name="position"/>
+        <Property name="pageSize"/>
+        <Property name="orientation" value="Vertical"/>
+    </properties>
+
+    <!-- A light, semi-transparent background -->
+    <Rect id="Background" radius="{orientation == 'Vertical' ? (width/2) : (height/2)}" color="white" opacity="0.3" anchors.fill="{parent}"/>
+
+    <!-- Size the bar to the required size, depending upon the orientation.  -->
+    <Rect opacity="0.6" color="black"
+          radius="{orientation == 'Vertical' ? (width/2) : (height/2)}"
+          x="{orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)}"
+          y="{orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2}"
+          width="{orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))}"
+          height="{orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)}"
+          />
+</Item>
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
new file mode 100644
index 0000000..697b68a
--- /dev/null
+++ b/examples/declarative/scrollbar/display.qml
@@ -0,0 +1,28 @@
+<Rect width="640" height="480">
+
+    <!-- Create a flickable to view a large image.  -->
+    <Flickable id="View" anchors.fill="{parent}">
+        <Image id="Picture" src="pics/niagara_falls.jpg"/>
+        <viewportWidth>{Picture.width}</viewportWidth>
+        <viewportHeight>{Picture.height}</viewportHeight>
+
+        <!-- Only show the scrollbars when the view is moving.  -->
+        <states>
+            <State name="ShowBars" when="{View.moving}">
+                <SetProperty target="{SBV}" property="opacity" value="1" />
+                <SetProperty target="{SBH}" property="opacity" value="1" />
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="*">
+                <NumericAnimation properties="opacity" duration="400"/>
+            </Transition>
+        </transitions>
+
+    </Flickable>
+
+    <!-- Attach scrollbars to the right and bottom edges of the view.  -->
+    <ScrollBar id="SBV" opacity="0" orientation="Vertical" position="{View.pageYPosition}" pageSize="{View.pageHeight}" width="12" height="{View.height-12}" anchors.right="{View.right}"/>
+    <ScrollBar id="SBH" opacity="0" orientation="Horizontal" position="{View.pageXPosition}" pageSize="{View.pageWidth}" height="12" width="{View.width-12}" anchors.bottom="{View.bottom}"/>
+
+</Rect>
diff --git a/examples/declarative/scrollbar/pics/niagara_falls.jpg b/examples/declarative/scrollbar/pics/niagara_falls.jpg
new file mode 100644
index 0000000..618d808
--- /dev/null
+++ b/examples/declarative/scrollbar/pics/niagara_falls.jpg