Avalonia, a big candidate to create cross-platform apps with XAML ??
One of the main reasons of this boom is, without any doubt is the appearance of Uno Platform, a really promising platform we already mentioned before. However, today we will talk about Avalonia, a pioneer project that has been present for more than five years and since its beginning has had as a goal to be cross-platform.
The Cross-platform WPF
In a few words, Avalonia is a reimagined cross-platform of WPF
Great! But what’s WPF?
Let’s look back to the past.
For all the ones that don’t know, Windows Presentation Foundation (WPF) has been for many years the only platform using XAML. It’s a Windows-only technology (supporting Windows XP and newer versions), but it was so powerful that caught a lot of people. It was where all the Bindings, Data Templates and styles goodness were showcased, captivating the love of the masses. It was very promising for its time, where the amazing MVVM pattern took its first steps towards its big success.
Well then! Now we know the past. Let’s talk about how to create apps with Avalonia.
It can be done in many ways, but in our case, we will use Visual Studio for Windows.
The first thing we have to do is to install the Avalonia Visual Studio extension. This extension is highly recommendable because it will provide us with many predefined templates, for our convenience, so we have a basic solution with working code ready to go. Also, it will provide us with a handy visual designer that will show us the preview of our XAML in real time (Buttons, TextBoxes, Styles…)
Go to the menu Extensions ➡ Manage extensions
Don’t forget to restart Visual Studio. The actual installation takes place when Visual Studio isn’t running.
Let’s go back to Visual Studio.
Choose to create a “New project” and look for the Avalonia template.
In a few seconds, a graphic designer with XAML from our first windows will appear
Note: for the designer to show us something it’s necessary to build the solution at least once.
To check that everything is correct, run the app pressing F5
After a few seconds, a beautiful window will pop up welcoming us to Avalonia
Surprising!
Do you know what’s the best of this? That this same code also works in Linux and MacOS
Let’s do something more than running the empty app.
Adding Functionalities
Let’s add something to our just created empty app.
Open the ViewModel of the main window, called “MainWindowsViewModel.cs”
Add a Collection of elements to the ViewModel. Will try do to a Contact List ?
Here we have!
Now let’s go back to the “MainWindow.xaml”. We will modify it to wrapping the initial TextBlock inside a Grid. Please, notice the elegant way to define the rows (RowDefinitions) It can be defined inline.
If we build the solution again, the designer will update the data that we have created in the ViewModel. The main problem is that the elements on the list don’t have are not formatted (they are rendered as strings, like if we called the ToString() method on each element). In order to leave it perfect we have used a DataTemplate for the ItemTemplate of the ListBox.
As simple as that! We added a StackPanel with some Spacing and two TextBlocks inside.
Done!
We already have a contact list!
Note: If the designer shows you an error or doesn’t update, don’t worry, build the solution and it will refresh the preview.
About the preview: The funniest part is that maybe you haven’t realized yet, but the preview of the designer really works! You don’t need to execute the app to see the results and even interact with it, fascinating!
Buttons:
What can we do without buttons?
We will add a Button to add a new contact.
Let’s modify the Grid in order to have the new rows for it.
In this way, we say we need two rows, and that the first one will be twice the size of the second.
Finally, we add the Button at the end.
After doing it the interface will show us the following:
The button is in the second row (row 1, starts on 0)
As we can see, the Button has Command associated to it. This mean that, in the ViewModel, we will have to define the actual Command with the logic that will execute after the Button is clicked. If you know the MVVM pattern, you might already know what this is about.
This, open “MainWindowsViewModel.cs” again and add the Command.
Now, let’s run the application building to see the real-time preview or running it with F5. We will see how when clicking the button, a new Contact will be added to the ListBox.
Easy and fast!
The rest is about investigating and having fun playing around.
What do you think?
The example we have seen is very simple, but you can do amazing stuff with Avalonia. There are some people that even have created a complete IDE à la Visual Studio.
There you can see AvalonStudio, the cross-platform Visual Studio-like IDE, running in in Mac.
It looks good, right? You absolutely should have a try. It’s powerful, cross-platform, productive, funny, and, if you like XAML you are going to love it.
Let s us know with comments your experiences and questions.
Links:
Written by: José Manuel Nieto part of Idiwork’s team