Implement Fluent v2 theme

[maxkatz6]

Is your feature request related to a problem? Please describe

With Avalonia 0.10.0 we implemented Fluent theme, which was based on Windows 10 and WinUI 2.5 styles.
In 2021 we can see, that Microsoft revisited their default system theme in Windows 11 and build Fluent v2 styles in WinUI 3 (also backported to WinUI 2.6). Which means that Avalonia has out-of-dated themes comparing with Windows OS.

Open questions

Do we need to update Fluent theme at first place?

It's a good question, because Avalonia is cross platform framework, that works not only on Windows OS. So why its build-in styles should always follow only single target platform styles? On other hand, as a maintainers team we can't support default themes for each platform (luckily, community already created some of them). Also, worth to mention that Fluent v2 is closer to macOS styles than Fluent v1 was. And Linux never had single standard theme to follow.
Realistically we can chouse one of two ways:

• Keep Fluent v1 theme, it's good as it is.
• Update Fluent theme to match Win11.
• Find designer, who will build new theme styles, based on Fluent v1, but with macOS components as well to be more universal.

How did Microsoft deliver new theme to the developers and what happen with old one?

They support both of them.
WinUI and Avalonia allow developers to build custom styles on top of build-in ones, which results in non-possibility to make any huge changes, that will be considered as a breaking change. And Fluent v2 has a lot changes of that kind.
To deal with it, Microsoft introduced Fluent theme versioning, having style files and resources for both versions, keeping them side by side in a single repo, allowing users to switch theme version on app top level:

<XamlControlsResources ControlsResourcesVersion="Version2" />

How Avalonia should deliver new theme to the developers?

This question is more to the community.
There are several possible ways, that I see right now:

• Follow Microsoft's way, keep both versions together and add top level switcher. Unfortunately, it will cause significantly higher maintenance cost.
• Do breaking change. If developers need time to update their styles, they should continue to use previous Avalonia version (with backport fixes for a while).
• Do breaking change (in a bit more controlled way):
• • In next major release (later this year) move Fluent (and old Default) theme out of Avalonia main package (see Consider making Fluent and Default theme a separate NuGet package #5593). It will break all existing applications, but fix will be easy as just adding missing nuget package (we can do a check with warning to inform developers in runtime about that).
• • In next major release (next year) update Fluent theme package doing all required changed to bring new theme to life. It will allow developers either to stay on older Fluent package version for a while, giving them time to update their custom styles.

Since we still might consider moving themes out of Avalonia main package, last approach seems to be most convenient for maintainers (and not that much for developers, who will use it).

Is it really that important breaking change? Can't we just update it?

Good question. Personally, I built couple of applications with custom styles on top of Fluent theme.
And while for me it won't be a problem at all to do required changes (since I am familiar with this repo), I can't say the same about everybody.

Additional context

For examples and details see "Design in Windows 11".

[PieroCastillo]

very well, but, how are you going to add this? https://docs.microsoft.com/en-us/windows/apps/design/layout/depth-shadow

[maxkatz6]

@PieroCastillo BoxShadows?

[robloo]

Few initial comments, I'll add more later:

If Fluent theme is staying in Avalonia repo I think it should always attempt to be latest and drop older styles. It is very common in UI frameworks to completely update styles periodically and force apps to update as well if they want to use the new framework version. As annoying as this is, literally everyone does it to try to enforce uniformity which is important for end users.

If fluent will be pulled out in separate nuget we might as well support both fluent v1 and v2 and leave it up to app developers. However, I would only do this if macOS, Android, etc. will get their own styles going forward too. I know the team doesn't want to take up maintenance of all this, but it will be extremely useful long term for some apps who heavily customize per platform. It will also make Avalonia itself more competitive.

[maxkatz6]

If Fluent theme is staying in Avalonia repo I think it should always attempt to be latest and drop older styles

I don't think anybody planned to move Fluent theme out of the main repo.

[amwx]

The biggest changes with the v2 styles are:

• Renaming of the base colors/brushes. IMO the new names make more sense, and it's only an issue if you're directly referencing a brush/color intead of a StaticResource alias like ButtonBackground
• The corner radii were doubled 2->4 for controls and 4->8 for overlays (Popups)
• Margins and paddings in some controls were adjusted to work with the new design, but I don't think these are super breaking

Most of the work is done just by switching out the brush and control resources, and making a few small adjustments to some of the templates. Text controls and buttons needed a template adjustment to separate the border element from the rest of the control to cope with the inverted border brush (which as I said before, won't be needed if transforms can be added to brushes in the future). There were some API changes added in a couple controls, but I think they don't really affect Avalonia, or at least can be worked around.

IMO, I think v2 looks miles better than v1, so I'm for fully replacing it - and I think targeting the next major release would be ideal. I assume that will probably come around or after Win11 release and MS should be done tinkering with the theme by that point.

I think one thing that might help maintenance should v1 remain (either with versioning or as a deprecated theme), is if some updates to the styling system could be added. Right now, templates are quite cluttered and can be large and it makes it hard to follow and port things sometimes. Personally I'd target 3 things (these are nothing new, other issues have suggested these):

• Fix the local value/binding issue inside templates not being overridable
• Default Style keys
• Allow grouping based on classes and/or add a Target Name to setters so each individual control that needs to respond to the change doesn't need it's own <Style> declaration. For Example, in Avalonia, checkbox :pointerover requires 4 separate <Style>s
  

  Avalonia/src/Avalonia.Themes.Fluent/Controls/CheckBox.xaml

  Lines 82 to 98 in 898ed78

  	<Style Selector="CheckBox:pointerover /template/ ContentPresenter#ContentPresenter">
  	<Setter Property="TextBlock.Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedPointerOver}" />
  	</Style>
  	<Style Selector="CheckBox:pointerover /template/ Border#PART_Border">
  	<Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedPointerOver}" />
  	<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedPointerOver}" />
  	</Style>
  	<Style Selector="CheckBox:pointerover /template/ Border#NormalRectangle">
  	<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedPointerOver}" />
  	<Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedPointerOver}" />
  	</Style>
  	<Style Selector="CheckBox:pointerover /template/ Path#CheckGlyph">
  	<Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedPointerOver}" />
  	</Style>

