How to add drop shadow to just one specific side in WPF?

user_13863024 0
Viewed 658

I am trying to achieve a grid, with a shadow on just one side and no trace of any shadow on any of the other sides. I tried fiddling around with the direction property of the DropShadowEffect.

What I have tried:

<Grid Background="Transparent" Grid.Row="0" Grid.Column="1">
   <Grid Background="White"/>
      <Border CornerRadius="0,5,0,0" BorderBrush="White" BorderThickness="0" Background="White">
         <Border.Effect>
            <DropShadowEffect BlurRadius="5" Direction="355" RenderingBias="Quality" ShadowDepth="2"/>
         </Border.Effect>
      </Border>
   </Grid>
</Grid>

This is what happens with my code: Slight gray trail on the left side

I want to achieve a drop shadow only visible on the bottom side of the grid, and no trace of the shadow on any of the other sides. The above code leaves a thin gray trail on the left side, which wouldn't work for me.

Sorry if this is a silly question, I am kinda new to WPF.

wpf
1 Answers

I don't think the DropShadowEffect has any functionality built-in for this sort of application, however, I managed to achieve the required result using a rectangle and filling it with a linear gradient.

 <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.3">
    <Rectangle.Fill>
       <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#00131313" Offset="1"/>
       </LinearGradientBrush>
    </Rectangle.Fill>
 </Rectangle>

Rectangle

To maintain the same width as the parent of the shadow, add them to the same grid and the same column, set the horizontal and vertical alignment to stretch and the shadow will look consistent.

Then I positioned the rectangle in place of the shadow. Seems a little wanky, but works nonetheless.

Edit: I found another solution which seems way more better, using the ClipToBounds property and the BorderThickness property.

<Border ClipToBounds="True" BorderBrush="White" BorderThickness="0,2,0,0">
   <Border.Effect>
      <DropShadowEffect ShadowDepth="2" BlurRadius="10"/>
   </Border.Effect>
</Border>

Border

Using a border and a drop shadow is easier than using a rectangle and tweaking it till it looks natural.

Usage of grids is advised to position the border perfectly.

user_138630240
Related