Round DropShadowPanel

Question

How do I create a round DropShadowPanel? This question provides some idea but I still got a square shadow.

This is my current try:

<Grid>
    <controls:DropShadowPanel
        x:Name="ShadowPanel"
        BlurRadius="10"
        ShadowOpacity="1">
        <Ellipse Width="120" Height="120" />
    </controls:DropShadowPanel>
    <Grid
        Width="120"
        Height="120"
        Background="DarkGray"
        CornerRadius="60">
        <FontIcon
            FontSize="50"
            Foreground="White"
            Glyph="&#xE8D4;" />
    </Grid>
</Grid>

Basically, I want the DropShadowPanel to have the same shape as the inner grid.

Answer 1

Please try the following code and set Ellipse with color. The DropShadowPanel will work.

<Grid>
    <controls:DropShadowPanel
        x:Name="ShadowPanel"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        BlurRadius="15"
        Opacity="1"
        ShadowOpacity="1"
        Color="Black"
        >
        <Ellipse
            Width="120"
            Height="120"
            Fill="White"
            />
    </controls:DropShadowPanel>
    <Grid
        Width="120"
        Height="120"
        Background="DarkGray"
        CornerRadius="60"
        >
        <FontIcon
            FontSize="50"
            Foreground="White"
            Glyph="&#xE8D4;"
            />
    </Grid>
</Grid>