designing-avalonia-customcontrol-architecture

Designs AvaloniaUI desktop project structures using CustomControl with ControlTheme styling.

Updated Nov 22, 2023
One-click install
npx skills add https://github.com/parksanghoon-sys/TestCode --skill designing-avalonia-customcontrol-architecture-parksanghoon-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-avalonia-customcontrol-architecture
Source: https://github.com/parksanghoon-sys/TestCode/tree/main/src/Modbus/.agents/skills/designing-avalonia-customcontrol-architecture
Command: npx skills add https://github.com/parksanghoon-sys/TestCode --skill designing-avalonia-customcontrol-architecture-parksanghoon-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers moving from WPF to AvaloniaUI often struggle with how to structure custom control libraries and where to define styles, since AvaloniaUI replaces Style/ControlTemplate with ControlTheme and uses different resource merging rules. This Skill provides a concrete project layout and AXAML authoring rules so new AvaloniaUI desktop projects start with a clean, theme-separated architecture. ## Core Features & Use Cases - Custom Control Library Structure: Defines a recommended solution layout with Themes/Generic.axaml, per-control AXAML theme files, AssemblyInfo.cs XmlnsDefinition, and StyledProperty-based control classes. - ResourceInclude vs MergeResourceInclude Guidance: Clarifies that ResourceInclude belongs in regular ResourceDictionaries like Generic.axaml while MergeResourceInclude is only for App.axaml Application.Resources. - WPF-to-AvaloniaUI Migration Reference: Provides a comparison table covering file extensions, ControlTheme vs ControlTemplate, Pseudo Classes vs Triggers, CSS Classes support, and StyledProperty vs DependencyProperty. - Use Case: When scaffolding a new AvaloniaUI desktop app with reusable custom buttons and text boxes, use this Skill to generate the control library project, theme files, and sample App/MainWindow code following the ControlTheme pattern. ## Quick Start Create a new AvaloniaUI custom control library project with a CustomButton using ControlTheme and StyledProperty following the recommended structure.

Frequently Asked Questions about designing-avalonia-customcontrol-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom control in AvaloniaUI?▼

Create a class inheriting from an Avalonia control, register properties with AvaloniaProperty.Register as StyledProperty, and define its look in a ControlTheme inside Themes/Generic.axaml. Add an XmlnsDefinition in AssemblyInfo.cs so the control resolves in AXAML.

What is the difference between ResourceInclude and MergeResourceInclude in Avalonia?▼

ResourceInclude is used inside regular ResourceDictionary files such as Generic.axaml or style files. MergeResourceInclude is used only within Application.Resources in App.axaml to merge top-level dictionaries.

How does AvaloniaUI styling differ from WPF?▼

AvaloniaUI uses ControlTheme instead of Style plus ControlTemplate, Pseudo Classes like :pointerover instead of Triggers, and supports CSS-style Classes. Files use the .axaml extension and properties are StyledProperty or DirectProperty instead of DependencyProperty.

Can I reuse WPF styles directly in an AvaloniaUI project?▼

No, WPF styles cannot be reused directly because AvaloniaUI replaces ControlTemplate and Triggers with ControlTheme and Pseudo Class selectors. You must rewrite styles as ControlTheme definitions in .axaml files and convert DependencyProperty registrations to StyledProperty.

Where should ControlTheme files be placed in an Avalonia control library?▼

Place individual control themes as separate .axaml files under a Themes folder and merge them into Generic.axaml using ResourceInclude. This keeps each control's theme modular and allows team members to work on separate files.