[Visual] Fluent UI alignment

[niels9001]

Just a heads-up - it looks like the WinUI teams is going to update the styling of controls to match FluentUI.

New colors, new corner radii but same behavior :).

Buttons proposal:
microsoft/microsoft-ui-xaml#3546

ListView & GridView:
microsoft/microsoft-ui-xaml#3544

Other basic input controls:
microsoft/microsoft-ui-xaml#3549

[ShankarBUS]

Aren't they just proposals?

They're still under consideration, aren't they?

No real has been made yet, right?

Only styles and theme resources are going to change, right?

[niels9001]

Yup, but proposed by the WinUI (design) team, so I'm pretty sure they will move ahead in the coming months.

As far as I can tell these are just visual updates, e.g. new corner radii and colors.

[ShankarBUS]

The slider, grid view and list view updates are good. But I'm not sure about the buttons styles. They don't look that good IMO.

Anyways, happy that MS is moving towards a consistent design language.

[mdtauk]

There is a bigger project being worked on to unify the various UI controls through the use of Design Tokens.

https://github.com/microsoft/fluentui-token-pipeline

Ideally the WPF repo would opt into working with this project, and refresh the PresentationFramework's Theme when apps run on Windows 10. But as this project finalises, and the Global set of Styles, Colours, Fonts, Type Ramps, Iconography and control designs comes along, that would give you a definitive source to try to match

[Kinnara]

Thanks for the info. Personally, I embrace the unification because this library can be used in more places (e.g. Office add-ins) and doesn't look out of place.

[ShankarBUS]

Could someone explain me what's this is microsoft/microsoft-ui-xaml@c464079?

Did they actually make the visual update? Some many resources are changed. Oh Lord! Each xaml resources file have a new *_v2.5.* counterpart (which seem to be duplicate kept for some reasons).
Most of the resources has been renamed and modified.

Now, I don't know what to do with my WIP TeachingTip port (#203). This issue needs to be worked on as a high priority task now.

@Kinnara, could I help you with this in any possible ways?

[mdtauk]

Could someone explain me what's this is microsoft/microsoft-ui-xaml@c464079?

Did they actually make the visual update? Some many resources are changed. Oh Lord! Each xaml resources file have a new *_v2.5.* counterpart (which seem to be duplicate kept for some reasons).
Most of the resources has been renamed and modified.

Now, I don't know what to do with my WIP TeachingTip port (#203). This issue needs to be worked on as a high priority task now.

@Kinnara, could I help you with this in any possible ways?

I believe there is the WinUI v2.5 designs, those are the ones currently in use.

Then there will be new designs, probably coming alongside WinUI 3 and or the "Sun Valley" visual refresh for Windows.

They added a mechanism to use the Latest visuals, and the WinUI_2dot5

[ShankarBUS]

Well now I'm even more confused. So is this (microsoft/microsoft-ui-xaml@c464079) something we need to take care of?

[mdtauk]

Well now I'm even more confused. So is this (microsoft/microsoft-ui-xaml@c464079) something we need to take care of?

Eventually yea.

There is a visual refresh being developed. You can see several of the proposed changes by looking through the issues.

The work started in a separate branch, the tokens experiment. Those are/will be merged into the master branch - with the new mechanism to switch between the two designs.

WinUI 2.5 is the current set of control designs, which would make ModernWPF align with those designs. But there are new designs/tweaks coming - which ModernWPF may wish to update to.

Not sure when the new WinUI designs will go live, it could be WinUI 3 - it could also be a 2.X branch, or even along with 20H2 later in the year?

[ShankarBUS]

What I ask is, did the visual refresh actually happen? Because I can see change in colors and corner-radius and lot others in the commit. What I understand from your statement is, the visual refresh didn't yet happen and they're experimenting with the tokens. But the PR has been merged into master!

to switch between the two designs.

What two designs? I'm legit confused.

Will WinUI 2.5 include these changes? Has WinUI 2.5 been released already?
We have to do something quick because even if the commit didn't include any visual change, it introduces change in resources and their names.

[ShankarBUS]

I could see Slider Visual Update (microsoft/microsoft-ui-xaml#3768) (already merged into master as a part of microsoft/microsoft-ui-xaml@c464079) and ToggleSwitch ( microsoft/microsoft-ui-xaml#3869) Visual Update (not merged into any branch) being part of the token-experiment branch.

So, the visual refresh is happening. But the current style (i.e. WinUI 2.5 styles) would be used by default. The token styles (which helps unifying the UI across all Fluent Design platforms) are being worked. But the resources have already been updated. Only the styles are being worked now.

So, before we pull in any refreshed styles, we first need to update the resources in this project.

[ShankarBUS]

@mdtauk, could you tell me how to test the current state of the visual refresh progress?
Is checking out and building the token-experiment branch enough?

[mdtauk]

As I understand it... dev\Generated\XamlControlsResources.properties.cpp and idl\Microsoft.UI.Xaml.idl

You change the winrt::StylesVersion::WinUI_2dot5 to winrt::StylesVersion::Latest

BTW - this is all still a Work in Progress - not all the visual refresh branches are merged into Master yet. The ToggleSwitches are still in their own branch - The Checkboxes have not been given updated glyphs etc

[niels9001]

As a side not: the design tokens are agnostic to all the current Fluent frameworks, that means that ModernWPF could leverage it as well it can be easily updated in the future.

[mdtauk]

As I mentioned before, they are developing a Figma plugin, and a pipeline to use design tokens and translate them into CSS, or Xaml ResourceDictionaries which will be usable in your WinUI and FluentUI apps.

Also at the moment the WinUI refresh is using hardcoded Accent Colours, with a clear distinction between the Light and Dark versions. @chigy mentioned they are still experimenting with Accent colours, so perhaps they will take the OS provided colour, and do some manipulation with it to generate new shades for WinUI 3.X

[niels9001]

@Kinnara @ShankarBUS Is this something that is planned or being worked on. If so, I'd be happy to spend time to contribute to this!

[mdtauk]

@Kinnara @ShankarBUS Is this something that is planned or being worked on. If so, I'd be happy to spend time to contribute to this!

Unless you have access to the internal Figma files, as the design team is updating them - it may be worth waiting off until WinUI 3 is done and out, or at least until all the controls have finished receiving their Visual Refreshes

[niels9001]

@Kinnara @ShankarBUS Is this something that is planned or being worked on. If so, I'd be happy to spend time to contribute to this!

Unless you have access to the internal Figma files, as the design team is updating them - it may be worth waiting off until WinUI 3 is done and out, or at least until all the controls have finished receiving their Visual Refreshes

True - I think if WinUI 2.6 ships everything should have been updated, right? I'm guessing that's near.

[mdtauk]

@Kinnara @ShankarBUS Is this something that is planned or being worked on. If so, I'd be happy to spend time to contribute to this!

Unless you have access to the internal Figma files, as the design team is updating them - it may be worth waiting off until WinUI 3 is done and out, or at least until all the controls have finished receiving their Visual Refreshes

True - I think if WinUI 2.6 ships everything should have been updated, right? I'm guessing that's near.

Hopefully, but 2.6 is already in preview, and there are still a few controls that haven't begun being looked at yet.