Reed Copsey, Jr. Thoughts on F#, C#, WPF, .NET, and programming for Scientific Visualization Home About Series Talks Contact Me 2018 Christmas Trees – Cross Platform Edition using Avalonia Posted by Reed on Tuesday, December 18, 2018 · 2 Comments 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: [<STAThread>] [<EntryPoint>] let main _ = // Run using the WPF wrappers around the basic application framework let nav = Gjallarhorn.Wpf.Navigation.singleView System.Windows.Application MainWindow let app = Program.application nav.Navigate Gjallarhorn.Wpf.Framework.RunApplication<Forest,unit,ForestMessage> (nav, app) 0 view raw WpfView.fs hosted with by GitHub To make this work in Avalonia, I do the avalonia configuration, then use a slightly modified version of the original WPF code: [<STAThread>] [<EntryPoint>] let main _ = let app () = AppBuilder.Configure<App>().UsePlatformDetect().LogToDebug().SetupWithoutStarting().Instance let nav = Gjallarhorn.Avalonia.Navigation.singleView app MainWindow let app' = Program.application nav.Navigate Gjallarhorn.Avalonia.Framework.RunApplication<Forest,unit,ForestMessage> (nav, app') 0 view raw AvaloniaProgram.fs hosted with by GitHub 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): FILED UNDER UNCATEGORIZED · TAGGED WITH About Reed Reed Copsey, Jr. - http://www.reedcopsey.com - http://twitter.com/ReedCopsey Comments 2 Responses to “2018 Christmas Trees – Cross Platform Edition using Avalonia” Tony Henrique says: December 30, 2018 at 9:23 AM I would like to see a CRUD example using this. For example: A Form with Buttons: New, Save, Delete And fields: Name, Phone Number, Address, Notes… Reply Reed says: December 31, 2018 at 7:00 AM Tony, You can look at the WPF sample (https://github.com/ReedCopsey/Gjallarhorn.Bindable/tree/master/samples/FrameworkSimpleForm) – it would be fairly simple to make an Avalonia front end for it, but I haven’t (yet). -Reed Reply Speak Your Mind Tell us what you're thinking... and oh, if you want a pic to show with your comment, go get a gravatar! Name (required) Mail (will not be published) (required) Website Search for: Categories Categories Select Category .NET (73) C# (67) F# (4) MVVM (15) WPF (19) Algorithms (34) Async (7) Parallelism (22) C Tech (1) C++ (3) Community (3) F# Software Foundation (1) Gjallarhorn (1) Performance (2) Professional (4) Uncategorized (5) Meta Log in Entries feed Comments feed WordPress.org Tags .NET .NET 4 .NET 4.5 Algorithms Async C# C# 4 C# 5 Charity Community F# F# Software Foundation FSSF GiveCamp IDisposable Interop MEF MVP MVVM Optimization Parallelism Performance PLINQ Programming Windows Forms WPF WPF Gjallarhorn F# StackOverflow Reed Copsey 530,914 ●7272 gold badges●11031103 silver badges Archives December 2020 December 2019 December 2018 December 2017 December 2016 December 2015 December 2014 October 2013 November 2011 October 2011 September 2011 August 2011 April 2011 January 2011 December 2010 October 2010 July 2010 April 2010 March 2010 February 2010 January 2010 December 2009 November 2009 October 2009 September 2009 August 2009 July 2009 May 2009 April 2009 March 2009 Twitter Feed META Log in Entries feed Comments feed WordPress.org CAREER C Tech RECENT POSTS F# Basics – Result<'a>: or How I Learned to Stop Worrying and Love the Bind F# Basics – From loops to folds 2018 Christmas Trees – Cross Platform Edition using Avalonia CATEGORIES .NET Algorithms Async C Tech C# C++ Community F# F# Software Foundation Gjallarhorn MVVM Parallelism Performance Professional Uncategorized WPF © 2021 REED COPSEY, JR. · SHADES OF BLUE THEME BY STUDIOPRESS · WORDPRESS · LOG IN