Avalonia Pro Max/components

Component Recipes

All recipes assume the design tokens from avalonia-pro-max/design-system are loaded (SurfaceBrush, AccentBrush, TextPrimaryBrush, RadiusLg, Space*, etc.).

---

Buttons

Reusable Button Styles

Usage:

---

Card

---

Sidebar Navigation (FluentAvalonia NavigationView)

For non-FluentAvalonia apps, build a sidebar with SplitView:

---

App Shell (Title bar + sidebar + content)

---

Dialog (FluentAvalonia ContentDialog)

var dialog = new ContentDialog
{
    Title = "Delete project?",
    Content = "This action cannot be undone. All files will be permanently deleted.",
    PrimaryButtonText = "Delete",
    CloseButtonText = "Cancel",
    DefaultButton = ContentDialogButton.Close
};
dialog.PrimaryButtonClick += (_, _) => viewModel.ConfirmDelete();
await dialog.ShowAsync();

For destructive actions, style the primary button with the danger class via PrimaryButtonStyle.

---

Form with Inline Validation

Use INotifyDataErrorInfo on the ViewModel; the :error pseudoclass auto-applies.

---

Empty State

---

Toast / Notification (Avalonia built-in)

// In Window/UserControl
private WindowNotificationManager _notif;

protected override void OnLoaded(RoutedEventArgs e)
{
    base.OnLoaded(e);
    _notif = new WindowNotificationManager(TopLevel.GetTopLevel(this))
    {
        Position = NotificationPosition.BottomRight,
        MaxItems = 3
    };
}

_notif.Show(new Notification(
    "Project created",
    "‘Acme website redesign’ is ready.",
    NotificationType.Success));

---

Badge

Status variants: swap Background to SuccessBrush, WarningBrush, DangerBrush, or muted (SurfaceMutedBrush + TextSecondaryBrush).

---

Skeleton (loading placeholder)

Use Ursa.Avalonia's Skeleton control if you depend on Ursa.

---

Settings Row (FluentAvalonia SettingsExpander pattern)

---

Common Mistakes

• Hand-rolling button styles per view — define once in Styles/Buttons.axaml, use Classes="..." everywhere.
• Padding="10" on an icon-only button — total target shrinks below 36px, fails 44pt accessibility on touch.
• Forgetting AutomationProperties.Name on icon-only buttons — screen readers announce nothing.
• Validating with red-only feedback — combine :error border with helper text.
• Cards stacked at the same elevation — use ShadowSm or 1px border, not ShadowLg, for in-page cards.
• Using ContentDialog for non-blocking info — use a toast/notification instead.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: linuxdevel
• Source: linuxdevel/Avalonia-skills
• License: MIT

Install and usage instructions live in the source repository linked above.