Avalonia: Porting WinUI 3.0 Fluent Design Styles and Controls

[hez2010]

WinUI 3.0 is a major update of WinUI 2.0 that will greatly expand the scope of WinUI to include the full Windows 10 native UI platform, which will now be fully decoupled from the UWP SDK.
Therefore, it will allow WPF, WinForms, MFC, traditional Win32 and many other GUI stacks to consume WinUI 3.0 libraries.

~I hope that Avalonia can also add support for consuming WinUI 3.0.~
I hope that Avalonia can port WinUI 3.0 Fluent Design Styles and Controls.

[JamRemco]

WinUi is not crossplatform en avalonia is crossplatform so i dont think that wil work

What is what you want to use from WinUI?

Regards,

Remco

[Gillibald]

We already have the ItemsRepeater ported to Avalonia. This shows porting controls from Winui is possible. Contributions are welcome.

[JamRemco]

Porting yes, copying the look ,feel and styles also possible.
The OP asked for consuming WinUI, and that is an other story.

Actually, i am making styles for avalonia controls right now. Wich includes WinUi styles for example...
A Tooglebutton with WinUi toggleswitch style

Remco

[kekekeks]

Consuming WinUI would be possible via native window embedding. There is no much point in doing that though, since it will only work on Windows.

[danwalmsley]

Porting yes, copying the look ,feel and styles also possible.
The OP asked for consuming WinUI, and that is an other story.

Actually, i am making styles for avalonia controls right now. Wich includes WinUi styles for example...
A Tooglebutton with WinUi toggleswitch style

Remco

@JamRemco an effort to update the official theme / templates to match WinUI is about to start, maybe we can collaborate.

[JamRemco]

@danwalmsley Sounds like a plan

The template have a lot of hardcoded properties like fonts and such
This need to be changed to make it more templateable.
We need more template naming/parts such as PART_header for example

Regards,

Remco

[hez2010]

WinUi is not crossplatform en avalonia is crossplatform so i dont think that wil work

I've updated the issue.

[danwalmsley]

@danwalmsley Sounds like a plan

The template have a lot of hardcoded properties like fonts and such
This need to be changed to make it more templateable.
We need more template naming/parts such as PART_header for example

Regards,

Remco

I think we can get hold of the actual templates for UWP / WinUI using visual studio and at least the UWP ones are public, not sure about winui but im guessing they will be.

It seems Avalonia will need theme support before we can start however, will discuss with @kekekeks what needs doing first.

[amwx]

Just to add here, you can get the full UWP base templates & themes from the themeresources.xaml & generic.xaml files from the Windows SDK:
C:Program Files (x86)Windows Kits10DesignTimeCommonConfigurationNeutralUAP {version number, e.g. 10.0.18362.0} Generic
They're like 100,000 line xaml files since MS designates a brush/color for EVERYTHING, but all styles & colors are there, most theme brushes are redundant StaticResources to a base set of colors that change by Light/Dark/High Contrast theme.

And if you really want to get fancy and get the user's current Accent Color & color setting preferences, you can p/invoke uxtheme.dll to get it (note: not my own discovery, though I can't remember the source where I got this from). These are undocumented APIs, but google is helpful. Also, not sure how far back in Win10 versions these go
uxtheme functions for accent color (these I believe trace back to Win 8)
[DllImport("uxtheme.dll", EntryPoint = "#95")] public static extern uint GetImmersiveColorFromColorSetEx(uint dwImmersiveColorSet, uint dwImmersiveColorType, bool bIgnoreHighContrast, uint dwHighContrastCacheMode); [DllImport("uxtheme.dll", EntryPoint = "#96")] public static extern uint GetImmersiveColorTypeFromName(IntPtr pName); [DllImport("uxtheme.dll", EntryPoint = "#98")] public static extern int GetImmersiveUserColorSetPreference(bool bForceCheckRegistry, bool bSkipCheckOnFail);
Check if dark mode is requested (these I believe are recent Win10 only)
[DllImport("uxtheme.dll", EntryPoint = "#132")] //Win 10 1809+ ? public static extern bool fnShouldAppsUseDarkMode(); [DllImport("uxtheme.dll", EntryPoint = "#138")] //Win 10 1903+ ? public static extern bool fnShouldSystemUseDarkMode();
Helper to get ImmersiveColor
````
public static Avalonia.Media.Color GetThemeColorRef(string h)
{
var colorSetEx = GetImmersiveColorFromColorSetEx(
(uint)GetImmersiveUserColorSetPreference(false, false),
GetImmersiveColorTypeFromName(Marshal.StringToHGlobalUni(h)),
false, 0);

    var a = 0xFFFFFF & colorSetEx >> 24;
    var r = (0xFFFFFF & colorSetEx);
    var g = (0xFFFFFF & colorSetEx) >> 8;
    var b = (0xFFFFFF & colorSetEx) >> 16;

    var colour = Avalonia.Media.Color.FromArgb((byte)a, (byte)r, (byte)g, (byte)b);

    return colour;

}
Get Accent Color(s)
var themeAccent = GetThemeColorRef("ImmersiveSystemAccent");
var themeAccentLight1 = GetThemeColorRef("ImmersiveSystemAccentLight1");
var themeAccentLight2 = GetThemeColorRef("ImmersiveSystemAccentLight2");
var themeAccentLight3 = GetThemeColorRef("ImmersiveSystemAccentLight3");
var themeAccentDark1 = GetThemeColorRef("ImmersiveSystemAccentDark1");
var themeAccentDark2 = GetThemeColorRef("ImmersiveSystemAccentDark2");
var themeAccentDark3 = GetThemeColorRef("ImmersiveSystemAccentDark3");

