WPF drop shadow

Question

Whenever I set the Border.Effect property to a drop shadow effect every control contained within the control has a drop shadow.

Is there a way to set the shadow just to the border and not every control contained in the border?

Here is a short example of my code:

<Grid>
 <Border Margin="68,67,60,67" BorderBrush="Black" BorderThickness="1" CornerRadius="10">
  <Border.Effect>
   <DropShadowEffect/>
  </Border.Effect>
  <Rectangle Fill="White" Stroke="Black" Margin="37,89,118,98" />
 </Border>
</Grid>

Don't you just need to paint the background of the object that you add the shadow to? — Sheridan, Dec 01 '21 at 16:13

score 62 · Accepted Answer · edited May 29 '12 at 18:29

Two choices:

Option 1: Add a border element with the effect on it as a sibling of the border / rectangle element tree you have. Something like this:

<Grid>
    <Border Margin="68,67,60,67"
            BorderBrush="Black"
            BorderThickness="1"
            CornerRadius="10">
        <Border.Effect>
            <DropShadowEffect />
        </Border.Effect>
    </Border>
    <Border Margin="68,67,60,67"
            BorderBrush="Black"
            BorderThickness="1"
            CornerRadius="10">

        <Rectangle Fill="White"
                   Stroke="Black"
                   Margin="37,89,118,98">
        </Rectangle>
    </Border>

</Grid>

Option 2: Put the rectangle as a sibling of the border element like this:

   <Grid>
    <Border Margin="68,67,60,67"
            BorderBrush="Black"
            BorderThickness="1"
            CornerRadius="10">
        <Border.Effect>
            <DropShadowEffect />
        </Border.Effect>
    </Border>
    <Rectangle Fill="White"
               Stroke="Black"
               Margin="37,89,118,98">
    </Rectangle>

</Grid>

NOTE: You will have to tweak the layout on the second solution to make the rectangle line up where you want it

Incase you have added some other contents (instead rectangle) inside the Grid panel, set the Grid panel's Background property to avoid entire contents get drop-shadow. For example, ' ...... .... ' — Suriya, Mar 13 '14 at 07:28

score 3 · Answer 2 · answered Dec 01 '21 at 16:17

I realise that your question has an answer, but it doesn't appear to have the simplest answer. The simplest answer to your question is for you to just colour the background of the control that you set the shadow on. Like so:

<Grid>
    <Border Margin="68,67,60,67" Background="White" BorderBrush="Black" 
        BorderThickness="1" CornerRadius="10">
        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>
        <Rectangle Fill="White" Stroke="Black" Margin="37,89,118,98" />
    </Border>
</Grid>

And the result:

score 1 · Answer 3 · answered Jun 15 '22 at 12:00

1

I tried going for a similar design to this toolbar in white:

This is what I used:

<Border CornerRadius="8" Background="White" Grid.Row="1">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="3" Opacity="0.2"/>
    </Border.Effect>
</Border>

answered Jun 15 '22 at 12:00

Eduards

1,734
2
12
37

WPF drop shadow

3 Answers3

Linked