search

AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.87k stars 2.24k forks source link

Porting Fluent Design Styles and Controls #3950

Closed hez2010 closed 3 years ago

hez2010 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

JamRemco commented 4 years ago

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 image

Remco

kekekeks commented 4 years ago

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 commented 4 years ago

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 image

Remco

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

JamRemco commented 4 years ago

@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 commented 4 years ago

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

I've updated the issue.

danwalmsley commented 4 years ago

@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 commented 4 years ago

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 Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\ {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 commented 4 years ago

@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 commented 4 years ago

@amrx what is immersive color?

amwx commented 4 years ago

@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

image

danwalmsley commented 4 years ago

@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 commented 4 years ago

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 image Or image or image

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.

robloo commented 4 years ago

@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 commented 4 years ago

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

regards,

Recmo

seanocali commented 4 years ago

@amrx what is immersive color?

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

danwalmsley commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@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).

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 commented 4 years ago

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 commented 4 years ago

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

maxkatz6 commented 3 years ago

@greatawesome probably some level of interop could be possible, but it's not on the roadmap.

maxkatz6 commented 3 years ago

With 0.10.0 released I believe this issue can be closed. We now have "Fluent" theme which was ported from WinUI. If someone needs embeding of native control, it should be possible to do with WinForms/WPF interop.

robloo commented 3 years ago

@maxkatz6 Should this actually be re-opened with the new Fluent Version 2.0 Style? Or should a new issue be created?

I expect WinUI3 is going to actually debut with version 2 of Fluent that is for Windows 11.

jmacato commented 3 years ago

@robloo have they finalized the design yet? i cant seem to find any resources for it yet

amwx commented 3 years ago

I think most of the design has been finalized, but they're still tinkering with it. But the resources are in the WinUI repo now (basically any file not marked with "_v1.xaml" is the new WinUI styles, v1 is the old styles), and I've been bringing them into my FluentAvalonia repo (most are already there, but not all). It's probably worth waiting until ~Win11/actual release and they stop making little changes. Though really before and if Avalonia brings them in, #5768 needs to be addressed because there's some brushes that use a -1 ScaleY transform, so I'm hoping this comes with the new composition engine. This also might reignite the #5593 discussion, as it may be best to make this an "addon" to reduce confusion between fluent theme version, and keep the core size down.

robloo commented 3 years ago

Yea, as mentioned this has been released in WinUI 2.6 as Fluent version 2.0. They keep adjusting things and will do so for Windows 11. However, it is ready to bring over into other frameworks like Avalonia now.

https://docs.microsoft.com/en-us/windows/apps/winui/winui2/winui-2.6#visual-style-updates

This also might reignite the #5593 discussion, as it may be best to make this an "addon" to reduce confusion between fluent theme version

I dont think Avalonia should have Fluent theme versions really. Fluent in Avalonia should always try to be latest. Version 2 supercedes version 1 and should probably be entirely replaced. Otherwise maintaining all versions going forward is going to get real difficult even if its split into separate packages.

jmacato commented 3 years ago

Fluent in Avalonia should always try to be latest.

I agree. theme versioning would make things needlessly complicated maintenance-wise.

maxkatz6 commented 3 years ago

Still, we need keep in mind, that developers already build their applications and custom styles on top of Fluent v1. We either need to do theme versioning. Or move Fluent theme to separated NuGet package (another breaking change, but it still makes sense to do anyway), and inform developers, that they can update Avalonia version, but keep Fluent version older in order to avoid breaking their theming.

Somehow, I would prefer second option, even though it makes more headache for everybody.

maxkatz6 commented 3 years ago

Actually, it's better to create new issue. This one is already over discussed with unrelated to Fluent v2 topics.

maxkatz6 commented 3 years ago

https://github.com/AvaloniaUI/Avalonia/issues/6269

cesarchefinho commented 1 year ago

have you see

https://amwx.github.io/FluentAvaloniaDocs/ ?