Backgrounds created using SystemBackdropElement lack anti-aliasing when rounded corners are applied

[ChenYiLins]

Describe the bug

As the title suggests, when creating a background using SystemBackdropElement, you’ll notice that anti-aliasing is missing if you set rounded corners. This issue has actually always been present in the right-click menu on the Windows 11 desktop.

Why is this important?

Just a quick rant: this issue with the Windows 11 desktop context menu has been around ever since it switched to the WinUI style, and I really don’t understand why no one has fixed it yet. (However, this criticism is directed at the Windows 11 development team, not the WinUI team.)

Steps to reproduce the bug

                <SystemBackdropElement CornerRadius="8">
                    <SystemBackdropElement.SystemBackdrop>
                        <helpers:ContentBackdropHelpers />
                    </SystemBackdropElement.SystemBackdrop>
                </SystemBackdropElement>

Actual behavior

Anti-aliasing is missing

Expected behavior

Features anti-aliasing

Screenshots

Actual

Expected

NuGet package version

2.0.12

Windows version

No response

Additional context

Actually, fixing this bug is quite simple; you just need to set the ExternalBackdropBorderMode property to CompositionBorderMode.Soft.

See this property in here.

Add after:

microsoft-ui-xaml/src/controls/dev/SystemBackdropElement/SystemBackdropElement.cpp

Line 177 in abb3591

m_backdropLink = winrt::ContentExternalBackdropLink::Create(m_compositor);