Where as WPF/WinUI that would be condensed in the VisualStateManager if you remove the whole storyboard/keyframe thing the VSM uses: (not arguing for a VSM, but just comparing the verbosity):

<Setter Target="ContentPresenter.Foreground" Value="..." />
<Setter Target="PART_Border.Background Value="..." />
etc...

This would probably be a breaking change? but would help clean up control templates, and probably make porting things over from WinUI a lot easier. I'm just thinking aloud, but that's my thoughts.

[nlogozzo]

This hidden gem has actually started some of this work: https://github.com/amwx/FluentAvalonia
I suggest you contact the developer and merge that library with main Avalonia

[robloo]

@amwx Is awesome! I do hope the FontIcons, NavigationView, updated themes, etc find their way into Avalonia itself. This has been discussed but not with the core maintainers afaik.

[nlogozzo]

@maxkatz6 Should be something to consider, @amwx has already put in most of the work for getting the styles and many controls already ported and working beautifully!

[amwx]

@amwx Is awesome! I do hope the FontIcons, NavigationView, updated themes, etc find their way into Avalonia itself. This has been discussed but not with the core maintainers afaik.

We had a discussion about the NavigationView a couple months ago. Not much movement on that since though b/c I've been working on some other things and there's a few things I'd like to clean up/fix with it before (and if) it gets moved (like supporting multiple datatemplates, which is what I'm trying to work out now). @maxkatz6 is working on Icons and his approach is probably better for the core repo since it's more flexible.

Back on topic, the updated themes are there for anybody to do whatever with. Should be mostly copy and paste, except where I've replaced Paths with my Symbol/Font icons for the Fluent icons - but somewhere iirc we have an exported version of the svg path data for all the fluent icons, so that should be a simple fix. There are some controls that I haven't brought into the new styles either b/c they're lookless/don't depend on Fluent theme or I've added a replacement (e.g., I ported NumberBox to replace NumericUpDown), but it shouldn't be terribly difficult to add those.

