What are semantic containers in Avalonia?

Semantic containers like HeaderedContainer or EdgePanel describe the purpose of the layout section rather than just its appearance, leading to more readable and structured XAML compared to generic Borders or Grids.

What is Zafiro.Avalonia?

Zafiro.Avalonia is a library that extends the Avalonia UI framework with specialized controls, panels, and behaviors designed to simplify layout creation and improve code maintainability.

Why does this skill recommend Behaviors over Converters?

Behaviors allow for more declarative and reusable UI logic within the XAML itself, keeping the ViewModel focused on data and avoiding the boilerplate code often required for IValueConverters.

How does this skill help with XAML redundancy?

It provides specific patterns for extracting shared styles into axaml files and using semantic containers, which prevents the repetition of visual properties across multiple UI elements.

Avalonia Layout with Zafiro

Name: Avalonia Layout with Zafiro
Author: claudiodearaujo

byclaudiodearaujo

Design Tools

Optimizes Avalonia UI development by implementing clean, semantic layouts using the Zafiro.Avalonia framework.

About

This skill provides expert guidance for building modern and maintainable user interfaces with Avalonia UI and the Zafiro.Avalonia library. It streamlines XAML development by emphasizing semantic containers like HeaderedContainer and EdgePanel, promoting shared styles to reduce redundancy, and utilizing behaviors to handle complex interactions without code-behind. By following these patterns, developers can achieve flatter UI hierarchies, consistent icon management, and more scalable desktop application designs while avoiding common anti-patterns like hardcoded literals and deep nesting.

Key Features

Shared style optimization to eliminate redundant XAML properties
Advanced icon management via IconExtension and IconOptions
Semantic container implementation using HeaderedContainer and EdgePanel
Behavior-driven UI logic to replace complex IValueConverters
Layout flattening techniques to minimize nested Grids and StackPanels
0 GitHub stars

Use Cases

Standardizing visual themes and styling across multi-view desktop applications
Refactoring complex Avalonia XAML into clean, reusable semantic components
Implementing declarative UI interactions using Behaviors to keep ViewModels clean

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter avalonia-layout-zafiro

For use in Claude.ai and ChatGPT

Download Skill

GitHub