Rendering order or sibling nodes

How-to Discussions
1

What defines the render order when my app structure is like this?

<App>
	<ClientPanel>
		<Panel>
			<ScrollView>
				<Panel>
					<ColumnLayout ColumnCount="3"/>
					<Each ... >
					</Each>
				</Panel>
			</ScrollView>
			<Image File="Assets/background.png" />
		</Panel>
	</ClientPanel>
</App>

The ScrollView wasn’t visible when the Image was the first sibling in the Panel. For a web developer this is a bit confusing since in HTML and SVG the last sibling is on top. Or is this a wrong way to add a background image?

EDIT: Topic should be “for sibling nodes”

EDIT2: I just found the Layer="Background" property in the hikr example but having only these 3 layers is a bit limited imo

2

The default rendering order is last child -> first child. Those at the “top” of the code are also at the “top” of the visual stack.

We don’t have use-cases yet where more layers are required. You can also use the ZOffset parameter to tweak positioning (it’s still local to the panel however).

3

The default rendering order is last child → first child.

Just being curious, why this decision? People are used top being drawn first (at least in HTML and Android Layouts).

4

This is definitely one of those cases where expectations vary depending on which tools and frameworks you have experience with.

We decided to go with the behavior that matches typical layer-based design tools, such as Photoshop & Sketch (as mentioned here).