Adapt the new Fluent Design Guidelines

[SunboX]

Microsoft published an new design system called "Fluent Design". The Nextcloud app should adapt this, to achieve a consistent look and feel for all Windows users across all devices.

Design Resources: https://developer.microsoft.com/en-us/windows/apps/design

Intoduction to Fluent Design: https://channel9.msdn.com/Events/Build/2017/B8034

Beautiful UI made possible and easy with Windows.UI and the Windows 10 Creators Update
https://blogs.windows.com/buildingapps/2017/06/22/sweet-ui-made-possible-easy-windows-ui-windows-10-creators-update/

[SunboX]

By now, this will only work with "Fall Creators Update" Insider Preview (introduced v10.0.16190.0) installed on the developing machine. The app itself should run on Creators Update (not tested yet).

Windows 10 requirements

Device family	Windows 10 Insider Preview (introduced v10.0.16190.0)
API contract	Windows.Foundation.UniversalApiContract (introduced v5)

[jp-weber]

But I hope for an optional transparency, because is it currently at some points buggy and not really nice.

[SunboX]

Hey @revan1199, what do you mean with "buggy"? I did not recognize any bugs, but I'm very interested in knowing about them. 😏

It will not be optional, because it will be based on a new common control called "NavigationView". That already has the acrylic material look build in. Changing this makes no sense, if Microsoft decides to go this way, we should follow. Most "normal" users want the same look&feel across all their apps. Except that, we will introduce some branding color to make the app more "Nextcloud"y, but this will be changeable by a setting to the system default accent color and theme. This is the only "hack" we will build in - all other UI&UX should follow common Windows apps Look&Feel (like Groove Music, the Store app, the File Explorer app, Outlook, News, Fotos, ...)

By the way, if you are disturbed by those "white borders" if you touch something, that look like rendering "bugs" 😏 , it's by design. This is a new highlight feature for new input types like pens or visual input from AR. Apps are getting universal 😏 Here are more infos about that: https://channel9.msdn.com/Events/Build/2017/B8034

[jp-weber]

Curiously sometimes the noise grain intensity of the background is different. And I don't like the noise texture at this density. For example the calculator app, two instances, but different background:
https://abload.de/img/acrylicqcjjs.jpg

[SunboX]

For example the calculator app, two instances, but different background

The inactive window will not have the acrylic effect. Maybe that's the issue here?

They explain it here at minute 20:59 -> https://channel9.msdn.com/Events/Build/2017/B8034

[jp-weber]

No, I made the screenshots step by step and with focus of the application.
But it should be only a short-term problem and should be fixed until the release.

[RokeJulianLockhart]

Windows.UI

@SunboX, WinUI3 would probably be a better solution to this.