layout performance - davidortinau/ControlGallery GitHub Wiki

💬 Copilot Chat Prompt

Help me identify performance issues in my .NET MAUI layouts. Look for deeply nested layouts (e.g., nested StackLayouts), ScrollViews with many children, visual tree depth over 10, or pages with more than 50 elements. Suggest layout simplifications.

Overly complex or deep layouts increase layout time and memory usage.

• Deep nesting of layout controls (e.g., multiple StackLayout/Grid containers nested more than 10 levels deep)
• ScrollView with many children rendered all at once (especially if used for long lists)
• Pages with more than 50 total UI elements visible
• Redundant layouts (e.g., a StackLayout with a single child inside a Grid with one row)

• Use the Live Visual Tree and Live Property Explorer in Visual Studio to measure hierarchy depth and control counts
• Count children manually in XAML or break pages into smaller partial views/components if unclear

❌ Inefficient Layout:

<StackLayout>
  <StackLayout>
    <StackLayout>
      <Grid>
        <StackLayout>
          <Label Text="Nested!" />
        </StackLayout>
      </Grid>
    </StackLayout>
  </StackLayout>
</StackLayout>

✅ Better Layout Using Grid:

<Grid>
  <Label Text="Nested!" />
</Grid>

• Replace nested layouts with a Grid
• Move non-visible elements out of the live tree
• Use CollectionView with virtualization instead of ScrollView

➡️ Next: Catch Memory Leaks

• Layout performance tips - .NET MAUI Docs
• CollectionView vs ListView
• Live Visual Tree in Visual Studio