summaryrefslogtreecommitdiffstats
path: root/examples/declarative/scrollbar/display.qml
blob: 4412d7f66746dd3c46894f202f3fdd81bc2bee2a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
        viewportHeight: Picture.height
        // 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
                }
            }
        ]
        transitions: [
            Transition {
                fromState: "*"
                toState: "*"
                NumericAnimation {
                    properties: "opacity"
                    duration: 400
                }
            }
        ]
    }
    // 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
    }
}