Repository navigation
Description
Describe the bug
I have noticed that the AttachedDropShadow (from CommunityToolkit.Uwp.Extensions) messes up the shadow rendering when we combine different screen scalings with different scaled assets (scale-100, scale-125, ...).
This is how the shadow looks on my 100% scaled screen. It loads the scale-100 image.
This is what happens when I move the window to my surface laptop studio screen. It loads the scale-150 image and the shadow gets messed up.
In general, the moving from one screen to the other is to illustrate that the shadow does work at first and then gets messed up.
If you open the Window in the high scale screen, the shadow is messed up anyways, it doesn't need to be moved.
I am not sure if the cause is the screen scale or the PPI/DPI, I am no expert in this matter.
Steps to reproduce
See below, as this is not a RichEditTextBox
Expected behavior
Important
Make sure you have 2 monitors with different scales connected to your machine
- Open Solution
- Run Project
- Move Window from scale screen to scale screen
- See the wrong shadow
Expected behavior
The correct shadow as is when there is only one monitor attached, or when only one asset scaling is present.
Screenshots
No response
Code Platform
- UWP
- WinAppSDK / WinUI 3
- Web Assembly (WASM)
- Android
- iOS
- MacOS
- Linux / GTK
Windows Build Number
- Windows 10 1809 (Build 17763)
- Windows 10 1903 (Build 18362)
- Windows 10 1909 (Build 18363)
- Windows 10 2004 (Build 19041)
- Windows 10 20H2 (Build 19042)
- Windows 10 21H1 (Build 19043)
- Windows 10 21H2 (Build 19044)
- Windows 10 22H2 (Build 19045)
- Windows 11 21H2 (Build 22000)
- Other (specify)
Other Windows Build number
No response
App minimum and target SDK version
- Windows 10, version 1809 (Build 17763)
- Windows 10, version 1903 (Build 18362)
- Windows 10, version 1909 (Build 18363)
- Windows 10, version 2004 (Build 19041)
- Windows 10, version 2104 (Build 20348)
- Windows 11, version 22H2 (Build 22000)
- Other (specify)
Other SDK version
No response
Visual Studio Version
No response
Visual Studio Build Number
February 2026 (18.3.2)
Device form factor
Desktop
Additional context
That's the code, for quick reference
<Grid Width="1000" Height="1000"
Background="White">
<Border x:Name="ShadowTarget"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Width="300" Height="300"
Source="/Assets/Images/FolderImage.png">
<ui:Effects.Shadow>
<ui:AttachedDropShadow CastTo="{x:Bind ShadowTarget}"
BlurRadius="20"
Offset="0" Color="#00ff00"/>
</ui:Effects.Shadow>
</Image>
</Grid>Help us help you
Yes, but only if others can assist.
Activity
michael-hawker commentedon Mar 23, 2026
Huh, surprised this would be the case, it's odd that it's only part of the shadow vs. the whole shadow being the wrong scale...
Probably worth investigating what's happening with the masking here as a starting point:
Windows/components/Extensions/src/Shadows/AttachedDropShadow.cs
Line 241 in 19fc4de
@DilanBoskan I'm not sure if it's an issue with the mask we're getting from composition or if it's how we're scaling/sizing that mask afterwards. Is this enough for you as a starting point or is there more info you'd like to be able to take a look (as you mentioned you could help with assistance)?
(I'm wondering if we're getting a scaled mask or something and not accounting for that when we consume it, for instance.)