Microsoft-ui-xaml: Question: How do I remove the default rounded corner of Buttons and TextBoxes?

Created on 17 Nov 2019 · 3Comments · Source: microsoft/microsoft-ui-xaml

After upgrading to the latest WinUI library, the Buttons and TextBoxes have rounded corners. But I want the previous sharp corners.
Manually setting CornerRadius to 0 fro all the controls is a pain. Is there a ThemeResource which I can override to set the default corner radius to 0 for Buttons and TextBoxes?

question

Source

MuziburRahman

All 3 comments

@MuziburRahman There is a global control corner radius theme resource which you can use: ControlCornerRadius

Example:

<Page.Resources>
     <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
</Page.Resources>
````

This sets the corner radius for every control on that page to 0 (excluding overlay controls such as Popup and Flyout). If you only want to change the control corner radius for select controls, I'm afraid you currently have to use styles to achieve this. 

If you also want to restore the previous border thickness, you have per-control resources to achieve this:

0

```

You will note I used page-level scope here and not application-level scope. There is a known bug which prevents these resource overrides to be applied when defined with the latter scope level.

Additional resources to check out:

Preview API documentation about Corner Radius
Fluent XAML Theme Editor to easily visualize border thickness/control corner radii changes and code generation to include in your app

Felix-Dev on 17 Nov 2019

❤1

@Felix-Dev thanks a lot. :D

MuziburRahman on 17 Nov 2019

As @Felix-Dev mentioned there is an open issue regarding the setting of this value in application resources. However maybe this issue was partially resolved, since I was able to remove the corner radius by adding the following

<CornerRadius x:Key="ControlCornerRadius">0,0,0,0</CornerRadius>

to the application resources.