Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF drop shadow

Tags:

wpf

dropshadow

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>
like image 533
Petezah Avatar asked May 14 '10 00:05

Petezah


People also ask

How to give shadow in WPF?

You can create a hard shadow by setting the BlurRadius property to 0.0 , which indicates that no blurring is used. You can control the direction of the shadow by modifying the Direction property. Set the directional value of this property to a degree between 0 and 360 .


2 Answers

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

like image 118
Brad Cunningham Avatar answered Oct 04 '22 15:10

Brad Cunningham


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:

NoShadowFallThrough

like image 29
Sheridan Avatar answered Oct 04 '22 15:10

Sheridan