8.7 released—WinterCG Compliance Part 1
Learn more

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:

  • width, height
  • minWidth, minHeight
  • visibility
  • marginTop, marginRight, marginBottom, marginLeft

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:

  • marginTop, marginRight, marginBottom, marginLeft
  • horizontalAlignment, verticalAlignment

The layout process is by nature an resource-intensive process and it's performance highly depends on the number views (and complexity).

TIP

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 rows and columns to achieve the same result:

html
<StackLayout>
  <StackLayout orientation="horizontal">
    <SomeItem />
    <SomeItem />
  </StackLayout>
  <StackLayout orientation="horizontal">
    <!-- ... -->
  </StackLayout>
</StackLayout>

Better version:

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