DropDownShadow doesn't reponse to CornerRadius property

[AbdAlghaniAlbiek]

When I add DropDownShadow control to a control like rectangle then I make rectangle's corners more rounded the shadow stay with sharp corner to solve that I saw CornerRadius property that introduced in October update in DropDownShadow properties, and when I give values to CornerRadius property nothing change (shadow stay with sharp corners)

App min and target version:

• [Min] October 2018 Update (17763)
• [Target] May 2019 Update (18362)

Device form factor:

• Desktop

Visual Studio

• 2019 (version: )

[ghost]

Hello AbdAlghaniAlbiek, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[Kyaa-dost]

@AbdAlghaniAlbiek Thanks for highlighting the issue! Not certain if this is a bug or there is anything that perhaps is required to make this work. Let's see if any devs can shed light on this 💡

[michael-hawker]

@AbdAlghaniAlbiek can you provide more details on the XAML you're using? Screenshots are helpful too. As well as a mock-up of what you're expecting.

Generally, you should use RadiusX and RadiusY on the Rectangle within the DropShadowPanel in order to round the corners OR the CornerRadius of the inner control, not the CornerRadius property of the DropShadowPanel itself.

CornerRadius is a general property added on all UIElements. We don't hook it up in the DropShadowPanel control currently, I don't know if that makes any sense to do, as it would just clip the Shadow effect itself (and the inner content).

You can try and see what the behavior is in your scenario by just overriding the style to add the CornerRadius connection:

<Style TargetType="controls:DropShadowPanel">
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:DropShadowPanel">
                    <Grid Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalAlignment}"
                          CornerRadius="{TemplateBinding CornerRadius}">
                        <Border x:Name="ShadowElement" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The only other thing is if you're trying to fill the shape with a composition brush, then you would be hitting this bug probably: microsoft/microsoft-ui-xaml#1884

[Kyaa-dost]

@AbdAlghaniAlbiek any update on this? Are you still having this issue?

[Kyaa-dost]

@AbdAlghaniAlbiek did you have a chance to try what mentioned above?

[AbdAlghaniAlbiek]

It doesn't work 😢 If you want check out by yourself There is another problem that in offset z when i use it in first build time, it works but in second build it doesn't response to value changes especially when I give a zero value to it في السبت، ٩ يناير ٢٠٢١ ٢:١٥ ص Kyaa Dost <[email protected]> كتب:

[michael-hawker]

@AbdAlghaniAlbiek you need to share more details with us for us to be able to help you. Like recreating your scenario in our Sample App page and providing us the XAML to reproduce the issue.

If you modify the sample we have in the sample app like this:

          <controls:DropShadowPanel BlurRadius="8"
                                    ShadowOpacity="1"
                                    OffsetX="4"
                                    OffsetY="4"
                                    Color="Black"
                                    Margin="20"
                                    IsMasked="True">
            <Rectangle Width="100" Height="50"
                Fill="Green" RadiusX="8" RadiusY="8" />
          </controls:DropShadowPanel>

You get this:

Which seems like the effect you're looking for?

[AbdAlghaniAlbiek]

@michael_hawker
yes that what I want to do, DropDownShadow is responsive for RadiusX and RadiusY changes but it doesn't work with CornerRadius property even I give it the style that you produced above but also it doesn't work 😓😓

I don't know why it works with Rectangle (RadiusX, RadiusY) and doesn't work with Grid-stackpanel-.....(CornerRadius)
even I tried that in your samlple (thank you for version 7.0.0) it the same result

[michael-hawker]

Our new attached shadow feature coming in 7.1 (available in 7.1.0-rc1 package now) should resolve these issues as they have and respect a CornerRadius property on the shadow itself which can be aligned to a UI Element.

[AbdAlghaniAlbiek]

Thank you all. I was following you on twitter, I saw a sample how to implement it in uwp application it is awesome 🔥