Getting unexpected gradient background with partly rounded corners

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)

[gabbybilka]

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

[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>