Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
Posts: 24
Registered: ‎01-08-2013
My Device: dev alpha
My Carrier: elisa

Using progress bar vertically

[ Edited ]

Hi,
I've tried using a progress bar vertically with rotating it as there is no such property for it. However the layout still takes the width of the progress bar to represent it, whereas width and height are inverted in a rotation. So if I explecitly set the width I end up with a tiny progress bar, or if I let the automatic layout, I end up with a large void to cover the the height of the container. Could somehow emulate it with a colored container, but how to round the ends? wouldn't like to keep extending the framework at C++ level...

import bb.cascades 1.0

Page {
    Container {
        Container {
            background: Color.Red
            layout: DockLayout {}
            Container {
                background: Color.Gray
                preferredHeight: 400
                preferredWidth: 400
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
            }
            ProgressIndicator {
                verticalAlignment: VerticalAlignment.Fill
                horizontalAlignment: HorizontalAlignment.Left
                rotationZ: 90
            }
        }
        Container {
        }
    }
}
PS: I use here a DockLayout to show the issue, but my intent is using a StackLayout { orientation: LayoutOrientation.LeftTotRight }
Highlighted
Developer
Posts: 134
Registered: ‎08-03-2011
My Device: torch, Z10
My Carrier: Vodafone, Airtel

Re: Using progress bar vertically

[ Edited ]

 

 

Hi,
try like this

import bb.cascades 1.0
Page {
    Container {
        Container {
            layout: DockLayout {
            }
            Container {
                topPadding: 30
                Container {
                    preferredHeight: 700
                    topPadding: 350
                    bottomPadding: 350
                    leftPadding: -300
                    ProgressIndicator {
                        preferredWidth: 700
                        fromValue: 100
                        toValue: 0
                        value: 50
                        rotationZ: 90
                    }
                }
            }
            Container {
                leftPadding: 100
                topPadding: 30
                rightPadding: 20
                TextField {
                    hintText: "Enter Name"
                }
                TextField {
                    hintText: "Enter Surname"
                }
                Container {
                    horizontalAlignment: HorizontalAlignment.Center
                    Button {
                        text: "Next"
                    }
                }
            }
        }
    }
}

 Output :

 

 Capture.PNG

-----------------------------------------------------------------------
"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
-----------------------------------------------------------------------