AvaloniaUI: features on the example of MessageBox

  • Tutorial
Avalonia ui is a delightful framework that you want to come back to again and again. So let's go back to it again and look at some features along with my message box.

Who is Avalonia?

Avalonia is a cross-platform framework that allows you to develop graphical interfaces on all relevant platforms.

In its structure, it is incredibly close to wpf: similar xaml, similar binders. There is even an official tutorial for wpf developers.

Avalonia is notable for the fact that on each of the systems it refers to the native interfaces: Win32, MonoMac, X11 ...

What appeared in the updated version
  1. Support 13 different message icons.
  2. Ability to copy the message body using the key combination Cntrl + C.
  3. Adjusting the size of the window to its contents.
  4. A simplified style system that allows those who wish to easily join in the development and support of new ones.
  5. Replacing TextBlock with TextBox, now the text in the window can be selected.
  6. The architecture itself has been completely redesigned.

The documentation can be found on gitlab .

The package itself can be downloaded from nuget .

Let's talk about the features and chips avalonia

Obviously, if there are comparisons, then it will be compared with wpf.

The first thing that catches your eye after ms frameworks is the ability to bind commands to methods. Yes, functionally this gives fewer opportunities, but in response simplifies the approach to developing a view model.

public void RunTheThing(string parameter)
            // Code for executing the command here.

Avalonia is also built using reactive extensions, which allows you to work with events of the framework as objects of the first class using the declarative syntax of LINQ queries - allowing you to write concise and readable code.

But going a little deeper, everything becomes not so rosy and obvious, and the documentation has not yet been brought to mind (but you can help).

Binding to image

The problem I met almost immediately when updating my project was how to display images on my window.

First of all, you need to register a directory with images as an Avalonia resource, because it is important that any user displays the icons and conveniently packs them with all the code.


Now in the image tag you can easily set the selected image.

But when using vm Source, images cannot be simply attached to a string, but Bitmap must be used.

 public Bitmap ImagePath { get; private set; }

And accordingly now we need to extract our image from the resources. Why use the Avalonia locator?

ImagePath = new Bitmap(AvaloniaLocator.Current.GetService()
                    .Open(new Uri($" avares://ASSEMBLYNAME/relative/project/path/{ImageName}.ico")));

It is worth noting that for embedded resources when compiling uri, the prefix resm: // is used , and for avalonia - avares: // .


The shapes in avalonia and wpf are similar, but the public properties are different. Therefore, downloading svg images and converting them using mskam to ms xaml, they could not be used right away.

Custom figure

Turns into:

A line:

Turns into:


About the styles themselves enough is said in the documentation . It is worth noting that these are familiar styles with a little css. I wanted to show how to apply the style from a separate file. Firstly, all xaml files must be avalonia resources.


Secondly, styles are applied in the same way as image resources using uri and locator.

YourControl.Styles.Add(new StyleInclude(new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")){Source = new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")});

Pleasant trifles

TextBox has the Watermark property. This allows you not to search for third-party packages and not to block TextBlock on top of TextBox, which can be read in many tutorials for wpf.

And also all binders use PropertyChanged by default to trigger the update of a related property.


I suggest everyone to try this interesting framework. Thanks to users of Artyom Gorchakov and Nikita Tsukanov .

And I remind you that avalonia has a cozy and amazing support at Gitter .

Also popular now: