wpfdropshadow

WPF drop shadow


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>

Solution

  • 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