[WPF] 实现 WPF 的 Inner Shadow

在 WPF 中，我们通常用 DropShadow 做阴影效果，但都是做外阴影。内阴影（Inner Shadow）的话其实也不是不可以，就是有些曲折。这篇文章介绍几种做内引用的做法。

文章涉及到以下概念：

UIElement.ClipToBounds 属性 (System.Windows)

UIElement.Clip 属性 (System.Windows)

UIElement.OpacityMask 属性

VisualBrush 类 (System.Windows.Media)

1. ClipToBounds

<Border>     <Border.Clip>         <RectangleGeometry Rect="0,0,100,100" />     </Border.Clip>     <Border.Effect>         <DropShadowEffect BlurRadius="8" ShadowDepth="0" />     </Border.Effect>     <ContentControl HorizontalAlignment="Center"                     VerticalAlignment="Center"                     Content="Clip " /> </Border> 

上面是一个普通的加上 DropShadowEffect 的 Border。要做内部阴影的话就只是将外部阴影裁剪掉，在 Border 上简单地加上 ClipToBounds="True" 就可以实现这个效果：

ClipToBounds 属性用于指示是否剪切此元素的内容(或来自此元素的子元素的内容)使其适合包含元素的大小。

但如果 Border 有圆角（最近微软向圆角势力屈服了，Windows 11 到处都是圆角）的话，那这个方案就有问题了，因为它不能裁剪圆角：

2. Clip

为了可以裁剪圆角内容，还是老老实实用 Clip 来裁剪，不过这就需要自己计算尺寸及圆角半径：

<Border>     <Border.Clip>         <RectangleGeometry RadiusX="8"                            RadiusY="8"                            Rect="0,0,100,100" />     </Border.Clip>     <Border.Effect>         <DropShadowEffect BlurRadius="8" ShadowDepth="0" />     </Border.Effect>     <ContentControl HorizontalAlignment="Center"                     VerticalAlignment="Center"                     Content="Clip " /> </Border> 

这个方案的坏处很明显，因为要写死尺寸，真的要用这方案的话最好封装一下在 SizeChanged 事件中重新计算裁剪区域。

3. OpacityMask

<Grid Width="100"       Height="100"       Margin="10">     <Rectangle x:Name="Rectangle2"                Fill="White"                RadiusX="8"                RadiusY="8" />     <Border Margin="0">         <Border.Effect>             <DropShadowEffect BlurRadius="8" ShadowDepth="0" />         </Border.Effect>         <ContentControl HorizontalAlignment="Center"                         VerticalAlignment="Center"                         Content="OpacityMask" />     </Border>     <Grid.OpacityMask>         <VisualBrush Stretch="None" Visual="{Binding ElementName=Rectangle2}" />     </Grid.OpacityMask> </Grid> 

这个方案用另一个元素的 VisualBrush 来做 OpacityMask，胜在够灵活，就是 XAML 要写多一些。

4. 更粗的内阴影

上面这些 Border 都应用了这个样式：

<Style TargetType="Border">     <Setter Property="Width" Value="100" />     <Setter Property="Height" Value="100" />     <Setter Property="Margin" Value="10" />     <Setter Property="BorderBrush" Value="SkyBlue" />     <Setter Property="BorderThickness" Value="1" /> </Style> 

理所当然的，它们制造出来的阴影都是以这个 1 像素的边框为基础，如果需要更大更粗的内阴影，可以使用一个负数的 Margin 配合同样粗细的 BorderThickness 实现。以 OpacityMask 的方案为例，用下面的代码可以做个又粗又大的内阴影：

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) {     ShadowElement.Margin = new Thickness(-e.NewValue);     ShadowElement.BorderThickness = new Thickness(e.NewValue);     (ShadowElement.Effect as DropShadowEffect).BlurRadius = e.NewValue * 2; } 

5. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab