✅ 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
Buddy
Buddy6mo ago
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
MODiX
MODiX6mo ago
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.
The Fog from Human Resources
I'll check it out, what would you say makes it better than the others?
Buddy
Buddy6mo ago
MAUI is a buggy mess And WinUI3 is also buggy but also as previously mentioned.
WinUI3 is exclusive to Windows 10 1809 and earlier
Mind 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
Buddy
Buddy6mo ago
Style Selectors | Avalonia Docs
Avalonia UI uses style selectors to match controls using a custom XAML syntax.
Buddy
Buddy6mo ago
And best of all .. It has NativeAoT support
The Fog from Human Resources
So it's basically MAUI / WinUI except not shit
Buddy
Buddy6mo ago
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.
The Fog from Human Resources
I'm reading the docs rn it seems very solid
Buddy
Buddy6mo ago
It truly is.
The Fog from Human Resources
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)
Buddy
Buddy6mo ago
Yes
The Fog from Human Resources
:soPortuguese: I'll make an attempt to port my current project from WinUI to Avalonia Not that there is much port :SCgetoutofmyhead: Thanks!
Buddy
Buddy6mo ago
Take these into consideration $rulesofwpf
MODiX
MODiX6mo ago
Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible
Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible
Buddy
Buddy6mo ago
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.
The Fog from Human Resources
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
Buddy
Buddy6mo ago
Oh, also! You have ui libraries for avalonia $avaloniauilibs
The Fog from Human Resources
:plink: Would I just install them as a NuGet package or how does C# GUI stuff handle libs for UI
Buddy
Buddy6mo ago
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.
Buddy
Buddy6mo ago
But Avalonia for mobile has lately been fairly stable, and I really like the UI library someone made.
No description
The Fog from Human Resources
Aura.UI and FluentAvalonia look lovely Aura surprisingly contains most elements I need actually
Buddy
Buddy6mo ago
Fluent design is actually standard theme for Avalonia, so that isn't needed in 11.x
Buddy
Buddy6mo ago
And Aura is cool, indeed.
The Fog from Human Resources
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
Buddy
Buddy6mo ago
$singlefile
MODiX
MODiX6mo ago
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:
<RuntimeIdentifier>RID</RuntimeIdentifier>
<PublishSingleFile>true</PublishSingleFile>
<RuntimeIdentifier>RID</RuntimeIdentifier>
<PublishSingleFile>true</PublishSingleFile>
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
Buddy
Buddy6mo ago
It supports all of them, including NativeAOT as previously mentioned.
The Fog from Human Resources
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
Buddy
Buddy6mo ago
Yes.
The Fog from Human Resources
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
Buddy
Buddy6mo ago
Buddy
Buddy6mo ago
accidentally linked to 10.x docs, my bad. Link is now updated to 11.x
The Fog from Human Resources
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
Buddy
Buddy6mo ago
Avalonia do support the MVU approach
The Fog from Human Resources
Honestly I'm still not too big of a fan of XML styling but I'm getting there :SCgetoutofmyhead:
Buddy
Buddy6mo ago
But XAML is recommended
The Fog from Human Resources
:plink:
Buddy
Buddy6mo ago
💬 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
Buddy
Buddy6mo ago
Mind you I have not tried it, so I have no idea how stable it is.
The Fog from Human Resources
Is that because MVU is not fully developed yet (in an early state people don't really like) or because XAML is better documented
Buddy
Buddy6mo ago
The latter Avalonia was developed primarily for MVU in the past according to them
The Fog from Human Resources
Damn C# is a lovely language.
Buddy
Buddy6mo ago
But based on a guess, people liked XAML approach more Indeed it is
The Fog from Human Resources
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
Buddy
Buddy6mo ago
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
MODiX
MODiX6mo ago
If you have no further questions, please use /close to mark the forum thread as answered
Want results from more Discord servers?
Add your server