Avalonia Layout with Zafiro.Avalonia

> Master modern, clean, and maintainable Avalonia UI layouts.

> Focus on semantic containers, shared styles, and minimal XAML.

Read ONLY files relevant to the layout challenge!

---

| File | Description | When to Read |

|------|-------------|--------------|

| themes.md | Theme organization and shared styles | Setting up or refining app themes |

| containers.md | Semantic containers (HeaderedContainer, EdgePanel, Card) | Structuring views and layouts |

| icons.md | Icon usage with IconExtension and IconOptions | Adding and customizing icons |

| behaviors.md | Xaml.Interaction.Behaviors and avoiding Converters | Implementing complex interactions |

| components.md | Generic components and avoiding nesting | Creating reusable UI elements |

---

For a real-world example, refer to the Angor project:

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

---

●[ ] 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.

---

DON'T:

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

DO:

●Use DynamicResource for colors and brushes.

●Extract repeated layouts into generic components.

●Leverage Zafiro.Avalonia specific panels like EdgePanel for common UI patterns.

avalonia-layout-zafiro