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>
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