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
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
Accepted Solution

Rounded border for imageview

Hi,

 

Is there any other way than using image for creating border around a container or imageview?

Rujuta Trivedi
Developer
simon_hain
Posts: 16,282
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport

Re: Rounded border for imageview

currently there are no dedicated border classes.
you can create non-round borders by using different containers.
for round borders it seems best to use nine-slice images.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition

Re: Rounded border for imageview

can you please give me an example in qml because I tried nested container but its not being displayed properly. Its showing one after another

Rujuta Trivedi
Developer
simon_hain
Posts: 16,282
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport

Re: Rounded border for imageview

something like this, add a background color in the outer one for a border effect.

Container{
topMargin: 20
bottomMargin: 20
leftMargin: 20
rightMargin: 20
Container{
Label{
text: "text"}
}
}
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
javayoung
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900

Re: Rounded border for imageview

[ Edited ]

I have also tried to make a round border of container, but I found it is not possible. The only way is that you can add a 9 slice background picture. Like this post said:

 

Cascades qml does not support borders or rounded corners. Unless someone has a better solution what I've done is to wrap the imageview in a container and use a 9-slice image for the container background.

A rough example:

Container {
    topPadding: 5
    leftPadding: 5
    rightPadding: 5
    bottomPadding: 5
    background: mybackground.imagePaint
    ImageView {
        imageSource: "asset:///images/image1.png"
    }
    attachedObjects: [
        ImagePaintDefinition {
            id: mybackground
            imageSource: "asset:///images/bgimage.amd"
        }
    ]
}

Adjust the padding as needed for thinner/thicker border.

You can also refer with this link: http://developer.blackberry.com/cascades/documentation/ui/image_resources/nine_slicing.html

 

You can also download the sample application of cascadescookbookqml, there is a Nineslice demo

 

Thanks




p(^_^)q
Good good study, day day up
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition

Re: Rounded border for imageview

Margin didn't work for me.I used padding .Thanks

Rujuta Trivedi
Developer
javayoung
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900

Re: Rounded border for imageview

[ Edited ]

I tried Simon's solution whatever padding or margin but it is still rect border. Did I miss something?




p(^_^)q
Good good study, day day up
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition

Re: Rounded border for imageview

No, simon's solution was for rect border only. Rounded border is possible through image
Rujuta Trivedi