Drop shadow effect in Windows Phone 8.1 Runtime?

Question

I'm looking for a way to add a Drop Shadow Effect to the multiple kind of elements in my Windows Phone 8.1 Runtime (not Silverlight!) application. The main problem is that.. there's no offical API for it. The main problem is that I need to mimic this effect not only to the basic shapes (like rectangle or a line), but also a path, like here:

Taken from question /4519243/path-with-broken-shadow-effect

Picture is borrowed from this question: path-with-broken-shadow-effect - I hope the owner won't mind ;) Now, he has achieved this effect because it was done in WPF. I'm working on a Universal App (so WinRT), and there's no Effects extension.

I've searched the web multiple times, and found some kind of workarounds, but they all miss something. For example this one:

http://www.silverlightshow.net/items/Simple-Xaml-Drop-Shadows-in-Silverlight-2.aspx <- I can't work on Canvas, the content has to be a Grid.

Do you any idea how can I achieve satisfying results on faking Drop Shadow Effect in Windows Phone 8.1 Runtime?

The shown example would work in a Grid as well, or why can't you do it with a Grid? — thumbmunkeys
Because for the moment I came up with a solution to use Grid as a root for the content (with transparent background), and then inside of the Grid I have placed Path that imitates that shape (I need almost the same shape, don't how to to call it). I don't know how could I mimic solution presented above to the Path object. And also, I don't use round shapes, and it looks much worse without it. — Malutek

thumbmunkeys thumbmunkeys · Accepted Answer · 2014-08-19T12:20:05

Apply a RenderTransform to the shadow shape. Set the scale to make it bigger:

<Grid Style="{StaticResource LayoutRootStyle}" Background="#FF803535" >             
        <Rectangle Width="100" Height="100" Opacity="0.3" RenderTransformOrigin="0,0" StrokeThickness="16" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" Stroke="Black"  >
            <Rectangle.RenderTransform>
                <CompositeTransform ScaleX="1.07" ScaleY="1.07"  />
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Width="100" Height="100" Fill="Blue"></Rectangle>
    </Grid>

Drop shadow effect in Windows Phone 8.1 Runtime?

1 Answers