MVVM Patterns in Avalonia

Complete guide to MVVM patterns using CommunityToolkit.Mvvm in Avalonia applications.

What I do

Guide implementation of ViewModels with ObservableObject base class
Show how to create observable properties with [ObservableProperty] attribute
Demonstrate command patterns with [RelayCommand] including async and CanExecute
Explain View-ViewModel mapping using DataTemplates (critical for navigation)
Show dependency injection patterns for passing services to ViewModels

When to use me

Use this skill when you need to:

Create new ViewModels for Avalonia views
Implement observable properties that notify the UI of changes
Add commands to handle user interactions (button clicks, etc.)
Set up navigation patterns with SukiSideMenu or ContentControl
Pass services (like ISukiToastManager) between ViewModels
Implement validation on ViewModel properties

ViewModel Base Classes

Basic ViewModel

using CommunityToolkit.Mvvm.ComponentModel;

namespace YourApp.ViewModels;

public partial class ViewModelBase : ObservableObject
{
}

Page ViewModel Base

using CommunityToolkit.Mvvm.ComponentModel;

namespace YourApp.ViewModels;

public abstract partial class PageViewModelBase : ViewModelBase
{
    public abstract string DisplayName { get; }
    public abstract string Icon { get; }
}

Observable Properties

Basic Observable Property

[ObservableProperty]
private string _name = "";

With Validation

using System.ComponentModel.DataAnnotations;

[ObservableProperty]
[Required(ErrorMessage = "Name is required")]
[MinLength(3, ErrorMessage = "Name must be at least 3 characters")]
private string _name = "";

With Property Changed Notification

[ObservableProperty]
private string _firstName = "";

[ObservableProperty]
private string _lastName = "";

public string FullName => $"{FirstName} {LastName}";

partial void OnFirstNameChanged(string value)
{
    OnPropertyChanged(nameof(FullName));
}

partial void OnLastNameChanged(string value)
{
    OnPropertyChanged(nameof(FullName));
}

Commands

Basic Command

[RelayCommand]
private void Save()
{
    // Save logic
}

Command with Parameter

[RelayCommand]
private void ButtonClick(string buttonName)
{
    LastButtonClicked = buttonName;
}

View:

xml

<Button Content="Save" 
        Command="{Binding ButtonClickCommand}" 
        CommandParameter="Save Button" />

Async Command

[RelayCommand]
private async Task LoadDataAsync()
{
    IsLoading = true;
    await Task.Delay(1000);
    IsLoading = false;
}

Command with CanExecute

[ObservableProperty]
private bool _isDataLoaded;

[RelayCommand(CanExecute = nameof(CanSave))]
private void Save()
{
    // Save logic
}

private bool CanSave() => IsDataLoaded;

partial void OnIsDataLoadedChanged(bool value)
{
    SaveCommand.NotifyCanExecuteChanged();
}

Critical Pattern: DataTemplates

When using navigation patterns where ViewModels are displayed in a ContentControl (like SukiSideMenu), you MUST define DataTemplates to map ViewModels to their corresponding Views.

In SukiWindow:

xml

<suki:SukiWindow.DataTemplates>
    <DataTemplate DataType="vm:HomePageViewModel">
        <views:HomePage />
    </DataTemplate>
    <DataTemplate DataType="vm:SettingsPageViewModel">
        <views:SettingsPage />
    </DataTemplate>
</suki:SukiWindow.DataTemplates>

Dependency Injection

Passing Services to ViewModels

Parent ViewModel:

csharp

public partial class MainWindowViewModel : ViewModelBase
{
    private readonly ISukiToastManager _toastManager;

    public MainWindowViewModel()
    {
        _toastManager = new SukiToastManager();
        Pages = new ObservableCollection<PageViewModelBase>
        {
            new NotificationsPageViewModeler)
        };
    }
}

Child ViewModel: