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
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone
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
Posts: 16,992
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

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

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
Posts: 16,992
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

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
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

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

Re: Rounded border for imageview

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

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

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

Re: Rounded border for imageview

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