在WPF中如何仅为元素的某一特定侧边添加投影效果

解决方案 #

以下两种方案均可实现Grid仅底部显示投影、其余侧边无残留的效果： #

方案1：裁剪多余阴影（改动最小，兼容现有代码） #

原生DropShadowEffect的模糊半径会向四周自然扩散，仅调整方向参数无法完全消除其余侧边的浅阴影，你可以通过外层容器裁剪掉非底部的阴影部分，修改后代码如下：

<Grid Background="Transparent" Grid.Row="0" Grid.Column="1">
   <Grid Background="White"/>
   <!-- 外层容器仅在底部预留阴影空间，其余边裁剪溢出内容 -->
   <Grid ClipToBounds="True" Margin="0,0,0,5">
      <Border CornerRadius="0,5,0,0" BorderBrush="White" BorderThickness="0" Background="White">
         <Border.Effect>
            <DropShadowEffect BlurRadius="5" Direction="270" RenderingBias="Quality" ShadowDepth="2"/>
            <!-- Direction设为270度对应正下方投影，更适配底部阴影需求 -->
         </Border.Effect>
      </Border>
   </Grid>
</Grid>

说明：外层Grid开启ClipToBounds="True"后，会自动裁剪掉顶部、左侧、右侧溢出的阴影内容，仅底部预留的Margin空间会显示阴影，不会出现其余侧边的残留痕迹。 #

方案2：手动模拟底部阴影（性能更优，无多余渲染开销） #

如果你的场景需要大量使用该效果，建议用渐变边框手动模拟阴影，避免DropShadowEffect带来的额外渲染消耗，实现代码如下：

<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 Height="5" VerticalAlignment="Bottom" Margin="0,0,0,-5">
         <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
               <GradientStop Color="#22000000" Offset="0"/>
               <GradientStop Color="#00000000" Offset="1"/>
            </LinearGradientBrush>
         </Border.Background>
      </Border>
   </Grid>
</Grid>

你可以自行调整渐变的透明度、高度参数，匹配需要的阴影深浅和模糊程度，该方案完全不会产生其余侧边的阴影痕迹。

内容的提问来源于stack exchange，提问作者TheCoder