Avalonia Layout Zafiro

1---
2name: avalonia-layout-zafiro
3description: Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
4allowed-tools: Read, Write, Edit, Glob, Grep
5---
6 
7# Avalonia Layout with Zafiro.Avalonia
8 
9> Master modern, clean, and maintainable Avalonia UI layouts.
10> **Focus on semantic containers, shared styles, and minimal XAML.**
11 
12## 🎯 Selective Reading Rule
13 
14**Read ONLY files relevant to the layout challenge!**
15 
16---
17 
18## 📑 Content Map
19 
20| File | Description | When to Read |
21|------|-------------|--------------|
22| `themes.md` | Theme organization and shared styles | Setting up or refining app themes |
23| `containers.md` | Semantic containers (`HeaderedContainer`, `EdgePanel`, `Card`) | Structuring views and layouts |
24| `icons.md` | Icon usage with `IconExtension` and `IconOptions` | Adding and customizing icons |
25| `behaviors.md` | `Xaml.Interaction.Behaviors` and avoiding Converters | Implementing complex interactions |
26| `components.md` | Generic components and avoiding nesting | Creating reusable UI elements |
27 
28---
29 
30## 🔗 Related Project (Exemplary Implementation)
31 
32For a real-world example, refer to the **Angor** project:
33`/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln`
34 
35---
36 
37## ✅ Checklist for Clean Layouts
38 
39- [ ] **Used semantic containers?** (e.g., `HeaderedContainer` instead of `Border` with manual header)
40- [ ] **Avoided redundant properties?** Use shared styles in `axaml` files.
41- [ ] **Minimized nesting?** Flatten layouts using `EdgePanel` or generic components.
42- [ ] **Icons via extension?** Use `{Icon fa-name}` and `IconOptions` for styling.
43- [ ] **Behaviors over code-behind?** Use `Interaction.Behaviors` for UI-logic.
44- [ ] **Avoided Converters?** Prefer ViewModel properties or Behaviors unless necessary.
45 
46---
47 
48## ❌ Anti-Patterns
49 
50**DON'T:**
51- Use hardcoded colors or sizes (literals) in views.
52- Create deep nesting of `Grid` and `StackPanel`.
53- Repeat visual properties across multiple elements (use Styles).
54- Use `IValueConverter` for simple logic that belongs in the ViewModel.
55 
56**DO:**
57- Use `DynamicResource` for colors and brushes.
58- Extract repeated layouts into generic components.
59- Leverage `Zafiro.Avalonia` specific panels like `EdgePanel` for common UI patterns.
60