Avalonia, a big candidate to create cross-platform apps with XAML 😎📲

All of us that love XAML to define our interfaces (among other things) we are in luck: it seems that finally the dev community has started to discover its advantages. The number of options to use XAML keeps increasing and it’s been never easier to use it and to take advantage of its potential.

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 our case, since we are MVVM huge fans, we chose the first template (Avalonia MVVM application)

 

We can leave the defaults in this page (or change if we want). Click on create.

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:

Avalonia’s Github

Avalonia’s Components 

AvalonStudio

 

Written by: José Manuel Nieto part of Idiwork’s team

 

Step by step

Idiwork has arrived and we invite you to join us!
Raspberry Pi4 – All of a sudden!
Experiment #101 How to set up an IoT device in Azure IoT Hub
Start your own video game with Unity3D and CreatorKits
Experiment #101 How To Create a Blockchain Workbench App
XR World: Minecraft Earth
Experiment #101 Architectural Diagram
Cyberpunk 2077 and The Future
Experiment #101 How to create an Azure Function App to record telemetry readings
An Introduction to neural networks
Microsoft Mixer, streaming your life !
Introduction to Azure Notebooks applying Cognitive Services with Jupyter
AR [T] Walk
Return of Age of Empires
Idiwork and Uno Platform partnership!!
The differences between Augemented Reality, Mixed Reality and Virtual Reality !
Experiment #102 How to Create an Azure Notebooks Project and Deploy a Summarization Service
Uno Platform Conference
YouTube Video: Creator Kits, learn how to create a RPG with Unity3D !! 🤖
Experiment #102 How to construct and train a Deep Neural Network using Keras and deploy the model as an Azure Web Service 🧠☁️
Uno Platform Conference Recap 😎
How to create a Uno Platform project in Visual Studio 💻🤓
What is a Neural Network? by Alberto Pinedo 🧠💻
Experiment #102 How to Deploy and Integrate Azure Cognitive Services: Computer Vision and Text Analytics 💻📑
Next stop: Madrid Games Week 👉🤖
Our Madrid Games Week experience ! 😎🤖
Experiment #102 How to use Microsoft Flow to send an email when an event occurs 📧📌
How to create your own controllers for Mixed Reality ToolKit 🎮🤓
Experiment #102 Architectural Diagram 📍
The magic of Hytale ⚔️
Start programming your own app in Uno Platform 📲👨‍💻
The value of Blockchain for business by Pablo Junco ⛓️🏢
Living in the night: Bloodlines 2 🧛🎮
Uno Platform Workshop Recap 💻📌
EasyRPC. Be proud of your APIs (First Part) 🤓🚀
Paralives, reimagine your virtual life 👾👩‍💻
Experiment #103 How to Modify the Project to Work with Face Cognitive Service and Servo Motor 👩‍💻📙
Experiment #103 How to Set Up the IoT Device Hardware: Peripherals and Electronics 🔈💡
We are going to be in the GDG DevFest in Málaga! 😎👾
EasyRPC. Be proud of your APIs (Second Part) 🤓🚀
Experiment #103 How to Build a 3D Printed Box to Pack and Run the IoT Project 🚀
MediEvil, remember the fear💀
Never forget the Fallen Order 🏹🎮
Experiment #103 Architectural Diagram 📍
Grace: The perfect DI IoC container [part 1] 💻🤓
Death Stranding: a story of death and connection ☠🏹
Experiment #204 How to assembly the 3D printed parts and servo motors of the robotic arm 🦾🤖
TemTem: a dream come true 🐹💥
Grace: The perfect DI IoC container [part 2] 💻🤓
Exploring the Outer Worlds 🎇⚔
Our review from Hololens 2 👓👷
Learn to code on your iPhone for FREE 📲🚀
New life, new horizons in Animal Crossing 🎮🐱
What’s WinUI? 💻🚀
Half Life Alyx ☠🧟‍♂
How to deploy a Censorship Resistant Website for FREE 🔓🌎
Superpower: The parser combinator library [Part 1] 💻🤓
UnoPlatform and WinUI, what to expect? 🚀📲
Happiness begins in Stardew Valley 🍎🐓
Science fiction in Assassin’s Creed 👽
The Cyber Attack Lifecycle 🕵‍♀💻
Superpower: The parser combinator library [Part 2] 💻🤓
Learn more about UnoPlatform! 😜📢
Create cybernetically enhanced web apps with SvelteJS 💻👇
Six Fun Drag & Drop 🧩 Programming Languages To Learn How To Code! 💻
Riot and Hytale unite! 👾😉
A new home called EVE Online 👽👇
Rejoice with UnoPlatform! May 2020 📲👇
UnoPlatform arrives to macOS 💻👈
Your new empire in Civilization VI 🎮🏹
Play Station 5 is near!
Build and defend your city, this is Manor Lords
Customization, landscape generation and more in Hytale🧝🏻‍♀️🧝🏼
Welcome, MAUI! 💣📲
Zombies will be zombies (TLOU2) 👽🧟‍♂
Rejoice with UnoPlatform! August 2020 📲👇
Final Fantasy Crystal Chronicles is back🧝🏻‍♀️⚔️
Bolt is now free in Unity3D 🎮
Feel the Flutter! 🌐
Microsoft buys ZeniMax Media (including Bethesda!)
Intel and Microsoft team up to empower AI on Edge
Linux and WSL2 - Part 1 Linux and WSL2 – Part 1: How do you run Windows applications on Linux? Or vice versa.
Guide how to Run Windows applications on Linux Linux and WSL2 – Part 2: How do you run Windows applications on Linux? Or vice versa.
Domain-driven design Domain-Driven Design: the elephant in the room
azure object anchors Azure Object Anchors: the third tool
Experiment #205 Step by step 1 Experiment #205 Applied Artificial Intelligence, the real one 🤖📹
AI Assembling the system Experiment #205 Applied Artificial Intelligence – Assembling the system ⚙️🦾
Redit Conquer all the APIs Refit – Conquer all the APIs
Experiment #205 Applied AI: the Information analysis Experiment #205 Applied Artificial Intelligence – Analysis of the information
Brand Presence step by step 1 Blog Experiment #206 Brand Presence
Experiment #206 Brand Presence - The analysis Experiment #206 Brand Presence – The analysis

Stay up to date!



Leave a comment