avalonia-viewmodels-zafiro

Avalonia ViewModels with Zafiro

Skill overview

Provides best practices and patterns for creating ViewModels, wizard flows, and managing navigation in Avalonia applications, combining the Zafiro toolkit and ReactiveUI to implement a reactive MVVM architecture.

Applicable scenarios

Cross-platform Avalonia app development

When building a consistent UI architecture for multiple platforms such as Windows, macOS, and Linux, this pattern ensures ViewModel logic remains uniform and maintainable across platforms.

Implementing complex wizard flows

When the app requires multi-step user guidance flows (e.g., project creation wizards, configuration wizards), the Wizard Pattern offers a declarative, maintainable implementation that avoids callback hell and state confusion.

Reactive state management needs

When you need fine-grained control over UI state synchronization, command execution states, and progress reporting, ReactiveUI’s reactive patterns and IEnhancedCommand can elegantly handle these complex interaction logics.

Key features

Functional-Reactive ViewModel pattern

Use ReactiveUI’s ReactiveObject, WhenAnyValue, and other components to build reactive ViewModels that automatically synchronize state changes with the UI, reducing manual event-handling code.

Declarative wizard construction

Build multi-step flows declaratively using SlimWizard and WizardBuilder. Each step’s logic is independent and testable, the overall flow is clear and readable, and complex state transitions and validations are supported.

Auto-composition and discovery

Use the [Section] attribute to auto-register UI regions, DataTypeViewLocator to automatically match ViewModels with Views, and manage dependency injection centrally in the CompositionRoot to achieve a loosely coupled architecture.

FAQ

How should ViewModels be properly implemented in Avalonia?

Avalonia recommends using the MVVM pattern. ViewModels should inherit from ReactiveObject and use WhenAnyValue to handle property changes and command logic. Avoid referencing Views directly from ViewModels to keep ViewModels pure and testable.

What is the Zafiro Toolkit, and how does it integrate with Avalonia?

Zafiro is a toolkit that enhances the Avalonia development experience, providing components like IEnhancedCommand, SlimWizard, and the Section attribute to simplify command management, wizard flows, and navigation discovery. It integrates deeply with ReactiveUI and can be used seamlessly together.

What is the best way to implement wizard flows in Avalonia?

It’s recommended to use the SlimWizard and WizardBuilder patterns, defining each step as an independent ViewModel and assembling the flow via a declarative API. This approach is clearer than traditional callback- or event-driven methods, and each step’s state management and validation logic can be written and tested independently.