Shadows not working on Windows

matt-goldman commented 2 years ago

Description

When adding a <Shadow /> to a view, the shadow is not displayed when running on Windows. When running on Android, the shadow displays as expected.

I haven't been able to test macOS or iOS yet as I can't run .NET MAUI apps on iOS or macOS at all after the most recent VS 2022 for Mac (preview) update.

Figure: No shadow shown in Windows

Figure: Same code running on Android has a shadow

Here is the code used to create the above UI:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ShadowBug.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Border Stroke="Black"
                    StrokeThickness="3"
                    StrokeShape="RoundRectangle 10">
                <Border.Shadow>
                    <Shadow Offset="5,5"
                            Opacity="0.8"
                            Brush="Black"
                            Radius="20"/>
                </Border.Shadow>
                <Label Text="Test 1"
                       Margin="10"/>
            </Border>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

As a small aside, last time I was able to get this to run on macOS, the border wasn't rendered either. I'll open an issue for that too when I can get it running again.

Steps to Reproduce

File new .NET MAUI app
Add a Shadow to a view
Run the app

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows SDK 10.0.19041.0

Did you find any workaround?

No workaround at present

Relevant log output

No response

kristinx0211 commented 2 years ago

verified repro on windows.

jsuarezruiz commented 2 years ago

I have to reviewed it, the Shadow is rendered but without setting the Background property the opacity seems to be higher.

Workaround, set the Border Background.

matt-goldman commented 2 years ago

Workaround, set the Border Background.

Where are you setting the Background? Is this on the Shadow? Do you have a snippet for the workaround?

jsuarezruiz commented 2 years ago

Workaround, set the Border Background.

Where are you setting the Background? Is this on the Shadow? Do you have a snippet for the workaround?

In the Border.

ghost commented 2 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

samuelradford commented 1 year ago

To add further to this, it seems to work on Windows when adding a BackgroundColor property to the Border element. However, Resizing seems to be an issue. If you open the application in debug then it looks perfect, but as soon as you resize the window, the border doesn't re-render correctly and looks odd.

Example images attached.

Looks OK when first opened

Shadows don't re-render correctly when window is re-sized

Border Code:

<Border Padding="20"
              HeightRequest="160"
              Stroke="Black"
              StrokeThickness="0.2"
              StrokeShape="RoundRectangle 10 40"
              BackgroundColor="White">
        <Border.Shadow>
            <Shadow Brush="Black"
                    Offset="2, 4"
                    Opacity="0.6"/>
        </Border.Shadow>
        ....
</Border>

jinxinjuan commented 1 year ago

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on windows platform with above code.

freelancegeeks commented 1 year ago

still no fix on windows when resizing?

StSg85 commented 1 year ago

We are also waiting for the resizing fix for shadows on Windows. This is an absolute show stopper for our product managers.

Interesting that it apparently works in the main-branch, but the fix doesn't make it into a release.

Zerachiel01 commented 7 months ago

I'm also having trouble with this. For me it's a Border with a Shadow inside a CollectionView which is not showing any shadow. If I move the exact same Border outside of the CollectionView it works perfectly fine. Please fix this.

needledrag commented 5 months ago

I'm also having trouble with this. For me it's a Border with a Shadow inside a CollectionView which is not showing any shadow. If I move the exact same Border outside of the CollectionView it works perfectly fine. Please fix this.

Same issue for me on android but it seemd to work on iOS.

dotnet / maui