Cascades Development

[AllSystemGo]

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

[peter9477 · Accepted solution]

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.

[AllSystemGo]

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?

[peter9477]

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.)

[strobejb]

The QML preview feature in Momentics will save you waiting for replies to these questions - just try it!

[AllSystemGo]

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.