Search code examples
c#xamluwpuwp-xamlwindows-community-toolkit

DropShadowPanel and border corner radius


I want to make drop shadow effect with border control. I am using UWP toolkit.

<controls:DropShadowPanel x:Name="dspShadow"
                          BlurRadius="10"
                          ShadowOpacity="0.8"
                          OffsetX="0"
                          OffsetY="0"
                          Color="Black">
    <Border x:Name="borderMain" Background="Red" CornerRadius="10"/>
</controls:DropShadowPanel>

But it doesn't recognize corner radius, the result is like this:

And I need it to look like this:

Any ideas how to achieve this?


Solution

  • You need to mask it. Currently you can only get the mask from TextBlock, Shape and Image. In this case just replace the Border with a Rectangle.

    <controls:DropShadowPanel x:Name="dspShadow"
                              BlurRadius="10"
                              OffsetX="0"
                              OffsetY="0"
                              ShadowOpacity="0.8"
                              Color="Black">
        <Rectangle Width="100"
                   Height="48"
                   Fill="Red"
                   RadiusX="10"
                   RadiusY="10" />
    </controls:DropShadowPanel>