Microsoft-ui-xaml: Proposal: New ProgressBar Style

[kathyang]

Proposal: Update ProgressBar style

Summary

ProgressBar is one control that many apps customize and seem to carry branding personality. Windows wants to update the personality by introducing a new progress ring style.

Rationale

• Alignment with Edge and other apps
• Introduce a lighter, simpler aesthetic
• Introduce consistency across all Shell surfaces

Scope

Scope

| Capability| Priority |
|:--|:-|
| Developers are able to use WinUI3.x* package and without any work, get the new Windows visual style. | Must |
| Developers have flexibility to style ProgressBar's visual and motion without retemplating. (This is to be a new GH item.) | Should |
| Developers and end users experience control update that feel coherent with the same controls used by Fabric, Edge, and Xbox. | Should |

*Timing here is not a commitment, but to follow the release cycle. Just using the next version #.

Design details and visuals

This only impacts ProgressBar control.
Visual comp

Important Notes

Open Questions

• Motion details (waiting on design team)

Release Checklists

Prerelease readiness

• [ ] Dev: quality review + code review done
• [ ] Dev: test coverage added
• [ ] Dev: initial accessibility review done
• [ ] Dev: telemetry implemented
• [x] PM: spec up to date
• [x] PM: feature ready for feedback

• [x] PM: docs.microsoft.com updates ready

  Stable release readiness

• [ ] Dev: feature previously shipped in a prerelease NuGet package

• [ ] Dev: Azure CI tests passing
• [ ] Dev: accessibility review done
• [ ] Dev: API review done
• [ ] Dev: IDL attribute switched from preview to public
• [ ] Dev: Add test coverage to the NugetReleaseTest test
• [x] PM: spec done
• [x] PM: glob/loc, privacy, security, license compliance ready
• [x] PM: customer validation done
• [x] PM: docs.microsoft.com updated
• [x] PM: Xaml Controls Gallery updated

[mdtauk]

I personally would like to see a gradient used for the indeterminate progress bar and ring. It distinguishes the two modes better at a glance

[mdtauk]

Is this refined animation the one currently present in the XAML Controls Gallery?

The animation currently appears like a bad loop. And is missing the starting easing and the second slower ease out as is demonstrated by the FastDNA Indeterminate Progress animation

[YuliKl]

The Gallery currently has the old progress bar, I'm in the process of updating. The updated version is on the right:

[mdtauk]

Yes that's the animation I saw in the controls gallery, it seems to zip forward and then slow at the end, and repeats it over and over.

It looks like a visual bug, compared to the animation used in the FastDNA and FabricUI versions of the control.

Have you been given the correct animation values? You may want to ask the design team to look at it @chigy

[jevansaks]

Feature is done but leaving open for @yulikl to follow up on animation values.

[mdtauk]

Glad to hear on the second community call, that some more polish is coming to the Progress Bar.

On a slightly related subject - will the Determinate ProgressRing make it into preview soon?

[jevansaks]

On a slightly related subject - will the Determinate ProgressRing make it into preview soon?

Yes! It's in PR now, will be one of the first things you'll see in 2.4 prerelease.

[mklemarczyk]

What is happening here? I thought it should bring the Fluent Design into my app, not to restyle it all. Give the people control back over the style of theirs controls! This library is overriding all styles including the custom styling. It should enrich the basic application with Fluent Design approach. All controls now looks different that the standard ones documented!

Are you going to document now what you did? There is no list and documentation how this library has an effect on the app. It makes everything round and different. If the app was styles with original style, after applying this lib is destroy all UX design work.

When did you guys seen docs last time?
https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/index

It looks like you are trying to incorporate Google Material Design instead Microsoft Fluent Design. The google design is totally unreadable, that is why most commercial apps are creating own layout and design. Do not make the same mistake.
The most important, leave choice for the developer. If the controls should be round or not, the color palet, the behavior and response. If you are want to redesign all leave a option to disable parts of design.

[YuliKl]

@mklemarczyk please keep the code of conduct in mind when leaving comments in this repo. All of us strive to keep our choice of language professional.

[YuliKl]

@mklemarczyk as for the content of your last comment, it doesn't sound like it's addressing the ProgressBar style.

When did you guys seen docs last time?
https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/index

The Progress controls page in the docs, https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/progress-controls, shows exactly what the control looks like with the change tracked by this issue.

You appear to have broader feedback for WinUI, which I encourage you to raise in a new issue.

[YuliKl]

Closing this issue because the style change has shipped and is documented in the Controls Gallery and docs site.

[Felix-Dev]

@mklemarczyk You can partly revert back to the previous control look (border thickness, corner radius) by using the Fluent XAML Theme Editor. It will generate XAML which you just have to copy into your app.