2018 Christmas Trees – Cross Platform Edition using Avalonia

For the last couple of years, my FsAdvent posts have focused around a simple, fun little Christmas Trees application illustrating the usage of Gjallarhorn.Bindable – and for this year, I thought I’d keep the streak going – with a twist. I’m happy to announce the availability of Gjallarhorn.Bindable.Avalonia, which allows Gjallarhorn to be used with Avalonia, the cross platform XAML based UI Framework.

For those familiar with last year’s Christmas Trees application, I wanted to start by saying I’ve only made two simple changes to the logic portion of that application, one by choice, one to make Avalonia function a bit better.

Since Avalonia is intended to run on multiple platforms, I thought it would make sense to simplify the interface. In previous years, I had separate logic for right and left mouse click events, which isn’t very friendly on Mac or mobile. To handle this, I thought I’d add a single “DecorateOrLight” command that would automatically toggle the decorated and lit state of the trees every time you clicked/tapped on a tree instead of having two separate operations.

Given the MVU approach Gjallarhorn uses, this was very simple. All I needed to do in the Tree handlers was add a single new case to the message, and handle it:

I also needed to modify the program in 2 places to add Commands to handle this new message:

Once the design time support had this command, it was just a one line addition to bind this to a new command for the view layer.

The other change made to the logic portion was changing the Forest type to accept a Location option instead of a Location for adding new trees. In the WPF application, I was using some special FsXaml helpers to filter out “None” values, but the default XAML tooling doesn’t support that. Instead, I’m now filtering out None values in the Forest update method and leaving the forest unchanged:

While this is a bit more code, it makes the logic not rely on WPF/FsXaml specific helpers. The WPF application only required on change (remove the filter-by-option setting from XAML) to work again.

Once these changes were in place, I was able to do the fun part – wire this up to Avalonia instead of WPF.

To get that working, I just made a new .NET Core application, and added Gjallarhorn.Bindable.Avalonia as well as some helper routines (XAML Behaviors for Avalonia, etc). The XAML from WPF was copied then modified to work with Avalonia’s structure. While it is mostly unchanged, there are some differences in Avalonia from WPF to handle. I also added an App.xaml as this is expected by Avalonia.

With this done, the startup code in Gjallarhorn.Bindable for Avalonia is very similar to WPF. I modified what was used in WPF:

To make this work in Avalonia, I do the avalonia configuration, then use a slightly modified version of the original WPF code:

With this in place, we can now run and make Christmas Trees using Avalonia!

Even better, since this uses Avalonia and .NET Core, the same code works cleanly on other platforms. For example, here is the same code running on a Mac given nothing but a clone and dotnet run (and a special thank you to @ChetHusk for cloning and running this for me):