Refactor Avalonia UI Layouts with Zafiro

Avalonia Layout with Zafiro.Avalonia guides the construction of clean, maintainable UI layouts through semantic containers, shared styles, and minimal XAML. It favors a HeaderedContainer over a Border with a manually assembled header, and uses panels such as EdgePanel to flatten layouts. Card and generic components provide other options for structuring views and extracting repeated layouts.

The layout checklist asks whether repeated visual properties have moved into shared styles in axaml files and whether nesting has been reduced. Deep combinations of Grid and StackPanel are identified as an anti-pattern. Colors and brushes should use DynamicResource, while hardcoded color and size literals in views are discouraged.

For UI logic, the guidance prefers ViewModel properties or Behaviors where appropriate and describes Interaction.Behaviors as an alternative to code-behind. Avoiding converters and code-behind is a design preference; it is not a universal correctness or performance rule. IValueConverter is discouraged for simple logic that belongs in the ViewModel.

Use the skill when the work concerns the layout workflow described above. Read only the guidance relevant to the immediate challenge rather than loading every guide for every change. Apply the recommendations within the actual installation, and do not treat the examples as substitutes for environment-specific validation, testing, or expert review.

Keep icons accessible and preserve focus and keyboard behavior. Check light and dark themes, text scaling, and localization. If required inputs, permissions, safety boundaries, or success criteria are missing, clarification is needed before continuing.

The bundled material consists of five guides. themes.md covers theme organization and shared styles; containers.md covers semantic containers; icons.md covers IconExtension and IconOptions; behaviors.md covers interaction behaviors; and components.md covers generic components and avoiding nesting. Select the relevant file according to whether the task concerns themes, view structure, icons, complex interactions, or reusable elements.

The source illustrates icon usage with this expression:

{Icon fa-name}

Examples are partial and require the actual Avalonia, Zafiro, and package versions, plus the necessary XML namespace declarations. UntouchedClassBehavior and icon resources must exist in that installation. Do not assume MultiBinding supplies logical And/Or without a suitable converter. A style file rooted in Styles should not be merged as a ResourceDictionary: use StyleInclude for style collections and ResourceInclude for resource dictionaries according to the file root.

Angor is cited as an exemplary implementation through an author-local solution path. That solution is not bundled with the five guides, so the reference does not provide a locally included example application.