Master Avalonia Suite

A Claude Code skill providing a complete toolkit for advanced Avalonia UI development. Covers complex controls (DataGrid, TreeView, charting), advanced styling with animations, performance optimization, native platform integration, and automated testing for Avalonia applications.

When to Use This Skill

Choose Master Avalonia Suite when:

• You need to implement complex Avalonia controls and patterns
• You want advanced styling with animations and transitions
• You need performance optimization for large Avalonia apps
• You're integrating native platform features (system tray, notifications, clipboard)
• You want to set up automated UI testing for Avalonia

Consider alternatives when:

• You're starting a new Avalonia project from scratch (use the Ultimate Avalonia Framework)
• You need Zafiro-specific layout patterns (use Avalonia Layout Zafiro)
• You want web or mobile development (use platform-specific skills)

Quick Start

Copy
# Install the skill
claude install master-avalonia-suite

# Build complex controls
claude "Build a virtualized DataGrid with 100K rows: sorting, filtering, column resize, and cell editing"

# Add animations
claude "Add page transition animations: slide, fade, and scale transitions for navigation"

# Native integration
claude "Add system tray icon with context menu and desktop notifications to my Avalonia app"

Core Concepts

Advanced Control Patterns

Control	Complexity	Key Features
Virtualized DataGrid	High	Large datasets, column customization, editing
TreeView with Drag-Drop	High	Hierarchical data, reordering, lazy loading
Chart Controls	Medium	Line, bar, pie charts with Avalonia
Ribbon/Toolbar	Medium	Contextual tabs, dropdown buttons
Docking Panels	High	Resizable, closeable, tabbed panels
Property Grid	High	Dynamic property editing by type

Animation System

Copy
<!-- Slide transition -->
<Style Selector="ContentControl.slide">
  <Style.Animations>
    <Animation Duration="0:0:0.3" Easing="CubicEaseOut">
      <KeyFrame Cue="0%">
        <Setter Property="TranslateTransform.X" Value="100"/>
        <Setter Property="Opacity" Value="0"/>
      </KeyFrame>
      <KeyFrame Cue="100%">
        <Setter Property="TranslateTransform.X" Value="0"/>
        <Setter Property="Opacity" Value="1"/>
      </KeyFrame>
    </Animation>
  </Style.Animations>
</Style>

Performance Optimization

Technique	When to Apply	Impact
Virtualization	Lists/grids with 100+ items	Memory: 90% reduction
Composition caching	Complex, rarely-changed visuals	Rendering: 2-5x faster
Deferred loading	Secondary panels/tabs	Startup: 30-50% faster
Bitmap caching	Static complex drawings	Rendering: significant
Data binding optimization	Frequent property updates	CPU: 20-40% reduction

Configuration

Parameter	Type	Default	Description
complexity_level	string	"advanced"	Level: intermediate, advanced, expert
platform_features	string[]	["tray", "notifications"]	Native features to include
animation_style	string	"subtle"	Style: none, subtle, expressive
testing_framework	string	"xunit"	Test: xunit, nunit
performance_mode	boolean	true	Include performance optimizations

Best Practices

1. Virtualize all large collections — Any list, grid, or tree with more than 50 items should use virtualization. Avalonia's ItemsRepeater with a VirtualizingStackPanel handles thousands of items smoothly.

2. Use composition targets for complex visuals — Static or rarely-changing UI subtrees (charts, decorative elements) should use RenderOptions.BitmapInterpolationMode and composition caching to avoid re-rendering every frame.

3. Profile before optimizing — Use Avalonia's built-in performance overlay and .NET diagnostics tools. Don't guess where the bottleneck is — measure it. The actual bottleneck is rarely what you expect.

4. Test UI interactions, not just view models — Avalonia's Headless testing platform lets you simulate clicks, keyboard input, and verify visual state without a visible window. Use it for integration tests of complex interactions.

5. Handle platform differences in native integration — System tray behavior, notification systems, and file dialogs work differently on each platform. Use conditional compilation or runtime platform detection to handle differences gracefully.

Common Issues

DataGrid with 100K rows is slow — Enable virtualization and use ObservableCollection<T> for the data source. Avoid complex cell templates that trigger layout on every scroll. Consider data paging for extremely large datasets.

Animations stutter — Reduce composition complexity during animations. Avoid layout-triggering property changes (Width, Height, Margin) during animation — use transforms (TranslateTransform, ScaleTransform, Opacity) instead.

System tray icon doesn't appear on Linux — Linux tray icon support depends on the desktop environment. GNOME removed system tray support. Use libappindicator for broad Linux support and handle the case where tray is unavailable.