[Tryanks]

Hi, any progress on this proposal? I love Avalonia and I'm also the biggest fan of Fluent Design. Now I'm using FluentAvalonia theme and I'm looking forward to the day when it will be merged into the official implementation, or the official implementation of Fluent v2 itself.

[maxkatz6]

@Tryanks please continue to use FluentAvalonia if you need Microsoft Fluent v2.
There are no plans to port it to the main framework. If anything, we could have a unique theme based on fluent, but adapted to the macOS styling slightly.

[robloo]

Personally, I think it's a good idea to modernize again with Fluent v2. Keeping Avalonia updated to latest design trends out of the box is important.

Additionally, Fluent v2 doesn't look out of place on most platforms including macOS and web.

Fluent v2 only needs a few tweaks to margins/padding that assume certain Windows-specific font sizes to work decently on macOS.

[heartacker]

This hidden gem has actually started some of this work: https://github.com/amwx/FluentAvalonia I suggest you contact the developer and merge that library with main Avalonia

good idea

[robloo]

It might be a good time to implement this one now:

• WinUI 3 is now open source (at least as a branch in the WinUI repo). This means all the previously missing Fluent v2 styles should exist (before several of them had to be guessed).
• FluentAvalonia is on pause. Pulling in Fluent v2 control themes into main Avalonia for the core controls would actually help that project most likely as only new controls would be needed.
• Fluent v2 styles look even better cross-platform. I know TextBox and others wanted to be updated to get the underlines for mobile platforms.

@amwx @workgroupengineering Any thoughts on this?

This is something I would be willing to start working on myself. No promises on timing. It would just be a new themes package probably with the Fluent2 name.

[timunie]

@robloo it has not been decided how we want to proceed here. So before you start working on it, please ask for a short confirmation. I don't want anyone doing work twice.

[workgroupengineering]

It might be a good time to implement this one now:

* WinUI 3 is now open source (at least as a branch in the WinUI repo). This means all the previously missing Fluent v2 styles should exist (before several of them had to be guessed).

* FluentAvalonia is on pause. Pulling in Fluent v2 control themes into main Avalonia for the core controls would actually help that project most likely as only new controls would be needed.

* Fluent v2 styles look even better cross-platform. I know TextBox and others wanted to be updated to get the underlines for mobile platforms.

@amwx @workgroupengineering Any thoughts on this?

This is something I would be willing to start working on myself. No promises on timing. It would just be a new themes package probably with the Fluent2 name.

I think it's a good idea, there are some necessary controls like NavigationView. I can give you a hand when I have some spare time.
In my opinion it should be implemented in the Avalonia.Labs repository.

Before investing time, however, you need to understand:

• what the Avalonia team thinks
• if the Avalonia Team has scheduled changes in the management of the Themes in its roadmap
• what are the implementation times of the Target in the setter Add Setter Target Property #11537
• Media query release times Feature/media queries #7938
• Define a public roadmap with implementation priorities (a pool could be created)

We could start by creating a pool to see what the priorities are.

[robloo]

@timunie

it has not been decided how we want to proceed here. So before you start working on it, please ask for a short confirmation. I don't want anyone doing work twice.

Yes, I'm aware and won't start unless the core team is on board. I am merely restarting the discussion about this and willing to do some of the heavy lifting. I also know you might have some other ideas on how you want to address themes going forward. This isn't something I would pick up in the next few months so there is time for more discussion.

@workgroupengineering

I think it's a good idea, there are some necessary controls like NavigationView.

For clarification I am NOT talking about merging in FluentAvalonia or pulling in any new controls with this. This issue and my goal is ONLY to create Fluent v2 styles for Avalonia's in-box controls. FluentAvalonia will still be needed to provide new controls from WinUI not already in Avalonia and the Fluent v2 styles for them.

what are the implementation times of the Target in the setter #11537

