Proposal: Update the corner radii of common controls to be consistent with web and app style direction

[sravya03]

Proposal: Update default control styles with rounded corners and make them easy to customize

---

Corner Radius (aka Rounded Corner) How-To document PR is created.

This will be added to docs.microsoft.com as a documentation.
It will be a new page under https://docs.microsoft.com/en-us/windows/uwp/design/style/.

Ask to community:
I am trying out writing a little more "background explanation (WHY)" that our customers have expressed we provide with our documentation in some of our focus groups. I would like feedback as this does not follow normal documentation pattern.

Are those extra information useful/helpful, not relevant, other info missing, etc.?

---

Summary

Update default control styles with rounded corners and make them easy to customize. Developers should not have to retemplate the controls to "unround" the corners or round them further.

Rationale

Problems today:

• XAML controls are inconsistent with how web and mobile apps are evolving – this highlights the inconsistency across app ecosystem on Windows when these UI are used intermixed with each other.

• There are many different levels of corner rounding in the market today but the way XAML controls are architected require those developers who wants to update to retemplate all the controls, locking them to a version of the control that will not be able to take advantage of future updates as easily.

Functional Requirements

#	Feature	Priority
1	When developers use common controls as is, all the controls are consistent with each other. (Update default control style.)	Must
1.1	Users experience form controls (e.g. button, text box, etc.) with rounded corner.	Must
1.2	Users experience popup/transient menu type controls (e.g. flyout, CommandBarFlyout, etc.) with rounded corner and they look appropriate with shadow.	Must
1.3	Users experience "bars" with rounded corners (e.g. selection bar, scrollbar, etc.)	Must
2	When developers use the controls in a normal use case, there will be no perceived performance issue or slowness in rendering	Must
3	Developers have flexibility to style values of corner radii without retemplating. (This is tracked by #684.)	Should
4	Control update feel coherent with the same controls used by Fabric, Edge, and Xbox	Should
5	Users experience fully circular slider thumb that feels more touch friendly.	Should
6	Developers are able to round the popup/transient menu type controls' corner further and users do not experience visual glitch	Could
7	Users experience rounded keyboard focus rectangle	Could
8	Controls with rounded corners are rendered in performant way when they are used in more stressful/less normal use cases (e.g. 100s of rounded corners are used at once, large surface has rounded corner that is persistent (i.e. not temporary or transient))	Could
9	Update controls to render with more performant ninegrid so there are less measurable performant impact (this is measurable by data, but still not perceivable by user as in number 4 above)	Could
10	Make it possible to round the inner and outer lines of border individually rounded vs. not	Won't
11	When performance is measured, there is no difference between when the corner is not round vs. round (this is physically impossible)	Won't

Important Notes

There are three categories of changes being proposed (requirement number 1.1, 1.2, and 1.3) and here are mock up of those.

Here are relevant visual comp files: https://github.com/microsoft/microsoft-ui-xaml-specs/tree/user/chigy/roundedcorner/active/RoundedCorner/ImageFiles

Courtesy of @mrlacey , we have this easier to view version of the above file folder: https://github.com/mrlacey/microsoft-ui-xaml-specs/blob/RoundedCornerVisualizations/active/RoundedCorner/ImageFiles/index.md

Form type controls (req 1.1)
• Button
• CheckBox
• ComboBox
• DropDownButton
• Slider
• SplitButton
• ToggleButton
• ToggleSplitButton
• Flipview
• GridView
• ListView
• TreeView
• ContentDialog
• AutoSuggestBox
• PasswordBox
• RichEditBox
• TextBox
• DatePicker
• CalendarDatePicker
• Tab control

Popup/transient menu type controls (req 1.2)
• CalendarDatePicker
• DatePicker
• TimePicker
• Flyout
• TeachingTip
• ToolTip
• DropDownButton
• SplitButton
• Slider
• AutoSuggestBox
• CommandBarFlyout
• MenuFlyout
• ComboBox
• ColorPicker
• MediaPlayerElement
• ContentDialog
• MenuBar
• ToggleSplitButton

Bars (req 1.3)
• NavigationView
• Pivot
• ScrollIndicator
• ProgressBar
• Slider
• ColorPicker
• MediaPlayerElement
• WebView (not a part of XAML change)

User Feedback

Windows 10 Reddit Thread

Open Questions

[mdtauk]

This should be a wider project than just the rounded corners on buttons etc as used by Fabric.

• Buttons
• Spinners/ProgressRing
• Indeterminate ProgressBar
• Checkboxes & Radio Buttons
• ComboBoxes and TextFields
  And so on.

Xbox will continue to have different requirements, but with a new set of Xbox consoles on the way, perhaps the Microsoft Design teams can work together to align everything in time for WinUI 3.0 and Xbox Next.

Fabric seems to be getting a lot of focus at the moment, what with it's cross platform and PWA use cases. So perhaps Fabric becomes the blueprint - at least for the Compact Density, and move from 2px to 4px as a minimum measurement - and then you extrapolate the touch affordances and fill out the missing control states.

The ThemeShadows will need to account for the rounded corners. And Acrylic surfaces should probably include inner and outer borders to ensure they appear elevated from the backgrounds.

[chigy]

@mdtauk As requirement number 4 states, there's a plan to rationalize this change with Xbox. That said, this specific feature is limited to rounded corner only to keep the work clearly scoped. Please feel free to open separate requests for other design suggestions you have.

BTW, I don't quite understand your feedback on inner and outer borders for Acrylic surfaces? Is it the Xbox design you are mentioning since we currently do not use two borders as you specify.

[mdtauk]

@chigy Sure with the Xbox, that is its own thing. But the point is the rounded corners need to work on all the relevant controls.

I am not aware of the internal figma design specs the Fluent Team may or may not have agreed on - but it needs to be more than Buttons.

Fluent Web uses a 2px corner radius for its rounded corners, but Fluent XAML has tended to use 4px as a base measurement. Then there is the CompactDensity templates which would probably use the same metrics as FluentWeb?

I made a comparison image of Xbox Fluent and Fabric shared controls, and how different they look. So there is more than the rounded corners that needs to be done whilst these control templates are being looked at.

Ignore the Xbox stuff

[chigy]

@mdtauk , For you to get an impression this is only about button, I must not have speced clearly... Rest assured, it is not. See the requirements number 1 and their sub items. This is about all of the controls.

I have not had chance to publish design file but the corner radius we are planning are indeed 2px (4px for overlay UI). I actually do work very closely with Fabric team (i.e. Fluent Web) and we are evaluating these changes together. That said, making them match exactly the same is not our goal, but we do need to be coherent and feel part of the family when users see them side by side. See requirement number 4.

So there is more than the rounded corners that needs to be done whilst these control templates are being looked at.

It is in the works but we are doing this one by one/case by case basis. We are careful in making changes that makes sense not to change things for the sake of change.

[mdtauk]

@chigy Thank you, thank you, thank you!

I would love if you were able to share these designs with the community, not only because we all want to see where the controls and UI are going, but also so when the changes are implemented we can point out inconsistencies, as well as ensure future control proposals will feel at home!

Fabric Web as well as Fluent Web do seem to be ahead of the pack, and XAML as well as WPF and WinForms/Visual Styles should follow!

[Felix-Dev]

@chigy @mdtauk See my response here. Just seeing the UI concepts "to know where Fluent Design is going" or to point out inconsistencies in my opinion isn't enough. I elaborate on this point further in the linked issue above, but long story short I want there to be an active back-and-forth between the users and the Fluent Design (FD) team even when it comes to Design proposals.

@mdtauk I keep seeing you raise the point of updating the WPF/WinForms controls to match FD. I'm opposed to that as you will have WinUI if you want to ship a non-UWP app with Win10 native look & feel and the team(s) at MS only have finite resources which are best spent on making UWP/WinUI THE definite Windows Presentation platform.
So, @YuliKl @chigy @pag3: Can you comment on this? Will the default WinForms/WPF controls be updated to have a new FD look or will the WinUI controls be the way to go for the latest-and-greatest design features as I understand it?

[mdtauk]

I posted this image in the Numberbox proposal, but it may have some relevance to the TextBox controls being updated.

The BorderThickness, FocusReveal on Focused State, Border on Disabled State.

The "Spin buttons" style could apply to the search button, password reveal button, clear text button.

[Felix-Dev]

The shadow around the border/control elements in focused state looks way too strong to me. Why do they even need shadows at all? Current version (just border color changing) is totally fine. Shadows might suggest the control (element) is being elevated to the foreground, which might make sense in 3D environments but certainly isn't needed for classic desktop environments and, one could argue, add some distraction.