一键导入
avalonia-xaml
Use when writing or reviewing Avalonia XAML markup, .axaml files, XML namespaces, code-behind, markup extensions, or building UI without XAML in code.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Use when writing or reviewing Avalonia XAML markup, .axaml files, XML namespaces, code-behind, markup extensions, or building UI without XAML in code.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when the user wants to see and choose between visual design alternatives for an Avalonia app before implementation — generates 3 design variants as real .axaml files, renders each to PNGs at multiple viewport sizes (compact/wide × light/dark) using Avalonia.Headless, and serves an HTML comparison gallery via a local web server. The user reviews in their browser and tells the agent which variant to build.
Use when designing or polishing the visual quality of an Avalonia app — choosing themes, building a design system, crafting beautiful screens, improving accessibility, motion, layout, or before shipping a UI. Routes to focused sub-skills for tokens, themes, components, motion, accessibility, layout patterns, icons, and pre-delivery review.
Use when working with Avalonia UI framework — building, styling, binding, animating, or deploying Avalonia apps with .NET.
Use when adding or auditing accessibility in an Avalonia app — AutomationProperties, focus order, keyboard navigation, contrast, screen reader (Narrator/NVDA/VoiceOver/Orca) support, dynamic text scaling, reduced motion. Maps WCAG 2.2 AA to Avalonia APIs.
Use when building production-quality Avalonia screens — copy-paste XAML recipes for cards, primary/secondary/icon buttons, dialogs, sidebar nav, command bar, settings page, forms with validation, empty states, toasts, badges, skeletons. All recipes use semantic tokens from the design-system sub-skill.
Use when establishing or refactoring an Avalonia app's design system — semantic color tokens, theme-variant dictionaries (light/dark), typography scale, spacing rhythm, radius and elevation tokens. Produces production-ready Resources/Tokens.axaml.
| name | avalonia-xaml |
| description | Use when writing or reviewing Avalonia XAML markup, .axaml files, XML namespaces, code-behind, markup extensions, or building UI without XAML in code. |
Avalonia uses .axaml extension (not .xaml) to avoid Visual Studio WPF tooling conflicts. XAML is optional; full code-only UI is supported. Avalonia 12 enables compiled bindings by default — x:DataType is required on root elements where bindings are used.
Every .axaml file requires the Avalonia root namespace and language namespace:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:MyApp.ViewModels"
x:Class="MyApp.MainWindow"
x:DataType="vm:MainWindowViewModel"
Title="My App"
Width="800" Height="450">
<TextBlock Text="{Binding Greeting}" />
</Window>
Corresponding code-behind:
// MainWindow.axaml.cs
using Avalonia.Controls;
namespace MyApp;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
| Syntax | Use case | Example |
|---|---|---|
using: | Same solution assemblies (preferred) | xmlns:vm="using:MyApp.ViewModels" |
clr-namespace: | External assemblies (requires ;assembly=) | xmlns:ctrl="clr-namespace:MyLib.Controls;assembly=MyLib" |
| URI | Framework namespaces | xmlns="https://github.com/avaloniaui" |
| Prefix | URI / Syntax | Purpose |
|---|---|---|
| (default) | https://github.com/avaloniaui | All Avalonia controls |
x: | http://schemas.microsoft.com/winfx/2006/xaml | XAML language features |
vm: | using:MyApp.ViewModels | ViewModel types |
conv: | using:MyApp.Converters | Converter classes |
sys: | using:System | System types (Math, String, etc.) |
| Extension | Purpose | Example |
|---|---|---|
{Binding} | Runtime data binding | Text="{Binding Name}" |
{CompiledBinding} | Compile-time checked binding | Text="{CompiledBinding Name}" |
{StaticResource} | One-time resource lookup | Fill="{StaticResource AccentBrush}" |
{DynamicResource} | Live resource lookup (updates on change) | Background="{DynamicResource SystemControlBackground}" |
{x:Static} | Static field/property | Value="{x:Static sys:Math.PI}" |
{x:Type} | Type reference | TargetType="{x:Type Button}" |
{x:Null} | Null literal | Tag="{x:Null}" |
{OnPlatform} | Per-platform value | FontSize="{OnPlatform 12, macOS=14}" |
{OnFormFactor} | Per-form-factor value | Width="{OnFormFactor 200, Mobile=100}" |
| Attribute | Purpose | Notes |
|---|---|---|
x:Class | Links AXAML to code-behind partial class | Must match namespace + class name exactly |
x:Name | Names control for code-behind access | Generates a typed field in partial class |
x:Key | Resource dictionary key | Required for resources in <ResourceDictionary> |
x:DataType | Compiled binding root type | Required on root or DataTemplate when using compiled bindings |
x:CompileBindings | Enable/disable compiled bindings per scope | x:CompileBindings="False" to opt out |
// MyView.axaml.cs
using Avalonia.Controls;
namespace MyApp.Views;
public partial class MyView : UserControl
{
public MyView()
{
InitializeComponent();
}
// Access named controls via generated fields
private void OnButtonClick(object sender, RoutedEventArgs e)
{
// myButton is generated from x:Name="myButton" in AXAML
myButton.IsEnabled = false;
}
}
<!-- MyView.axaml -->
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MyApp.Views.MyView">
<Button x:Name="myButton"
Content="Click Me"
Click="OnButtonClick" />
</UserControl>
Preferred for: dynamic control creation, headless testing, generated UIs.
using Avalonia;
using Avalonia.Controls;
using Avalonia.Layout;
var window = new Window
{
Title = "Code Only",
Width = 400,
Height = 300,
Content = new StackPanel
{
Spacing = 8,
Margin = new Thickness(16),
Children =
{
new TextBlock { Text = "Hello, Avalonia!" },
new Button
{
Content = "Click Me",
HorizontalAlignment = HorizontalAlignment.Left
}
}
}
};
Bindings in code:
var textBox = new TextBox();
textBox.Bind(TextBox.TextProperty, new Binding("Name"));
// Or with compiled binding (requires source object):
textBox[!TextBox.TextProperty] = viewModel.WhenAnyValue(x => x.Name)
.ToBinding(); // with ReactiveUI
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://MyApp/Assets/Colors.axaml"/>
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="BrandBrush" Color="#5B4FCF"/>
</ResourceDictionary>
</Application.Resources>
<!-- Colors.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="BrandColor">#5B4FCF</Color>
</ResourceDictionary>
| Mistake | Fix |
|---|---|
Using .xaml extension | Rename to .axaml |
Missing xmlns="https://github.com/avaloniaui" | Add as first attribute on root element |
clr-namespace: without ;assembly= for external lib | xmlns:x="clr-namespace:MyLib;assembly=MyLib" |
| Compiled binding error: "Cannot resolve symbol" | Add x:DataType="vm:MyViewModel" to root or DataTemplate |
x:Name field not accessible in code-behind | Ensure file is .axaml and InitializeComponent() is called |
{StaticResource} not found at runtime | Resource must be defined before use in document order |
{DynamicResource} for performance-sensitive paths | Use {StaticResource} when resource never changes |