Getting unexpected gradient background with partly rounded corners

[wbokkers]

Describe the bug

I get an unexpected gradient brush when only some corners of a panel are rounded.

Steps to reproduce the bug

1. Use Windows App SDK 1.0 Preview 3
2. Add a panel with a background and with only two rounded corners

When using this XAML:

<Border Background="Red" CornerRadius="30,0,0,30"/>

I get this result:

Expected behavior

The panel should have a solid background color

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.0 Preview 3

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

May 2021 Update (19043)

[StephenLPeters]

@codendone and @gegao18 FYI, this is potentially problematic for a lot of the built in controls as well which frequently square one side of the controls corners.

[Marv51]

This also occurs in my project in many places when I upgrade to 1.0. Any guidance?
For me this is painfully easy to reproduce. Is more information needed to help to get this fixed as soon as possible?

[RekiDunois]

This also occurs in my project in many places when I upgrade to 1.0. Any guidance? For me this is painfully easy to reproduce. Is more information needed to help to get this fixed as soon as possible?

I try 0.8 still got the same problem. but UWP has no such a problem

[Marv51]

@gabbybilka Are you aware of this issue?

[WelterDevelopment]

WinAppSDK really needs an update as soon as possible. You really can't call an SDK production ready when the whole UI glitches around depending on the system's display scale... I just can't stress enough how crucial this issue is and how disappointing it is to see that in 2 months no assignee has been found and that it is still in the 'needs-triage' state. This should have top priority.

[WelterDevelopment]

For people who stumble over this and need a quick way to remove the gradient in the TabViewItemHeader, just add this to App.xaml:

<CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>

The TabViewItemHeader now looks super ugly but its better than the weird color gradient. Then manually set the CornerRadius for every control that you want to have rounded corners:

<CornerRadius x:Key="CornerRadius">4</CornerRadius>
<CornerRadius x:Key="LargeCornerRadius">8</CornerRadius>

<Style  TargetType="FlyoutPresenter" >
  <Setter Property="CornerRadius" Value="{StaticResource LargeCornerRadius}"></Setter>
</Style>
<Style  TargetType="Button" >
  <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}"></Setter>
</Style>

[gabbybilka]

Fixed as part of 1.1-preview2 🎉 (https://aka.ms/windowsappsdk/1.1/1.1.0-preview2/release-notes)