Avalonia Layout with Zafiro.Avalonia

Master modern, clean, and maintainable Avalonia UI layouts. Focus on semantic containers, shared styles, and minimal XAML.

🎯 Selective Reading Rule

📑 Content Map

themes.md

containers.md

HeaderedContainer

EdgePanel

Card

icons.md

IconExtension

IconOptions

behaviors.md

Xaml.Interaction.Behaviors

components.md

🔗 Related Project (Exemplary Implementation)

/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln

✅ Checklist for Clean Layouts

• Used semantic containers? (e.g.,

  HeaderedContainer

  instead of

  Border

  with manual header)
• Avoided redundant properties? Use shared styles in

  axaml

  files.
• Minimized nesting? Flatten layouts using

  EdgePanel

  or generic components.
• Icons via extension? Use

  {Icon fa-name}

  and

  IconOptions

  for styling.
• Behaviors over code-behind? Use

  Interaction.Behaviors

  for UI-logic.
• Avoided Converters? Prefer ViewModel properties or Behaviors unless necessary.

❌ Anti-Patterns

• Use hardcoded colors or sizes (literals) in views.
• Create deep nesting of

  Grid

  and

  StackPanel

  .
• Repeat visual properties across multiple elements (use Styles).
• Use

  IValueConverter

  for simple logic that belongs in the ViewModel.

• Use

  DynamicResource

  for colors and brushes.
• Extract repeated layouts into generic components.
• Leverage

  Zafiro.Avalonia

  specific panels like

  EdgePanel

  for common UI patterns.