When rendering, a recursive process runs through every view in the view hierarchy in two passes — a measure pass and a layout pass.
During the measure pass every view is measured to obtain its desired size. The following properties are considered during measuring:
During the layout pass every view is placed in a specific layout slot. The slot is determined by the result of the measure pass and the following properties:
The layout process is by nature an resource-intensive process and it's performance highly depends on the number views (and complexity).
It's a good practice to minimize deep nesting of views. Instead, utilize different Layout Containers to achieve a simpler and more organized view hierarchy. This approach improves readability, maintainability and performance.
For example: don't treat
<StackLayout> as a
<div> — instead try to use a
<GridLayout> with specific
columns to achieve the same result:
<StackLayout> <StackLayout orientation="horizontal"> <SomeItem /> <SomeItem /> </StackLayout> <StackLayout orientation="horizontal"> <!-- ... --> </StackLayout> </StackLayout>
<GridLayout rows="auto, auto" columns="auto, auto"> <SomeItem row="0" col="0" /> <SomeItem row="0" col="1" /> <!-- ... row="1" ... --> </GridLayout>
One-offs are fine with the
<StackLayout> approach, but building an entire app with the first approach will usually result in poor performance.