Microsoft-ui-xaml: Inconsistent design with native controls

[mklemarczyk]

I would like to point that the extension changes the default design of native controls in the unexpected way.

1. Create UWP project (ex. Black App),
2. Add some simple controls,
3. Add Microsoft UI Xaml NuGet package,
4. Install according to the documentation on README.md.

Expected behavior
All style of controls is the same, colors, borders, rounding, etc.
Fluent design benefits applied, advanced brushes, animations.

Expected view of checkbox
https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/checkbox

Example

Actual behavior
Tooltips are rounded and smaller, the advanced bushes in the navigation view are not applied. Check boxes are rounded and less visible.

Screenshots
Available on request.

Version Info
Windows 1903 targeted, Windows 1803 minimal

NuGet package version:
Microsoft.UI.Xaml v2.3.200213001

Additional context
I found the issue when I created new project using Windows Template Studio which uses Microsoft.UI.Xaml. I would expect that if package changes the default layout of native controls so much it is possible to disable this by some configuration.

[mdtauk]

WinUI is bringing with it a change to the style of all the controls. The native XAML version should be considered deprecated and in maintenance.

Windows 10X and WinUI 2.X onwards is the new design that Microsoft is moving too.

I do not think the documentation reflects the new designs, but also, I think WinUI will bring with it new updated docs...

https://docs.microsoft.com/en-us/uwp/toolkits/winui/

Maybe @chigy can speak more about whether the control docs will continue reflecting the old designs, with new docs for WinUI, or if they will be updated.

[chigy]

@mklemarczyk , and @mdtauk ,
Thank you for pointing out the obvious. Yes, we are working on it but it is not as easy of a task for us since we have hundreds of images that needs updated every time this type of design change happens. We are working to make the asset management efficient while working to get some of the high priority issues fixed soon. I'm not saying this to make an excuse but wanted to be transparent about it as well.

[mklemarczyk]

@mdtauk
I do not see any information that the official style is changing. Do you have any source to refer to this? I would like to review changes and keep current style in my applications. I seen already some changes in default applications of Microsoft and they introduce a lot of issues to my users and friends. Especially for people with disabilities and color blindness.

@chigy
The new style that I see introduces lower levels of contrast. The color difference is sometimes barely visible. It is even worse when monitor screen is dimmed (screen backlight is reduced).

Are we going to design new style only for some screens, some users and some devices?
Just to make is look fancy and beautiful. I believe, it has to be useful and productive first.

[mdtauk]

@mdtauk
I do not see any information that the official style is changing. Do you have any source to refer to this? I would like to review changes and keep current style in my applications. I seen already some changes in default applications of Microsoft and they introduce a lot of issues to my users and friends. Especially for people with disabilities and color blindness.

@chigy
The new style that I see introduces lower levels of contrast. The color difference is sometimes barely visible. It is even worse when monitor screen is dimmed (screen backlight is reduced).

Are we going to design new style only for some screens, some users and some devices?
Just to make is look fancy and beautiful. I believe, it has to be useful and productive first.

The changes have been mentioned many times with this Repo, and have started appearing in the past few releases of WinUI 2.X

The changes are being tested with various contrast ratios, and to address feedback from various places.

The changes mostly involve reducing current 2px thick borders to 1px, increasing the opacity of some elements of controls to make them match contrast ratios, as well as rounding off the corners subtly.

[Felix-Dev]

@mklemarczyk For reference, you can find the dicussion about rounded corners here: https://github.com/microsoft/microsoft-ui-xaml/issues/524

There are currently a couple of new issues introduced with the change to rounded corners and 1px borders (such as gaps in the corners for controls). If they put you off, you can use the Fluent XAML Theme Editor to easily revert the corner radii and border thickness changes.

[StephenLPeters]

@YuliKl fyi