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
Trusted Contributor
AllSystemGo
Posts: 140
Registered: ‎11-23-2010
My Device: Torch 9800
My Carrier: Rogers
Accepted Solution

QML layout question

So I'm quite new in QML and was wondering the correct way to achieve this kind of layout. I would like to show an Image like a background and would like another image on top of that image so it give the effect of a contour.

 

Here's what I think I create a container of layout StackLayout then I have 2 image the bottom one is larger in size then the other one is smaller.

 

Thank you for the help

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: QML layout question

StackLayout is the only layout that couldn't do what you want without real awkwardness. The "stack" part means they're stacked vertically or horizontally (x or y axis), not from back to front (z axis).

To layer back to front, you can use a Container with a DockLayout, and make sure you specify the front image second in the list of children for the Container. The ones that come later are rendered on top of the ones that come earlier.

AbsoluteLayout would be another option, but with the same restriction on the order of specifying them.

You could also use the "background" property of a Container and an ImagePaintDefinition to set one image as the background, in place of the usual Color.Transparent or an explicit color, and then have the "front" image merely be the sole child of that container. In that case even a StackLayout could work, since there's only one child.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Trusted Contributor
AllSystemGo
Posts: 140
Registered: ‎11-23-2010
My Device: Torch 9800
My Carrier: Rogers

Re: QML layout question

Page {
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        Container {
            layout: DockLayout {}
            
            rightPadding: 100
            leftPadding: 100
            topPadding: 100
            bottomPadding: 100
            
            ImageView {
                imageSource: "asset:///images/White.png"
                horizontalAlignment: HorizontalAlignment.Center
            }
            ImageView {
                imageSource: "asset:///images/48.png"
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
            }
        }
    } 
}

 This is what I came up with. Is this how it's suppose to be done?

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: QML layout question

Can't you just try it and see how that looks then tweak? Seems fine from where I sit, but you can judge better than I if you just run the code...

(The extra container is useless in this case, by the way. You should be able to ditch the outer one and get the same results, for now. If you're adding other things inside it then that's obviously a different story.)

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: QML layout question

The QML preview feature in Momentics will save you waiting for replies to these questions - just try it!
Please use plain text.
Trusted Contributor
AllSystemGo
Posts: 140
Registered: ‎11-23-2010
My Device: Torch 9800
My Carrier: Rogers

Re: QML layout question

[ Edited ]

I did try it and I know it worked, was just wondering if it was the correct way to go or I was just lucky.

Please use plain text.