Porting from Qt to Avalonia

[Trigve]

We have client/server application, where our client is written using Qt and C++. I want to port the client to the Avalonia mainly because of WASM (the problem is little complex that that, we also have Wt plugin as web UI and we need to maintain multiple "UI"s so it would be better to have only one to maintain; and also Qt licensing).

In our client the whole UI is dynamically loaded from custom files, so no AXAML whatsoever only created from the code. We're using simple controls (text edit, combo box, radio, date control, ...) and more complex controls (Custom data view - DataGrid in Avalonia terms, custom combo box with data grid embedded, ...) and different dialogs (even nested). For communication with server we're using websocket (with custom ping handling).

From looking through the docs, articles etc. it sound possible but I would like to know if there could be some potential "blocker issue"?

[timunie]

If you are new to Avalonia, I highly suggest to read the docs and explore our samples https://github.com/AvaloniaUI/Avalonia.Samples . Imo Avalonia works best if you use the MVVM pattern and use DataTemplates to define the controls layout. This is probably way different to how QT works.

If you really want to use code only, check also https://github.com/AvaloniaUI/Avalonia.Markup.Declarative

[thevortexcloud]

In our client the whole UI is dynamically loaded from custom files, so no AXAML whatsoever only created from the code.

To also add onto what Tim said, there is also this project simplify doing exactly this. But it's primarily made for F# devs.

https://github.com/fsprojects/Avalonia.FuncUI

It probably works with C# though (it all gets compiled to the same code, which is why it works with Avalonia at all) but documentation is probably harder to find. In any case, it's not something I have tried.

That said: You can still load XAML files at runtime using the runtime loader. But parsing some other file will also work too if you feel like implementing a custom parser.

Avalonia (like most other XAML frameworks) is also very flexible with control layouts. To the point you can override the look and functionality of pretty much any control or easily make your own that combines other built in controls. I think everything you want should be possible.

Let me also preface this paragraph by saying I am not an expert at QT. But you might run into some problems if you are relying on things like inline QML scripts. As there is no direct equivalent in Avalonia or C#. You could implement your own though. There are plenty of .NET bindings for various scripting languages such as lua. You can also use C# itself as a scripting language too, but it still has various issues from my understanding. EG dotnet/roslyn#16897

[Trigve]

Thanks for the replies and links. I've skimmed through all of them and it all looks good so far.

Regarding the Qt, I'm not using QML, just the classic widgets. The "problem" with XAML is that the UI files we're using is done in custom application, therefor we need to parse the file and the build the UI. Later we could make an utility to to convert the files to XAML directly.

[thevortexcloud]

In that case the biggest annoyance I can think of would be implementing bindings (if you need them). They are typically associated with a .NET object and require the full path of the property to bind to if you are manually creating them. Depending on how your custom file is structured you may not have this information directly and may need some sort of mapping system (or even worse some way to guess what to bind to). But bindings are also fully optional. You just have to keep everything in sync elsewhere if you decide not to use them. If you are displaying 100% static content then this is a non issue.

[Trigve]

Regarding the bindings, I think I would find out when I start to port (but from looking at the Avalonia.Markup.Declarative I don't think that would be the problem). Anyway, thanks for the pointers. I hope to update this discussion one day (when the port is completed - and I hope it will be completed) with the problems I encountered and the solutions.

[Trigve]

I have another question though. From what I've read, dialogs (Windows.ShowDialog()) aren't supported in browser (only desktop app) AFAIK. So what are my options of emulating them? So far I've found https://github.com/AvaloniaUtils/DialogHost.Avalonia . Do there exists some other implementations?

[maxkatz6]

There are some other implementations, including ones from FluentAvalonia and Material.Avalonia.
But essentially implementation is the same - a Panel layer on top of your content.

[thevortexcloud]

There are plans to add a native message box API at some point.

#670

But that's probably not what you want since web assembly does not really have a concept of dialogues as far as I know. But there may be something on this list that does what you want:

https://github.com/AvaloniaCommunity/awesome-avalonia

Also depending on what you are doing, it's not particularly hard to show a Popup that takes up the entire width and height of the screen.

That said since you are in a browser, if you don't care about it looking pretty you can probably go for the old alert() Javascript method.

Dialogues are also somewhat hard to enforce anyway in websites. Since people can just always refresh the page to make it go away unless you invest in state persistence.

[Trigve]

Thanks for the replies. Good to know there multiple implementations. I will need to test them and see how it works.
@thevortexcloud I would need to show the dialog with custom content (multiple controls, etc.), so alert() won't do it. Regarding the dialogs, in our current clients (native and web) we do have partial state persistence.

[thevortexcloud]

Fair enough. I have personally used this https://github.com/AvaloniaCommunity/MessageBox.Avalonia

It mostly works fine with the popup mode. Which is probably what you would want here anyway. Dialogue mode however can be a bit iffy. But it's really just an implementation ontop of DialogHost.Avalonia anyway. But that does not support custom controls as far as I am aware. It's more of a replacement for a desktop style messagebox.