````

[robloo]

@danwalmsley @amwx @JamRemco
Like the idea of using the latest control styles/templates from WinUI/UWP in Avalonia. That would be really cool. It might also be a good idea to take the ideas from Uno Platform and provide Native styles for each platform -- native control designs for MacOS and Linux GTK/QT. I realize that's a big task but would allow for 'native' look and feel on all platforms.

That said, do NOT get the latest styles from the generic.xaml that ships with Windows (the huge file). The WinUI library currently has the latest XAML styles including rounded corners for nearly all controls. The current style inheritance for UWP apps is:

1. Windows default styles that ship with the framework -- this is the huge monolithic generic.xaml file
2. The WinUI 'fluent' styles that override the default styles for all WinUI library apps. This is the latest design and will become the base for Win UI 3.0 (when 1 and 2 get merged together).

You'll want to get the XAML from each control folder (they are already separated out instead of one big XAML file) here: https://github.com/microsoft/microsoft-ui-xaml/tree/master/dev

You'll definitely want to finish #2769 before doing this though.

[danwalmsley]

@amrx what is immersive color?

[amwx]

@robloo Good catch on that (re WinUI templates). I forgot about that.
@danwalmsley Immersive color is just what MS called the API (at least that's my guess), but it's just the theme colors as laid out in uxtheme, and set from the user color preferences

[danwalmsley]

@robloo native themes are a great idea, however something that should be provided by some kind of Avalonia Community Toolkit and built be community. If someone makes good in roads in this area we can probably adopt a community toolkit repo into AvaloniaUI organisation, provided there are people to maintain it.

[JamRemco]

Agree with the above, but the thing is : what is native look. there are 10 diverent *Nix looks (if not more) and win 10 cant make up its mind how to dress ;).
Eg

Or

or

Righ now there are some "isues" with the templates. if that is fixed. we can make first a "Avalonia Style" out of the box which not mimics anything perse.
And writing styles an classes on top of that.

Some of the "Modern Desig" is old wine in new bottles.

Regard,

Remco

[robloo]

@JamRemco

but the thing is : what is native look. there are 10 diverent *Nix looks (if not more) and win 10 cant make up its mind how to dress ;).

There are many different styles in windows because there are a lot of different pieces of technology involved. However, there is no confusion on what the latest/current UI style is. Therefore, I have to disagree with you here.

Per the title of this issue, the latest styles are "WinUI 3.0 Fluent Design" which is only available right now in the WinUI library and will be the default styles shipping with WinUI 3.0 which is in preview now.

[JamRemco]

@robloo
So. WinUI = Native Windows.
Thats what i asked right ;).
admitted the discusion did got a bit sidetracked.

regards,

Recmo

[seanocali]

@amrx what is immersive color?

https://stackoverflow.com/questions/37774307/c-get-windows-8-1-10-selected-color-theme

[danwalmsley]

@robloo which is only available right now in the WinUI library and will be the default styles shipping with WinUI 3.0 which is in preview now.

There is a web implementation also and a mac implementation too.

@JamRemco thats the great thing fluent ui isn't a framework or a native style, its just a set of design styles and concepts that anyone is allowed to implement.

[JamRemco]

@danwalmsley Yeay i know and i agree with most of it.

I saw you are bussy with the "acrilic" stuff. from what i saw that looked great.
I am a bit more of a "old scool" developer but i getting better every day, or at least i pretend to.
I have make ui frameworks in GDI+, its kinda the same but also a lot different.

Looking forward to contribute and make this the best crossplatform UI

Fingers crossed,

Remco

[danwalmsley]

Acrylic stuff is just experimenting around, to see how far we can get. Seem that we need to implement a compositor to make it work correctly. So it won't be here anytime soon. Except maybe background acrylic.

