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

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:

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.

CodePudding user response：

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>

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>

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.