开发者

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:

<Gr开发者_如何转开发id>
 <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


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:

WPF drop shadow


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

WPF drop shadow

This is what I used:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