The rest of the controls and styling can be done immediately though.

[danwalmsley]

@JamRemco @robloo @seanocali @amwx @hez2010

Porting has begun, if any of you are able to lend an hand, please get in touch with me ASAP on gitter.

@JamRemco you mentioned earlier about styles for ToggleSwitch, realised Avalonia doesnt have that control, a PR to implement that should be reasonable easy... let me know what you have done.

[JamRemco]

@danwalmsley

What i did is made a style for Togglebutton (as you know the backing control for checkbox and radiobutton)
In WinUi/Uwp it is an other control. At the time i feld it is not worth it to make a control for something wich is in essence the same as a togglebutton.
The colors are "hardcoded" because coloranimation doesnt work with resources for some reason. however it can be done (Kinda) with a workaround eg:
From white to blue having two shapes - 1 white and one blue - and animate the Opacity of one shape.
However this is not inplemented yet, but easely done

Although i am realy bussy this weekend, i am stil like to help somehow
I'll check later whatsUpp @ Glitter

Remco

[danwalmsley]

@danwalmsley

What i did is made a style for Togglebutton (as you know the backing control for checkbox and radiobutton)
In WinUi/Uwp it is an other control. At the time i feld it is not worth it to make a control for something wich is in essence the same as a togglebutton.
The colors are "hardcoded" because coloranimation doesnt work with resources for some reason. however it can be done (Kinda) with a workaround eg:
From white to blue having two shapes - 1 white and one blue - and animate the Opacity of one shape.
However this is not inplemented yet, but easely done

Although i am realy bussy this weekend, i am stil like to help somehow
I'll check later whatsUpp @ Glitter

Remco

@jmacato might be able to solve the color animation issues...

please open a PR when your free again and we can take a look even if its just a draft.

[maxkatz6]

@danwalmsley
I have looked at some controls in Avalonia, which isn't yet updated with Fluent. As reference I used UWP, WinUI and (WCT) Windows Community Toolkit (I will name all of them as "UWP controls" below).

• [x] Button, ToggleButton, RepeatButton - https://github.com/AvaloniaUI/Avalonia/pull/4112 https://github.com/AvaloniaUI/Avalonia/pull/4110
• [x] ButtonSpinner - there no such UWP control, but for now we can just update color and border to match ComboBox. It also isn't really touch friendly.
• [x] NumericUpDown - There is NumberBox in UWP, concept from which could be used here in future, but it seems like with breaking changes.
  Progress: https://github.com/AvaloniaUI/Avalonia/pull/4109
• [ ] Carousel - WCT has control with that name, but it totally different. In UWP there is very similar FlipView, but with better scroll and keyboard support. For now we can use style and enhance input later.
• [x] DataGrid - it is complex to compare... but I think DataGrid from WCT is very similar, and we can use styles at least.
• [x] DataPicker - UWP has DataPicker, but it works in very different way. It seems like Avalonia just uses Calendar control in Popup, so we don't need to restyle anything after https://github.com/AvaloniaUI/Avalonia/pull/4028 apart from calendar-icon on the right of closed control.
  Progress: https://github.com/AvaloniaUI/Avalonia/pull/4108
• [ ] Expander - WCT has same Expander control.
• [x] Notifications - there is no canonical way to show in-app notifications in UWP/WinUI (but it could be https://github.com/microsoft/microsoft-ui-xaml/issues/913). WCT has InAppNotification tho.
• [x] ProgressBar - needs some work on styles. Probably we should consider adding ProgressRing.
• [x] Slider
• [x] TabControl + TabStrip - https://github.com/AvaloniaUI/Avalonia/pull/4133 - WinUI has TabView and WCT has TabView (they are different), but they are more like fully featured browser tabs controls. For now we can just update colors on TabControl to match Fluent style. There also Pivot in UWP, which could be used as a base for our TabControl's styles.
• [x] ToolTip - need to add transparency and text wrapping apart from rounded borders and padding.
• [x] TreeView - https://github.com/AvaloniaUI/Avalonia/pull/4151
• [x] FocusAdorner

I hope I didn't forgot about anything. Controls like Image or TextBlock doesn't have special styles, so we don't need to do anything here. However there are some missed features out of current scope.

[robloo]

The style updates are looking really good based on the screenshots I've seen 👍

@maxkatz6
Also, I recently made a comparison of WPF/UWP that includes a section on controls. It might be useful to see which Controls are missing from Avalonia. (I notice this issue is comparing controls as well as styling)

https://github.com/robloo/PublicDocs/blob/master/UWPvsWPF.md#Controls

[greatawesome]

I wonder if Uno would make it possible to consume WinUI in Avalonia, now that they have a Linux/Skia backend?