✅ How to learn XAML styling
I'm new to XAML styling in C# using WinUI 3 (id use MAUI but since I mainly focus on Windows Desktop it's overkill), coming from Kotlin Jetpack compose (for mobile apps) I have cool concepts in mind for my design and know the rough way to get there but somehow nothing works out like it's supposed to do and it's my lack of understanding how XAML styling works properly
This is purely about design and not about things such as Data binding etc
Also my next question is if WinUI / XAML styling has some sort of creating components that I can just Re use
52 Replies
I highly suggest Avalonia instead
Microsofts modern frameworks are all awful
Especially WinUI3 considering it is exclusive to Windows 10 1809 and earlier
And MAUI is the biggest disappointment of them all
$avalonia
Avalonia UI
Avalonia UI - Cross-Platform UI Framework for .NET
Pixel-Perfect Cross-Platform .NET Applications with C# for Windows, macOS, Linux, iOS, Android and Browser.
I'll check it out, what would you say makes it better than the others?
MAUI is a buggy mess
And WinUI3 is also buggy but also as previously mentioned.
WinUI3 is exclusive to Windows 10 1809 and earlierMind you that Avalonia is unstable on web and mobile, but amazing on desktop It also supports the 3 platforms, Linux, Mac, and Windows It also uses styling similar to that of CSS using selectors
Style Selectors | Avalonia Docs
Avalonia UI uses style selectors to match controls using a custom XAML syntax.
And best of all .. It has NativeAoT support
So it's basically MAUI / WinUI except not shit
It's similar to WPF but cross-platform.
MAUI and WinUI syntax is similar to that of UWP, at least based on my experience.
WPF is Microsoft best XAML framework by far.
However, it is Windows-only and does not support NativeAOT, unlike Avalonia which is basically everything that WPF was missing and more.
I'm reading the docs rn it seems very solid
It truly is.
What about the second question
Does XAML styling allow for reusable components
For example let's say I have a ListView and now I want to make a component for a User for example which takes a User object as input (or anything I can use to construct a card that displays a user)
Yes
:soPortuguese:
I'll make an attempt to port my current project from WinUI to Avalonia
Not that there is much port :SCgetoutofmyhead:
Thanks!
Take these into consideration
$rulesofwpf
There is no designer nor hot reload for Avalonia, though there is a preview.
Biggest help to make apps is to learn MVVM
It's the one thing that is very important regarding XAML frameworks
Avalonia's templates do have one for MVVM, so you can use that as a starting point.
I don't like the visual designer anyways I find it to introduce a lot of bad practices based on what someone who made that designer thought I might want while I might not
Oh, also!
You have ui libraries for avalonia
$avaloniauilibs
FluentAvalonia (Windows 11 inspired)
https://github.com/amwx/FluentAvalonia
SukiUI
https://github.com/kikipoulet/SukiUI
Material.Avalonia
https://github.com/AvaloniaCommunity/Material.Avalonia
Citrus.Avalonia
https://github.com/AvaloniaUI/Citrus.Avalonia
Aura.UI
https://github.com/PieroCastillo/Aura.UI
CherylUI (Mobile UI Library)
https://github.com/kikipoulet/CherylUI
Semi.Avalonia
https://github.com/irihitech/Semi.Avalonia
:plink:
Would I just install them as a NuGet package or how does C# GUI stuff handle libs for UI
Using NuGet, yes.
Often the libraries have an example in their readme's
And you must also include the styles in App.xaml, otherwise the controls may be invisible or style won't be applied.
But Avalonia for mobile has lately been fairly stable, and I really like the UI library someone made.
Aura.UI and FluentAvalonia look lovely
Aura surprisingly contains most elements I need actually
Fluent design is actually standard theme for Avalonia, so that isn't needed in 11.x
Oki
And Aura is cool, indeed.
What does it look like in terms of compiling
For example if I want to export my program as a single binary for Linux and Windows
$singlefile
dotnet publish -c Release -r <runtime identifier> -p:PublishSingleFile=true
Use of -p:PublishSingleFile=true
implies --self-contained true
. Add --self-contained false
to publish as runtime-dependent.
-r RID
and -p:PublishSingleFile=true
can be moved to .csproj as the following properties:but to target multiple RIDs, you have to use dotnet publish
with the -r
option for each RID.
You can also add -p:IncludeNativeLibrariesForSelfExtract=true
to include native libraries (like Common Language Runtime dlls) in the output executable.
You might want to instead publish your application compiled Ahead Of Time to native code, see $nativeaot for examples.
Single file publishing | Runtime Identifier (RID) catalog | dotnet publish
It supports all of them, including NativeAOT as previously mentioned.
Also this might be a stupid question but I don't have it in my head rn but SpecialFolders like AppData from the SpecialFolders enum are windows specific right? Because those are what I use for cache and I need to know in case I want to make it cross platform
Ah so like any other .NET project, lovely
Yes.
Perfect
Iirc I saw someone on SO call a function called IsWindows() but it was never mentioned how that came to be so I assumed it's a function they wrote
They also have docs for creating a modern looking window.
https://docs.avaloniaui.net/docs/tutorials/music-store-app/creating-a-modern-looking-window
accidentally linked to 10.x docs, my bad. Link is now updated to 11.x
Lmao
Thanks a lot
Much appreciated!
Been getting into GUI dev for desktop lately since I only rly ever had experience in mobile with a component based approach where code builds the UI instead of controlling it
Avalonia do support the MVU approach
Honestly I'm still not too big of a fan of XML styling but I'm getting there :SCgetoutofmyhead:
But XAML is recommended
:plink:
💬 2 🔁 8 ❤️ 136 👁️ 8.8K
FxTwitter / FixupX
Avalonia UI (@AvaloniaUI)
Fun fact. If you don't like XAML, you can create your Avalonia apps using only C#.
We even have a project that helps you! Check out the Blazor-inspired MVU pattern!
https://github.com/AvaloniaUI/Avalonia.Markup.Declarative
Mind you I have not tried it, so I have no idea how stable it is.
Is that because MVU is not fully developed yet (in an early state people don't really like) or because XAML is better documented
The latter
Avalonia was developed primarily for MVU in the past according to them
Damn
C# is a lovely language.
But based on a guess, people liked XAML approach more
Indeed it is
The only thing I imagine to run more smoothly on this is creating lists and adding things to It based on objects as parameters
Things that describe the layout of a program like a sidebar or even just a menu are a pure pain in MVU
Note, for XAML frameworks you should always prefer to use bindings
https://docs.avaloniaui.net/docs/basics/data/data-binding/
XAML together with MVVM is actually way easier than MVU
Feel free to update me with a ping and a screenshot of the app when you've ported it. 🙂
Don't have to be in this thread, but can be in #chat
If you have no further questions, please use /close to mark the forum thread as answered
sure!