Write, Run & Share Avalonia code online using OneCompiler's Avalonia online compiler for free. It's one of the robust, feature-rich online compilers for the Avalonia UI framework, running on Avalonia 11 with .NET. The window your code creates is streamed live into the browser — no .NET SDK install, no dotnet new avalonia.app, no NuGet restore to wait through. The editor shows sample boilerplate code when you choose language as Avalonia and start coding.
Avalonia is a modern, open-source, cross-platform XAML framework for .NET — the natural successor to WPF for anyone who wants their C# desktop app to run unchanged on Windows, macOS, Linux, iOS, Android, and even WebAssembly. It uses the same Skia rendering engine as Chrome and Flutter, supports MVVM, data binding, styling, and animations, and has been adopted by JetBrains for Rider's new UI, by AvaloniaUI's own IDE, and by a growing roster of indie .NET shops. If you know WPF, you'll feel at home within minutes.
An Avalonia program is three pieces: an Application subclass that registers styles, an IClassicDesktopStyleApplicationLifetime setup that opens a MainWindow, and a Main that wires it all up with AppBuilder.
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Layout;
using Avalonia.Media;
public class MainWindow : Window
{
public MainWindow()
{
Title = "My App";
Width = 360;
Height = 220;
Content = new TextBlock
{
Text = "Hello, Avalonia!",
FontSize = 20,
FontWeight = FontWeight.Bold,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
};
}
}
public class App : Application
{
public override void Initialize() =>
Styles.Add(new Avalonia.Themes.Fluent.FluentTheme());
public override void OnFrameworkInitializationCompleted()
{
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
desktop.MainWindow = new MainWindow();
base.OnFrameworkInitializationCompleted();
}
}
public class Program
{
public static void Main(string[] args) =>
AppBuilder.Configure<App>().UsePlatformDetect().LogToTrace()
.StartWithClassicDesktopLifetime(args);
}
Avalonia's control library mirrors WPF's — Button, TextBox, CheckBox, ComboBox, Slider, ProgressBar, ListBox, DataGrid, TreeView. They take a Content (for single-child controls) or live inside a panel.
using Avalonia.Controls;
using Avalonia.Layout;
public class MainWindow : Window
{
public MainWindow()
{
Title = "Controls"; Width = 320; Height = 360;
var stack = new StackPanel { Spacing = 8, Margin = new(20) };
stack.Children.Add(new TextBlock { Text = "Name:" });
stack.Children.Add(new TextBox { Watermark = "Type here…" });
stack.Children.Add(new Button { Content = "Submit" });
stack.Children.Add(new CheckBox { Content = "Remember me" });
var combo = new ComboBox { SelectedIndex = 0 };
combo.Items.Add("Python"); combo.Items.Add("C#"); combo.Items.Add("Go");
stack.Children.Add(combo);
stack.Children.Add(new Slider { Minimum = 0, Maximum = 100, Value = 50 });
stack.Children.Add(new ProgressBar { Minimum = 0, Maximum = 100, Value = 70 });
Content = stack;
}
}
Layout in Avalonia is done by panels — StackPanel for stacks, Grid for row/column layouts, DockPanel for the WPF-style dock regions, WrapPanel for flowing content.
using Avalonia.Controls;
public class MainWindow : Window
{
public MainWindow()
{
Title = "Grid"; Width = 360; Height = 200;
var grid = new Grid
{
Margin = new(20),
ColumnDefinitions = new ColumnDefinitions("Auto,*"),
RowDefinitions = new RowDefinitions("Auto,Auto,Auto"),
};
void Add(Control c, int row, int col) { Grid.SetRow(c, row); Grid.SetColumn(c, col); grid.Children.Add(c); }
Add(new TextBlock { Text = "Email:" }, 0, 0);
Add(new TextBox(), 0, 1);
Add(new TextBlock { Text = "Password:" }, 1, 0);
Add(new TextBox(), 1, 1);
Add(new Button { Content = "Sign in" }, 2, 1);
Content = grid;
}
}
Subscribe to control events with normal C# delegate syntax — most controls expose Click, TextChanged, SelectionChanged, etc.
using Avalonia.Controls;
using Avalonia.Layout;
public class MainWindow : Window
{
public MainWindow()
{
Title = "Counter"; Width = 260; Height = 180;
var count = 0;
var label = new TextBlock
{
Text = "0",
FontSize = 32,
HorizontalAlignment = HorizontalAlignment.Center,
};
var inc = new Button { Content = "+1", HorizontalAlignment = HorizontalAlignment.Center };
inc.Click += (_, _) => label.Text = (++count).ToString();
Content = new StackPanel { Spacing = 12, Margin = new(20), Children = { label, inc } };
}
}
Avalonia styles are CSS-like selectors that target controls or classes. Add them to Window.Styles (or the application-wide App.Styles) and they cascade.
using Avalonia.Controls;
using Avalonia.Layout;
using Avalonia.Media;
using Avalonia.Styling;
public class MainWindow : Window
{
public MainWindow()
{
Title = "Styled"; Width = 320; Height = 160;
Styles.Add(new Style(s => s.OfType<Button>().Class("primary"))
{
Setters =
{
new Setter(BackgroundProperty, (IBrush)new SolidColorBrush(Color.Parse("#2563eb"))),
new Setter(ForegroundProperty, Brushes.White),
new Setter(PaddingProperty, new Avalonia.Thickness(20, 10)),
new Setter(CornerRadiusProperty, new Avalonia.CornerRadius(8)),
new Setter(FontSizeProperty, 14d),
}
});
var btn = new Button { Content = "Primary", Classes = { "primary" } };
Content = new StackPanel
{
Margin = new(30),
HorizontalAlignment = HorizontalAlignment.Center,
Children = { btn }
};
}
}
Avalonia supports the full WPF-style binding system — bind a control's property to a CLR property and the UI updates when the source changes (use INotifyPropertyChanged or ObservableObject for two-way live updates).
using Avalonia.Controls;
using Avalonia.Data;
using Avalonia.Layout;
public class MainWindow : Window
{
public MainWindow()
{
Title = "Binding"; Width = 320; Height = 140;
var slider = new Slider { Minimum = 0, Maximum = 100, Value = 50 };
var label = new TextBlock { FontSize = 18 };
label.Bind(TextBlock.TextProperty, new Binding
{
Source = slider,
Path = nameof(Slider.Value),
StringFormat = "Value: {0:0}",
});
Content = new StackPanel { Spacing = 12, Margin = new(20), Children = { slider, label } };
}
}
For freeform 2D graphics, drop shape primitives into a Canvas and position them with attached properties.
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Shapes;
using Avalonia.Media;
public class MainWindow : Window
{
public MainWindow()
{
Title = "Canvas"; Width = 400; Height = 260;
Background = new SolidColorBrush(Color.Parse("#0f172a"));
var canvas = new Canvas();
var circle = new Ellipse
{
Width = 100, Height = 100,
Fill = new SolidColorBrush(Color.Parse("#f59e0b")),
};
Canvas.SetLeft(circle, 40); Canvas.SetTop(circle, 40);
var rect = new Rectangle
{
Width = 180, Height = 100,
Stroke = new SolidColorBrush(Color.Parse("#22d3ee")),
StrokeThickness = 3,
};
Canvas.SetLeft(rect, 180); Canvas.SetTop(rect, 40);
canvas.Children.Add(circle);
canvas.Children.Add(rect);
Content = canvas;
}
}
Everything you can build in C# you can also write in XAML, then load with AvaloniaXamlLoader.Load. Most real Avalonia apps mix the two — XAML for the layout, C# for the behaviour.
<Window xmlns="https://github.com/avaloniaui"
Title="XAML Demo" Width="320" Height="160">
<StackPanel Margin="20" Spacing="8">
<TextBlock Text="Email:"/>
<TextBox Watermark="[email protected]"/>
<Button Content="Sign in" HorizontalAlignment="Right"/>
</StackPanel>
</Window>