avalonia-layout-zafiro

CategoryGeneral
AuthorAgentic Awesome Skills 社区
LicenseMIT
Rating4.60/5
Uses16.1K

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

Read ONLY files relevant to the layout challenge!

---

📑 Content Map

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

---

🔗 Related Project (Exemplary Implementation)

For a real-world example, refer to the Angor project:
/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

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.

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Join our Telegram