microsoft / microsoft/microsoft-ui-xaml

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

Open Beginner friendly
#11,086 0 comments 2 reactions 0 assignees View on GitHub
area-SystemBackdropEement bug
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

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

```xaml





```

### Actual behavior

Anti-aliasing is missing

### Expected behavior

Features anti-aliasing

### Screenshots

### Actual

Image

Image

### Expected

Image

### 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](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.content.contentexternalbackdroplink.externalbackdropbordermode?view=windows-app-sdk-2.0-experimental#microsoft-ui-content-contentexternalbackdroplink-externalbackdropbordermode).

Add after: https://github.com/microsoft/microsoft-ui-xaml/blob/abb359150eaa4c8ba1c8dd89d81552cbf4e2d557/src/controls/dev/SystemBackdropElement/SystemBackdropElement.cpp#L177

Contributor guide

Open the contributing guide

Research direction

Start in src/controls/dev/SystemBackdropElement/SystemBackdropElement.cpp at the referenced line around 177 and inspect how the backdrop link is configured. Use the reported ExternalBackdropBorderMode setting, then validate the SystemBackdropElement rounded-corner scenario to confirm that its edges are anti-aliased.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
88/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.