Question

I have a Windows Store App. I'm looking to add a Drop Shadow effect. I've considered using a Gradiented border, but I can't seem to get it to look right. I've tried setting the Border's BorderBrush to a LinearGradientBrush, going from the background color to black, but it seems... out of place, is the best way to put it. Is there a better way to be doing this? Is there a better Gradient I should be using? (Non-linear?)

I think based on some suggestions that people had using CSS that going to a dark grey instead of black is the better option, so I will be toying around with that in the meantime.

What constitutes the 'standard' CSS Drop Shadow? Are there specific alpha levels that it goes up to? Is it a linear gradient?

Was it helpful?

Solution

I appear to have figured it out.

Note: This answer is for a Top-And-Bottom only drop shadow, not all the way around.

I created a Border, as described in the question, and created a BorderBrush as defined below:

<Border Grid.Row="1" BorderThickness="0,5,0,5">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
            <GradientStop Color="Blue" Offset="0"/>
            <GradientStop Color="Black" Offset=".03"/>
            <GradientStop Color="Black" Offset=".98"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
     </Border.BorderBrush>
</Border>

Strangely enough, in order to get a similar effect on the top and bottom, I had to make the bottom GradientStop closer to the edge than the top. I'm not sure why that is.

What this will do is if you have content on a Blue border, it will create a top drop shadow stripe and a bottom drop shadow stripe. It works pretty well for me right now.

The StartPoint/Endpoint define a point at the top center and bottom center (halfway in on x, 0 y, then halfway in on x, 1 y). For, say, one on the left and right side, all you'd have to do is change the StartPoint and EndPoints to: StartPoint="0,.5" EndPoint="1,.5".

I'm not sure how to change it for all the way around. I think it may likely require going from the center (.5,.5) to a corner (0,0), but I haven't gotten this to work yet.

Hope this helps someone else.

OTHER TIPS

Up to DropShadow effect besides using brush, we could draw by ourselves.

<Grid Width="100" Height="100">
    <Rectangle Stroke="Black" Margin="5" RadiusX="7" RadiusY="7" Opacity="0.3"/>
    <Rectangle Stroke="Black" Margin="4" RadiusX="8" RadiusY="8" Opacity="0.25"/>
    <Rectangle Stroke="Black" Margin="3" RadiusX="9" RadiusY="9" Opacity="0.2"/>
    <Rectangle Stroke="Black" Margin="2" RadiusX="10" RadiusY="10" Opacity="0.15"/>
    <Rectangle Stroke="Black" Margin="1" RadiusX="11" RadiusY="11" Opacity="0.1"/>
    <Rectangle Stroke="Black" Margin="0" RadiusX="12" RadiusY="12" Opacity="0.05"/>
</Grid>

This will create a Grid with black drop-shadow around.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top