Receber por email
← Voltar para o catálogo

avalonia-layout-zafiro

Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.

141estrelas
Atualizado há 4 meses

Ver no GitHub ↗ Licença: MIT

Como adicionar

/plugin marketplace add lingxling/awesome-skills-cn

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/avalonia-layout-zafiro/svg)](https://www.skillteca.com.br/skills/avalonia-layout-zafiro)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

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.
Compartilhar X LinkedIn