Yes, that would help a lot especially to keep control themes more similar to upstream but is not actually required.

I don't think the other points on your list other than core team opinions are critical. FluentAvalonia has already proven there are no roadblocks. Fluent v1 was already ported to Avalonia as well.

[workgroupengineering]

I don't think the other points on your list other than core team opinions are critical. FluentAvalonia has already proven there are no roadblocks. Fluent v1 was already ported to Avalonia as well.

Yes, there are actually points with lower priority.

• if the Avalonia Team has scheduled changes in the management of the Themes in its roadmap

In my opinion, this point is very important, because some changes could nullify the work.

Before starting the work we need to refactor the priority of how the styles are applied.

[BAndysc]

WPF now has Fluent aka Windows 11 Theme: https://github.com/dotnet/wpf/tree/main/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent . It should be quite simple to port this. What do you think about this? I think at this point, lack of "native" feel on Windows 11 can be concern for some.

[robloo]

I've been working with that quite extensively on another project. I've filed quite a number of issues for it.

The problem is it started based on another open source project: WPFUI. Care was NOT taken to follow upstream very closely.

• CornerRadius doesn't work
• Keys don't match upstream
• Control templates are not based on WinUI -- they were just remade to look similar
• Theme switching is a big discussion that is unresolved for .net 9
• etc.

The WPF team might address most of these by .net 10 but it certainly isn't ready now.

Use FluentAvalonia, it's much better. Since FluentAvalonia has slowed down quite a bit if we need a new Fluent v2 I strongly advocate for just doing a clean port from current WinUI 3. I've often said I will help with this but on the condition it's part of the Avalonia repo -- at least like the material theme.

There is really no reason to base on a sub-par WPF theme when we can base on the actual WinUI 3 theme.

[BAndysc]

Oh, I see, good points. I didn't dig that deep into it, I just took a look at .net 9 changes and thought it looked interesting.

[dbriard]

Fluent Themes are quite a mess... On the Fluent v2 website, all the versions are differents: Windows, Web, Mobiles... even the control names are different between versions. While the Window's Fluent theme look good, the Web's Fluent theme looks more up to date with latest Microsoft Apps such as Office and more CrossPlatform in my opinion, but a few Controls are missings.

I especially like the FabricTheme based on Fluent V2 for Web. Don't know where Microsoft will go with Windows 12. For my own needs, I am skining like that.

What is a pitty is that even Microsoft use a Frankenstein of all their Fluent versions is their own apps, no harmony...

[rabbitism]

Fluent Themes are quite a mess...

Exactly. Some of Ursa users are requesting fluent theme for Ursa, but wait, what design spec should I follow?

[robloo]

Yea, we really need something like:

Fluent1 : A 1-to-1 port from WinUI2.x
Fluent2 : A 1-to-1 port from WinUI3 latest
Fluent2.5 : Based on Fluent2 above but with the latest web changes that the WinUI team isn't keeping up with. Will include actual Fluent DataGrid themes as well which only exist for web controls by Microsoft. This could turn into Fluent3. TBD.

It would then be good to package this all up as a Nuget with bare-minimum new controls (only FontIcon, etc.), Symbols font, etc. In a perfect world FluentAvalonia would then rebase off this core Fluent Theme and extend it to add new controls. That would avoid duplicating work.

We could start with a fresh port of the WinUI3 code for Fluent2. I've been wanting to do that for a while.

@maxkatz6 What are the chances of a Fluent Theme update being allowed in Avalonia itself? Something with Fluent v1/v2 switching like what was done on WinUI3?

Otherwise, could we get a new repository under AvaloniaCommunity? (Not preferred)

@amwx How open are you to pulling out the core styles from Fluent Avalonia into a lighter-weight nuget and a different project? This would take a lot of maintenence off your shoulders and you would only have to pull in a dependency or two to get all the core control styles. Then you could just focus on the new controls and the demo program in FluentAvalonia.

I really, really want to bring everyone together that is using Fluent Theme with Avalonia and base the code off of WinUI3 directly. All would have a good starting point for further modification as well.